Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.google.com/maps/documentation/javascript/reference/polygon below:

Polygons | Maps JavaScript API

Stay organized with collections Save and categorize content based on your preferences.

google.maps.Polyline class

A polyline is a linear overlay of connected line segments on the map.

This class extends MVCObject.

Access by calling const {Polyline} = await google.maps.importLibrary("maps").
See Libraries in the Maps JavaScript API.

Polyline([opts])

• opts:  PolylineOptions optional

Create a polyline using the passed

, which specify both the path of the polyline and the stroke style to use when drawing the polyline. You may pass either an array of

s or an

of

s when constructing a polyline, though simple arrays are converted to

s within the polyline upon instantiation.

getDraggable()

Parameters:  None

Return Value:  boolean

Returns whether this shape can be dragged by the user.

getEditable()

Parameters:  None

Return Value:  boolean

Returns whether this shape can be edited by the user.

getMap()

Parameters:  None

Returns the map on which this shape is attached.

getPath()

Parameters:  None

Retrieves the path.

getVisible()

Parameters:  None

Return Value:  boolean

Returns whether this poly is visible on the map.

setDraggable(draggable)

• draggable:  boolean

Return Value:  None

If set to true, the user can drag this shape over the map. The geodesic property defines the mode of dragging.

setEditable(editable)

• editable:  boolean

Return Value:  None

If set to true, the user can edit this shape by dragging the control points shown at the vertices and on each segment.

setMap(map)

• map:  Map optional

Return Value:  None

Renders this shape on the specified map. If map is set to null, the shape will be removed.

setOptions(options)

• options:  PolylineOptions optional

Return Value:  None

setPath(path)

• path:  MVCArray<LatLng>|Array<LatLng|LatLngLiteral>

Return Value:  None

Sets the path. See

for more details.

setVisible(visible)

• visible:  boolean

Return Value:  None

Hides this poly if set to false.

function(event)

• event:  PolyMouseEvent

This event is fired when the DOM click event is fired on the Polyline.

function(event)

• event:  PolyMouseEvent

This event is fired when the DOM dblclick event is fired on the Polyline.

function(event)

• event:  MapMouseEvent

This event is repeatedly fired while the user drags the polyline.

function(event)

• event:  MapMouseEvent

This event is fired when the user stops dragging the polyline.

function(event)

• event:  MapMouseEvent

This event is fired when the user starts dragging the polyline.

function(event)

• event:  PolyMouseEvent

This event is fired when the DOM mousedown event is fired on the Polyline.

function(event)

• event:  PolyMouseEvent

This event is fired when the DOM mousemove event is fired on the Polyline.

function(event)

• event:  PolyMouseEvent

This event is fired on Polyline mouseout.

function(event)

• event:  PolyMouseEvent

This event is fired on Polyline mouseover.

function(event)

• event:  PolyMouseEvent

This event is fired when the DOM mouseup event is fired on the Polyline.

Deprecated: Use the Polyline.contextmenu event instead in order to support usage patterns like control-click on macOS.

function(event)

• event:  PolyMouseEvent

This event is fired when the Polyline is right-clicked on.

google.maps.PolylineOptions interface

PolylineOptions object used to define the properties that can be set on a Polyline.

Type:  boolean optional

Default: true

Indicates whether this Polyline handles mouse events.

Type:  boolean optional

Default: false

If set to true, the user can drag this shape over the map. The geodesic property defines the mode of dragging.

Type:  boolean optional

Default: false

If set to true, the user can edit this shape by dragging the control points shown at the vertices and on each segment.

Type:  boolean optional

Default: false

When true, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When false, edges of the polygon are rendered as straight lines in screen space. Note that the shape of a geodesic polygon may appear to change when dragged, as the dimensions are maintained relative to the surface of the earth.

The icons to be rendered along the polyline.

Map on which to display Polyline.

The ordered sequence of coordinates of the Polyline. This path may be specified using either a simple array of LatLngs, or an MVCArray of LatLngs. Note that if you pass a simple array, it will be converted to an MVCArray Inserting or removing LatLngs in the MVCArray will automatically update the polyline on the map.

Type:  string optional

The stroke color. All CSS3 colors are supported except for extended named colors.

Type:  number optional

The stroke opacity between 0.0 and 1.0.

Type:  number optional

The stroke width in pixels.

Type:  boolean optional

Default: true

Whether this polyline is visible on the map.

Type:  number optional

The zIndex compared to other polys.

google.maps.IconSequence interface

Describes how icons are to be rendered on a line.

If your polyline is geodesic, then the distances specified for both offset and repeat are calculated in meters by default. Setting either offset or repeat to a pixel value will cause the distances to be calculated in pixels on the screen.

