Polygons

Polyline class

google.maps.Polyline class

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

This class extends MVCObject.

Access by callingconst {Polyline} = await google.maps.importLibrary( "maps" ).SeeLibraries in the Maps JavaScript API.

Polyline
Polyline([opts])
Parameters:
Create a polyline using the passedPolylineOptions,which specify both the path of the polyline and the stroke style to use when drawing the polyline. You may pass either an array ofLatLngs or anMVCArrayofLatLngs when constructing a polyline, though simple arrays are converted toMVCArrays within the polyline upon instantiation.
getDraggable
getDraggable()
Parameters:None
Return Value:boolean
Returns whether this shape can be dragged by the user.
getEditable
getEditable()
Parameters:None
Return Value:boolean
Returns whether this shape can be edited by the user.
getMap
getMap()
Parameters:None
Return Value:Map|null
Returns the map on which this shape is attached.
getPath
getPath()
Parameters:None
Return Value:MVCArray<LatLng>
Retrieves the path.
getVisible
getVisible()
Parameters:None
Return Value:boolean
Returns whether this poly is visible on the map.
setDraggable
setDraggable(draggable)
Parameters:
  • draggable:boolean
Return Value:None
If set totrue,the user can drag this shape over the map. Thegeodesicproperty defines the mode of dragging.
setEditable
setEditable(editable)
Parameters:
  • editable:boolean
Return Value:None
If set totrue,the user can edit this shape by dragging the control points shown at the vertices and on each segment.
setMap
setMap(map)
Parameters:
  • map:Mapoptional
Return Value:None
Renders this shape on the specified map. If map is set tonull,the shape will be removed.
setOptions
setOptions(options)
Parameters:
Return Value:None
setPath
setPath(path)
Return Value:None
Sets the path. SeePolylineOptionsfor more details.
setVisible
setVisible(visible)
Parameters:
  • visible:boolean
Return Value:None
Hides this poly if set tofalse.
Inherited: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
click
function(event)
Arguments:
This event is fired when the DOM click event is fired on the Polyline.
contextmenu
function(event)
Arguments:
This event is fired when the DOM contextmenu event is fired on Poyline.
dblclick
function(event)
Arguments:
This event is fired when the DOM dblclick event is fired on the Polyline.
drag
function(event)
Arguments:
This event is repeatedly fired while the user drags the polyline.
dragend
function(event)
Arguments:
This event is fired when the user stops dragging the polyline.
dragstart
function(event)
Arguments:
This event is fired when the user starts dragging the polyline.
mousedown
function(event)
Arguments:
This event is fired when the DOM mousedown event is fired on the Polyline.
mousemove
function(event)
Arguments:
This event is fired when the DOM mousemove event is fired on the Polyline.
mouseout
function(event)
Arguments:
This event is fired on Polyline mouseout.
mouseover
function(event)
Arguments:
This event is fired on Polyline mouseover.
mouseup
function(event)
Arguments:
This event is fired when the DOM mouseup event is fired on the Polyline.
rightclick
function(event)
Arguments:
This event is fired when the Polyline is right-clicked on.

PolylineOptions interface

google.maps.PolylineOptions interface

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

clickableoptional
Type:booleanoptional
Default:true
Indicates whether thisPolylinehandles mouse events.
draggableoptional
Type:booleanoptional
Default:false
If set totrue,the user can drag this shape over the map. Thegeodesicproperty defines the mode of dragging.
editableoptional
Type:booleanoptional
Default:false
If set totrue,the user can edit this shape by dragging the control points shown at the vertices and on each segment.
geodesicoptional
Type:booleanoptional
Default:false
Whentrue,edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. Whenfalse,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.
iconsoptional
Type:Array<IconSequence>optional
The icons to be rendered along the polyline.
mapoptional
Type:Mapoptional
Map on which to display Polyline.
pathoptional
The ordered sequence of coordinates of the Polyline. This path may be specified using either a simple array ofLatLngs, or anMVCArrayofLatLngs. Note that if you pass a simple array, it will be converted to anMVCArrayInserting or removing LatLngs in theMVCArraywill automatically update the polyline on the map.
strokeColoroptional
Type:stringoptional
The stroke color. All CSS3 colors are supported except for extended named colors.
strokeOpacityoptional
Type:numberoptional
The stroke opacity between 0.0 and 1.0.
strokeWeightoptional
Type:numberoptional
The stroke width in pixels.
visibleoptional
Type:booleanoptional
Default:true
Whether this polyline is visible on the map.
zIndexoptional
Type:numberoptional
The zIndex compared to other polys.

IconSequence interface

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.

fixedRotationoptional
Type:booleanoptional
Default:false
Iftrue,each icon in the sequence has the same fixed rotation regardless of the angle of the edge on which it lies. Iffalse,case each icon in the sequence is rotated to align with its edge.
iconoptional
Type:Symboloptional
The icon to render on the line.
offsetoptional
Type:stringoptional
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').
repeatoptional
Type:stringoptional
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'.