Type:  boolean optional

Default: false

If true, each icon in the sequence has the same fixed rotation regardless of the angle of the edge on which it lies. If false, case each icon in the sequence is rotated to align with its edge.

The icon to render on the line.

Type:  string optional

Default: '100%'

The distance from the start of the line at which an icon is to be rendered. This distance may be expressed as a percentage of line's length (e.g. '50%') or in pixels (e.g. '50px').

Type:  string optional

Default: 0

The distance between consecutive icons on the line. This distance may be expressed as a percentage of the line's length (e.g. '50%') or in pixels (e.g. '50px'). To disable repeating of the icon, specify '0'.

google.maps.Polygon class

A polygon (like a polyline) defines a series of connected coordinates in an ordered sequence. Additionally, polygons form a closed loop and define a filled region. See the samples in the developer's guide, starting with a simple polygon, a polygon with a hole, and more. Note that you can also use the Data layer to create a polygon. The Data layer offers a simpler way of creating holes because it handles the order of the inner and outer paths for you.

This class extends MVCObject.

Access by calling const {Polygon} = await google.maps.importLibrary("maps").
See Libraries in the Maps JavaScript API.

Polygon([opts])

• opts:  PolygonOptions optional

Create a polygon using the passed

, which specify the polygon's path, the stroke style for the polygon's edges, and the fill style for the polygon's interior regions. A polygon may contain one or more paths, where each path consists of an array of

s. You may pass either an array of LatLngs or an

of

s when constructing these paths. Arrays are converted to

s within the polygon upon instantiation.

getDraggable()

Parameters:  None

Return Value:  boolean

Returns whether this shape can be dragged by the user.

getEditable()

Parameters:  None

Return Value:  boolean

Returns whether this shape can be edited by the user.

getMap()

Parameters:  None

Returns the map on which this shape is attached.

getPath()

Parameters:  None

Retrieves the first path.

getPaths()

Parameters:  None

Retrieves the paths for this polygon.

getVisible()

Parameters:  None

Return Value:  boolean

Returns whether this poly is visible on the map.

setDraggable(draggable)

• draggable:  boolean

Return Value:  None

If set to true, the user can drag this shape over the map. The geodesic property defines the mode of dragging.

setEditable(editable)

• editable:  boolean

Return Value:  None

If set to true, the user can edit this shape by dragging the control points shown at the vertices and on each segment.

setMap(map)

• map:  Map optional

Return Value:  None

Renders this shape on the specified map. If map is set to null, the shape will be removed.

setOptions(options)

• options:  PolygonOptions optional

Return Value:  None

setPath(path)

• path:  MVCArray<LatLng>|Array<LatLng|LatLngLiteral>

Return Value:  None

Sets the first path. See

for more details.

setPaths(paths)

• paths:  MVCArray<MVCArray<LatLng>>|MVCArray<LatLng>|Array<Array<LatLng|LatLngLiteral>>|Array<LatLng|LatLngLiteral>

Return Value:  None

Sets the path for this polygon.

setVisible(visible)

• visible:  boolean

Return Value:  None

Hides this poly if set to false.

function(event)

• event:  PolyMouseEvent

This event is fired when the DOM click event is fired on the Polygon.

function(event)

• event:  PolyMouseEvent

This event is fired when the DOM dblclick event is fired on the Polygon.

function(event)

• event:  MapMouseEvent

This event is repeatedly fired while the user drags the polygon.

function(event)

• event:  MapMouseEvent

This event is fired when the user stops dragging the polygon.

function(event)

• event:  MapMouseEvent

This event is fired when the user starts dragging the polygon.

function(event)

• event:  PolyMouseEvent

This event is fired when the DOM mousedown event is fired on the Polygon.

function(event)

• event:  PolyMouseEvent

This event is fired when the DOM mousemove event is fired on the Polygon.

function(event)

• event:  PolyMouseEvent

This event is fired on Polygon mouseout.

function(event)

• event:  PolyMouseEvent

This event is fired on Polygon mouseover.

function(event)

• event:  PolyMouseEvent

This event is fired when the DOM mouseup event is fired on the Polygon.

Deprecated: Use the Polygon.contextmenu event instead in order to support usage patterns like control-click on macOS.

function(event)

• event:  PolyMouseEvent

This event is fired when the Polygon is right-clicked on.

google.maps.PolygonOptions interface

PolygonOptions object used to define the properties that can be set on a Polygon.

Type:  boolean optional

Default: true

Indicates whether this Polygon handles mouse events.

Type:  boolean optional

Default: false

If set to true, the user can drag this shape over the map. The geodesic property defines the mode of dragging.

Type:  boolean optional

Default: false