Polygon class

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 asimple polygon,apolygon with a hole,and more. Note that you can also use theData layerto 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 callingconst {Polygon} = await google.maps.importLibrary( "maps" ).SeeLibraries in the Maps JavaScript API.

Polygon
Polygon([opts])
Parameters:
Create a polygon using the passedPolygonOptions,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 ofLatLngs. You may pass either an array of LatLngs or anMVCArrayofLatLngs when constructing these paths. Arrays are converted toMVCArrays within the polygon upon instantiation.
getDraggable
getDraggable()
Parameters:None
Return Value:boolean
Returns whether this shape can be dragged by the user.
getEditable
getEditable()
Parameters:None
Return Value:boolean
Returns whether this shape can be edited by the user.
getMap
getMap()
Parameters:None
Return Value:Map|null
Returns the map on which this shape is attached.
getPath
getPath()
Parameters:None
Return Value:MVCArray<LatLng>
Retrieves the first path.
getPaths
getPaths()
Parameters:None
Return Value:MVCArray<MVCArray<LatLng>>
Retrieves the paths for this polygon.
getVisible
getVisible()
Parameters:None
Return Value:boolean
Returns whether this poly is visible on the map.
setDraggable
setDraggable(draggable)
Parameters:
  • draggable:boolean
Return Value:None
If set totrue,the user can drag this shape over the map. Thegeodesicproperty defines the mode of dragging.
setEditable
setEditable(editable)
Parameters:
  • editable:boolean
Return Value:None
If set totrue,the user can edit this shape by dragging the control points shown at the vertices and on each segment.
setMap
setMap(map)
Parameters:
  • map:Mapoptional
Return Value:None
Renders this shape on the specified map. If map is set tonull,the shape will be removed.
setOptions
setOptions(options)
Parameters:
Return Value:None
setPath
setPath(path)
Return Value:None
Sets the first path. SeePolygonOptionsfor more details.
setPaths
setPaths(paths)
Return Value:None
Sets the path for this polygon.
setVisible
setVisible(visible)
Parameters:
  • visible:boolean
Return Value:None
Hides this poly if set tofalse.
Inherited: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
click
function(event)
Arguments:
This event is fired when the DOM click event is fired on the Polygon.
contextmenu
function(event)
Arguments:
This event is fired when the DOM contextmenu event is fired on the Polygon.
dblclick
function(event)
Arguments:
This event is fired when the DOM dblclick event is fired on the Polygon.
drag
function(event)
Arguments:
This event is repeatedly fired while the user drags the polygon.
dragend
function(event)
Arguments:
This event is fired when the user stops dragging the polygon.
dragstart
function(event)
Arguments:
This event is fired when the user starts dragging the polygon.
mousedown
function(event)
Arguments:
This event is fired when the DOM mousedown event is fired on the Polygon.
mousemove
function(event)
Arguments:
This event is fired when the DOM mousemove event is fired on the Polygon.
mouseout
function(event)
Arguments:
This event is fired on Polygon mouseout.
mouseover
function(event)
Arguments:
This event is fired on Polygon mouseover.
mouseup
function(event)
Arguments:
This event is fired when the DOM mouseup event is fired on the Polygon.
rightclick
function(event)
Arguments:
This event is fired when the Polygon is right-clicked on.

PolygonOptions interface

google.maps.PolygonOptions interface

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

clickableoptional
Type:booleanoptional
Default:true
Indicates whether thisPolygonhandles mouse events.
draggableoptional
Type:booleanoptional
Default:false
If set totrue,the user can drag this shape over the map. Thegeodesicproperty defines the mode of dragging.
editableoptional
Type:booleanoptional
Default:false
If set totrue,the user can edit this shape by dragging the control points shown at the vertices and on each segment.
fillColoroptional
Type:stringoptional
The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacityoptional
Type:numberoptional
The fill opacity between 0.0 and 1.0
geodesicoptional
Type:booleanoptional
Default:false
Whentrue,edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. Whenfalse,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.
mapoptional
Type:Mapoptional
Map on which to display Polygon.
pathsoptional
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 ofLatLngcoordinates. 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 ofLatLngs. More complex polygons may specify an array of arrays. Any simple arrays are converted intoMVCArrays. Inserting or removingLatLngs from theMVCArraywill automatically update the polygon on the map.
strokeColoroptional
Type:stringoptional
The stroke color. All CSS3 colors are supported except for extended named colors.
strokeOpacityoptional
Type:numberoptional
The stroke opacity between 0.0 and 1.0
strokePositionoptional
Type:StrokePositionoptional
The stroke position.
strokeWeightoptional
Type:numberoptional
The stroke width in pixels.
visibleoptional
Type:booleanoptional
Default:true
Whether this polygon is visible on the map.
zIndexoptional
Type:numberoptional
The zIndex compared to other polys.