If set to true, the user can edit this shape by dragging the control points shown at the vertices and on each segment.

Type:  string optional

The fill color. All CSS3 colors are supported except for extended named colors.

Type:  number optional

The fill opacity between 0.0 and 1.0

Type:  boolean optional

Default: false

When true, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When false, edges of the polygon are rendered as straight lines in screen space. Note that the shape of a geodesic polygon may appear to change when dragged, as the dimensions are maintained relative to the surface of the earth.

Map on which to display Polygon.

The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths. As a result, the paths property may specify one or more arrays of

coordinates. Paths are closed automatically; do not repeat the first vertex of the path as the last vertex. Simple polygons may be defined using a single array of

s. More complex polygons may specify an array of arrays. Any simple arrays are converted into

s. Inserting or removing

s from the

will automatically update the polygon on the map.

Type:  string optional

The stroke color. All CSS3 colors are supported except for extended named colors.

Type:  number optional

The stroke opacity between 0.0 and 1.0

The stroke position.

Type:  number optional

The stroke width in pixels.

Type:  boolean optional

Default: true

Whether this polygon is visible on the map.

Type:  number optional

The zIndex compared to other polys.

google.maps.PolyMouseEvent interface

This object is returned from mouse events on polylines and polygons.

This interface extends MapMouseEvent.

Type:  number optional

The index of the edge within the path beneath the cursor when the event occurred, if the event occurred on a mid-point on an editable polygon.

Type:  number optional

The index of the path beneath the cursor when the event occurred, if the event occurred on a vertex and the polygon is editable. Otherwise undefined.

Type:  number optional

The index of the vertex beneath the cursor when the event occurred, if the event occurred on a vertex and the polyline or polygon is editable. If the event does not occur on a vertex, the value is undefined.

google.maps.Rectangle class

A rectangle overlay.

This class extends MVCObject.

Access by calling const {Rectangle} = await google.maps.importLibrary("maps").
See Libraries in the Maps JavaScript API.

getBounds()

Parameters:  None

Returns the bounds of this rectangle.

getDraggable()

Parameters:  None

Return Value:  boolean

Returns whether this rectangle can be dragged by the user.

getEditable()

Parameters:  None

Return Value:  boolean

Returns whether this rectangle can be edited by the user.

getMap()

Parameters:  None

Returns the map on which this rectangle is displayed.

getVisible()

Parameters:  None

Return Value:  boolean

Returns whether this rectangle is visible on the map.

setBounds(bounds)

• bounds:  LatLngBounds|LatLngBoundsLiteral optional

Return Value:  None

Sets the bounds of this rectangle.

setDraggable(draggable)

• draggable:  boolean

Return Value:  None

If set to true, the user can drag this rectangle over the map.

setEditable(editable)

• editable:  boolean

Return Value:  None

If set to true, the user can edit this rectangle by dragging the control points shown at the corners and on each edge.

setMap(map)

• map:  Map optional

Return Value:  None

Renders the rectangle on the specified map. If map is set to null, the rectangle will be removed.

setOptions(options)

• options:  RectangleOptions optional

Return Value:  None

setVisible(visible)

• visible:  boolean

Return Value:  None

Hides this rectangle if set to false.

function()

Arguments:  None

This event is fired when the rectangle's bounds are changed.

function(event)

• event:  MapMouseEvent

This event is fired when the DOM click event is fired on the rectangle.

function(event)

• event:  MapMouseEvent

This event is fired when the DOM dblclick event is fired on the rectangle.

function(event)

• event:  MapMouseEvent

This event is repeatedly fired while the user drags the rectangle.

function(event)

• event:  MapMouseEvent

This event is fired when the user stops dragging the rectangle.

function(event)

• event:  MapMouseEvent

This event is fired when the user starts dragging the rectangle.

function(event)

• event:  MapMouseEvent

This event is fired when the DOM mousedown event is fired on the rectangle.

function(event)

• event:  MapMouseEvent

This event is fired when the DOM mousemove event is fired on the rectangle.

function(event)

• event:  MapMouseEvent

This event is fired on rectangle mouseout.

function(event)

• event:  MapMouseEvent

This event is fired on rectangle mouseover.

function(event)

• event:  MapMouseEvent

This event is fired when the DOM mouseup event is fired on the rectangle.

Deprecated: Use the Rectangle.contextmenu event instead in order to support usage patterns like control-click on macOS.

function(event)

• event:  MapMouseEvent

This event is fired when the rectangle is right-clicked on.

google.maps.RectangleOptions interface

RectangleOptions object used to define the properties that can be set on a Rectangle.

The bounds.

Type:  boolean optional

Default: true

Indicates whether this Rectangle handles mouse events.

Type:  boolean optional