PolyMouseEvent interface

google.maps.PolyMouseEvent interface

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

This interface extends MapMouseEvent.

edgeoptional
Type:numberoptional
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.
pathoptional
Type:numberoptional
The index of the path beneath the cursor when the event occurred, if the event occurred on a vertex and the polygon is editable. Otherwiseundefined.
vertexoptional
Type:numberoptional
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 isundefined.
Inherited: domEvent, latLng
Inherited: stop

Rectangle class

google.maps.Rectangle class

A rectangle overlay.

This class extends MVCObject.

Access by callingconst {Rectangle} = await google.maps.importLibrary( "maps" ).SeeLibraries in the Maps JavaScript API.

Rectangle
Rectangle([opts])
Parameters:
Create a rectangle using the passedRectangleOptions,which specify the bounds and style.
getBounds
getBounds()
Parameters:None
Return Value:LatLngBounds|null
Returns the bounds of this rectangle.
getDraggable
getDraggable()
Parameters:None
Return Value:boolean
Returns whether this rectangle can be dragged by the user.
getEditable
getEditable()
Parameters:None
Return Value:boolean
Returns whether this rectangle can be edited by the user.
getMap
getMap()
Parameters:None
Return Value:Map|null
Returns the map on which this rectangle is displayed.
getVisible
getVisible()
Parameters:None
Return Value:boolean
Returns whether this rectangle is visible on the map.
setBounds
setBounds(bounds)
Parameters:
Return Value:None
Sets the bounds of this rectangle.
setDraggable
setDraggable(draggable)
Parameters:
  • draggable:boolean
Return Value:None
If set totrue,the user can drag this rectangle over the map.
setEditable
setEditable(editable)
Parameters:
  • editable:boolean
Return Value:None
If set totrue,the user can edit this rectangle by dragging the control points shown at the corners and on each edge.
setMap
setMap(map)
Parameters:
  • map:Mapoptional
Return Value:None
Renders the rectangle on the specified map. If map is set tonull,the rectangle will be removed.
setOptions
setOptions(options)
Parameters:
Return Value:None
setVisible
setVisible(visible)
Parameters:
  • visible:boolean
Return Value:None
Hides this rectangle if set tofalse.
Inherited: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
bounds_changed
function()
Arguments:None
This event is fired when the rectangle's bounds are changed.
click
function(event)
Arguments:
This event is fired when the DOM click event is fired on the rectangle.
contextmenu
function(event)
Arguments:
This event is fired when the DOM contextmenu event is fired on the rectangle.
dblclick
function(event)
Arguments:
This event is fired when the DOM dblclick event is fired on the rectangle.
drag
function(event)
Arguments:
This event is repeatedly fired while the user drags the rectangle.
dragend
function(event)
Arguments:
This event is fired when the user stops dragging the rectangle.
dragstart
function(event)
Arguments:
This event is fired when the user starts dragging the rectangle.
mousedown
function(event)
Arguments:
This event is fired when the DOM mousedown event is fired on the rectangle.
mousemove
function(event)
Arguments:
This event is fired when the DOM mousemove event is fired on the rectangle.
mouseout
function(event)
Arguments:
This event is fired on rectangle mouseout.
mouseover
function(event)
Arguments:
This event is fired on rectangle mouseover.
mouseup
function(event)
Arguments:
This event is fired when the DOM mouseup event is fired on the rectangle.
rightclick
function(event)
Arguments:
This event is fired when the rectangle is right-clicked on.

RectangleOptions interface

google.maps.RectangleOptions interface

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

boundsoptional
The bounds.
clickableoptional
Type:booleanoptional
Default:true
Indicates whether thisRectanglehandles mouse events.
draggableoptional
Type:booleanoptional
Default:false
If set totrue,the user can drag this rectangle over the map.
editableoptional
Type:booleanoptional
Default:false
If set totrue,the user can edit this rectangle by dragging the control points shown at the corners and on each edge.
fillColoroptional
Type:stringoptional
The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacityoptional
Type:numberoptional
The fill opacity between 0.0 and 1.0
mapoptional
Type:Mapoptional
Map on which to display Rectangle.
strokeColoroptional
Type:stringoptional
The stroke color. All CSS3 colors are supported except for extended named colors.
strokeOpacityoptional
Type:numberoptional
The stroke opacity between 0.0 and 1.0
strokePositionoptional
Type:StrokePositionoptional
The stroke position.
strokeWeightoptional
Type:numberoptional
The stroke width in pixels.
visibleoptional
Type:booleanoptional
Default:true
Whether this rectangle is visible on the map.
zIndexoptional
Type:numberoptional
The zIndex compared to other polys.