Default: false

If set to true, the user can drag this rectangle over the map.

Type:  boolean optional

Default: false

If set to true, the user can edit this rectangle by dragging the control points shown at the corners and on each edge.

Type:  string optional

The fill color. All CSS3 colors are supported except for extended named colors.

Type:  number optional

The fill opacity between 0.0 and 1.0

Map on which to display Rectangle.

Type:  string optional

The stroke color. All CSS3 colors are supported except for extended named colors.

Type:  number optional

The stroke opacity between 0.0 and 1.0

The stroke position.

Type:  number optional

The stroke width in pixels.

Type:  boolean optional

Default: true

Whether this rectangle is visible on the map.

Type:  number optional

The zIndex compared to other polys.

google.maps.Circle class

A circle on the Earth's surface; also known as a "spherical cap".

This class extends MVCObject.

Access by calling const {Circle} = await google.maps.importLibrary("maps").
See Libraries in the Maps JavaScript API.

getBounds()

Parameters:  None

Gets the LatLngBounds of this Circle.

getCenter()

Parameters:  None

Returns the center of this circle.

getDraggable()

Parameters:  None

Return Value:  boolean

Returns whether this circle can be dragged by the user.

getEditable()

Parameters:  None

Return Value:  boolean

Returns whether this circle can be edited by the user.

getMap()

Parameters:  None

Returns the map on which this circle is displayed.

getRadius()

Parameters:  None

Return Value:  number

Returns the radius of this circle (in meters).

getVisible()

Parameters:  None

Return Value:  boolean

Returns whether this circle is visible on the map.

setCenter(center)

• center:  LatLng|LatLngLiteral optional

Return Value:  None

Sets the center of this circle.

setDraggable(draggable)

• draggable:  boolean

Return Value:  None

If set to true, the user can drag this circle over the map.

setEditable(editable)

• editable:  boolean

Return Value:  None

If set to true, the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle.

setMap(map)

• map:  Map optional

Return Value:  None

Renders the circle on the specified map. If map is set to null, the circle will be removed.

setOptions(options)

• options:  CircleOptions optional

Return Value:  None

setRadius(radius)

• radius:  number

Return Value:  None

Sets the radius of this circle (in meters).

setVisible(visible)

• visible:  boolean

Return Value:  None

Hides this circle if set to false.

function()

Arguments:  None

This event is fired when the circle's center is changed.

function(event)

• event:  MapMouseEvent

This event is fired when the DOM click event is fired on the circle.

function(event)

• event:  MapMouseEvent

This event is fired when the DOM dblclick event is fired on the circle.

function(event)

• event:  MapMouseEvent

This event is repeatedly fired while the user drags the circle.

function(event)

• event:  MapMouseEvent

This event is fired when the user stops dragging the circle.

function(event)

• event:  MapMouseEvent

This event is fired when the user starts dragging the circle.

function(event)

• event:  MapMouseEvent

This event is fired when the DOM mousedown event is fired on the circle.

function(event)

• event:  MapMouseEvent

This event is fired when the DOM mousemove event is fired on the circle.

function(event)

• event:  MapMouseEvent

This event is fired on circle mouseout.

function(event)

• event:  MapMouseEvent

This event is fired on circle mouseover.

function(event)

• event:  MapMouseEvent

This event is fired when the DOM mouseup event is fired on the circle.

function()

Arguments:  None

This event is fired when the circle's radius is changed.

function(event)

• event:  MapMouseEvent

This event is fired when the circle is right-clicked on.

google.maps.CircleOptions interface

CircleOptions object used to define the properties that can be set on a Circle.

The center of the Circle.

Type:  boolean optional

Default: true

Indicates whether this Circle handles mouse events.

Type:  boolean optional

Default: false

If set to true, the user can drag this circle over the map.

Type:  boolean optional

Default: false

If set to true, the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle.

Type:  string optional

The fill color. All CSS3 colors are supported except for extended named colors.

Type:  number optional

The fill opacity between 0.0 and 1.0.

Map on which to display the Circle.

Type:  number optional

The radius in meters on the Earth's surface.

Type:  string optional

The stroke color. All CSS3 colors are supported except for extended named colors.

Type:  number optional

The stroke opacity between 0.0 and 1.0.

The stroke position.

Type:  number optional

The stroke width in pixels.

Type:  boolean optional

Default: true

Whether this circle is visible on the map.

Type:  number optional

The zIndex compared to other polys.

google.maps.StrokePosition constants

The possible positions of the stroke on a polygon.

Access by calling const {StrokePosition} = await google.maps.importLibrary("maps").
See Libraries in the Maps JavaScript API.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-07-09 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-09 UTC."],[],[]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4