Circle class

google.maps.Circle class

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

This class extends MVCObject.

Access by callingconst {Circle} = await google.maps.importLibrary( "maps" ).SeeLibraries in the Maps JavaScript API.

Circle
Circle([circleOrCircleOptions])
Parameters:
Create a circle using the passedCircleOptions,which specify the center, radius, and style.
getBounds
getBounds()
Parameters:None
Return Value:LatLngBounds|null
Gets theLatLngBoundsof this Circle.
getCenter
getCenter()
Parameters:None
Return Value:LatLng|null
Returns the center of this circle.
getDraggable
getDraggable()
Parameters:None
Return Value:boolean
Returns whether this circle can be dragged by the user.
getEditable
getEditable()
Parameters:None
Return Value:boolean
Returns whether this circle can be edited by the user.
getMap
getMap()
Parameters:None
Return Value:Map|null
Returns the map on which this circle is displayed.
getRadius
getRadius()
Parameters:None
Return Value:number
Returns the radius of this circle (in meters).
getVisible
getVisible()
Parameters:None
Return Value:boolean
Returns whether this circle is visible on the map.
setCenter
setCenter(center)
Parameters:
Return Value:None
Sets the center of this circle.
setDraggable
setDraggable(draggable)
Parameters:
  • draggable:boolean
Return Value:None
If set totrue,the user can drag this circle over the map.
setEditable
setEditable(editable)
Parameters:
  • editable:boolean
Return Value:None
If set totrue,the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle.
setMap
setMap(map)
Parameters:
  • map:Mapoptional
Return Value:None
Renders the circle on the specified map. If map is set tonull,the circle will be removed.
setOptions
setOptions(options)
Parameters:
Return Value:None
setRadius
setRadius(radius)
Parameters:
  • radius:number
Return Value:None
Sets the radius of this circle (in meters).
setVisible
setVisible(visible)
Parameters:
  • visible:boolean
Return Value:None
Hides this circle if set tofalse.
Inherited: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
center_changed
function()
Arguments:None
This event is fired when the circle's center is changed.
click
function(event)
Arguments:
This event is fired when the DOM click event is fired on the circle.
dblclick
function(event)
Arguments:
This event is fired when the DOM dblclick event is fired on the circle.
drag
function(event)
Arguments:
This event is repeatedly fired while the user drags the circle.
dragend
function(event)
Arguments:
This event is fired when the user stops dragging the circle.
dragstart
function(event)
Arguments:
This event is fired when the user starts dragging the circle.
mousedown
function(event)
Arguments:
This event is fired when the DOM mousedown event is fired on the circle.
mousemove
function(event)
Arguments:
This event is fired when the DOM mousemove event is fired on the circle.
mouseout
function(event)
Arguments:
This event is fired on circle mouseout.
mouseover
function(event)
Arguments:
This event is fired on circle mouseover.
mouseup
function(event)
Arguments:
This event is fired when the DOM mouseup event is fired on the circle.
radius_changed
function()
Arguments:None
This event is fired when the circle's radius is changed.
rightclick
function(event)
Arguments:
This event is fired when the circle is right-clicked on.

CircleOptions interface

google.maps.CircleOptions interface

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

centeroptional
Type:LatLng|LatLngLiteraloptional
The center of the Circle.
clickableoptional
Type:booleanoptional
Default:true
Indicates whether thisCirclehandles mouse events.
draggableoptional
Type:booleanoptional
Default:false
If set totrue,the user can drag this circle over the map.
editableoptional
Type:booleanoptional
Default:false
If set totrue,the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle.
fillColoroptional
Type:stringoptional
The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacityoptional
Type:numberoptional
The fill opacity between 0.0 and 1.0.
mapoptional
Type:Mapoptional
Map on which to display the Circle.
radiusoptional
Type:numberoptional
The radius in meters on the Earth's surface.
strokeColoroptional
Type:stringoptional
The stroke color. All CSS3 colors are supported except for extended named colors.
strokeOpacityoptional
Type:numberoptional
The stroke opacity between 0.0 and 1.0.
strokePositionoptional
Type:StrokePositionoptional
The stroke position.
strokeWeightoptional
Type:numberoptional
The stroke width in pixels.
visibleoptional
Type:booleanoptional
Default:true
Whether this circle is visible on the map.
zIndexoptional
Type:numberoptional
The zIndex compared to other polys.

StrokePosition constants

google.maps.StrokePosition constants

The possible positions of the stroke on a polygon.

Access by callingconst {StrokePosition} = await google.maps.importLibrary( "maps" ).SeeLibraries in the Maps JavaScript API.

CENTER The stroke is centered on the polygon's path, with half the stroke inside the polygon and half the stroke outside the polygon.
INSIDE The stroke lies inside the polygon.
OUTSIDE The stroke lies outside the polygon.