Polygons  |  Maps JavaScript API  |  Google for Developers (original) (raw)

Skip to main content

Polygons

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

Polylineclass

google.maps.Polylineclass

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

This class extends[MVCObject](/maps/documentation/javascript/reference/event#MVCObject).

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

Constructor
Polyline Polyline([opts]) Parameters: opts: PolylineOptions optional Create a polyline using the passed PolylineOptions, 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 LatLngs or an MVCArray of LatLngs when constructing a polyline, though simple arrays are converted to MVCArrays within the polyline upon instantiation.
Methods
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 to true, the user can drag this shape over the map. The geodesic property defines the mode of dragging.
setEditable setEditable(editable) Parameters: 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 setMap(map) Parameters: 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 setOptions(options) Parameters: options: PolylineOptions optional Return Value: None
setPath setPath(path) Parameters: path: MVCArray<LatLng>|Array<LatLng
setVisible setVisible(visible) Parameters: visible: boolean Return Value: None Hides this poly if set to false.
Inherited: addListener,bindTo,get,notify,set,setValues,unbind,unbindAll
Events
click function(event) Arguments: event: PolyMouseEvent This event is fired when the DOM click event is fired on the Polyline.
contextmenu function(event) Arguments: event: PolyMouseEvent This event is fired when the DOM contextmenu event is fired on Poyline.
dblclick function(event) Arguments: event: PolyMouseEvent This event is fired when the DOM dblclick event is fired on the Polyline.
drag function(event) Arguments: event: MapMouseEvent This event is repeatedly fired while the user drags the polyline.
dragend function(event) Arguments: event: MapMouseEvent This event is fired when the user stops dragging the polyline.
dragstart function(event) Arguments: event: MapMouseEvent This event is fired when the user starts dragging the polyline.
mousedown function(event) Arguments: event: PolyMouseEvent This event is fired when the DOM mousedown event is fired on the Polyline.
mousemove function(event) Arguments: event: PolyMouseEvent This event is fired when the DOM mousemove event is fired on the Polyline.
mouseout function(event) Arguments: event: PolyMouseEvent This event is fired on Polyline mouseout.
mouseover function(event) Arguments: event: PolyMouseEvent This event is fired on Polyline mouseover.
mouseup function(event) Arguments: event: PolyMouseEvent This event is fired when the DOM mouseup event is fired on the Polyline.
rightclick function(event) Arguments: event: PolyMouseEvent This event is fired when the Polyline is right-clicked on.

PolylineOptionsinterface

google.maps.PolylineOptionsinterface

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

Properties
clickable optional Type: boolean optional Default: true Indicates whether this Polyline handles mouse events.
draggable optional 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.
editable optional 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.
geodesic optional 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.
icons optional Type: Array<IconSequence> optional The icons to be rendered along the polyline.
map optional Type: Map optional Map on which to display Polyline.
path optional Type: MVCArray<LatLng>|Array<LatLng
strokeColor optional Type: string optional The stroke color. All CSS3 colors are supported except for extended named colors.
strokeOpacity optional Type: number optional The stroke opacity between 0.0 and 1.0.
strokeWeight optional Type: number optional The stroke width in pixels.
visible optional Type: boolean optional Default: true Whether this polyline is visible on the map.
zIndex optional Type: number optional The zIndex compared to other polys.

IconSequenceinterface

google.maps.IconSequenceinterface

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.

Properties
fixedRotation optional 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.
icon optional Type: Symbol optional The icon to render on the line.
offset optional 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').
repeat optional 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'.

Polygonclass

google.maps.Polygonclass

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](/maps/documentation/javascript/reference/event#MVCObject).

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

Constructor
Polygon Polygon([opts]) Parameters: opts: PolygonOptions optional Create a polygon using the passed PolygonOptions, 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 LatLngs. You may pass either an array of LatLngs or an MVCArray of LatLngs when constructing these paths. Arrays are converted to MVCArrays within the polygon upon instantiation.
Methods
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 to true, the user can drag this shape over the map. The geodesic property defines the mode of dragging.
setEditable setEditable(editable) Parameters: 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 setMap(map) Parameters: 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 setOptions(options) Parameters: options: PolygonOptions optional Return Value: None
setPath setPath(path) Parameters: path: MVCArray<LatLng>|Array<LatLng
setPaths setPaths(paths) Parameters: paths: MVCArray<MVCArray<LatLng>>|MVCArray<LatLng>
setVisible setVisible(visible) Parameters: visible: boolean Return Value: None Hides this poly if set to false.
Inherited: addListener,bindTo,get,notify,set,setValues,unbind,unbindAll
Events
click function(event) Arguments: event: PolyMouseEvent This event is fired when the DOM click event is fired on the Polygon.
contextmenu function(event) Arguments: event: PolyMouseEvent This event is fired when the DOM contextmenu event is fired on the Polygon.
dblclick function(event) Arguments: event: PolyMouseEvent This event is fired when the DOM dblclick event is fired on the Polygon.
drag function(event) Arguments: event: MapMouseEvent This event is repeatedly fired while the user drags the polygon.
dragend function(event) Arguments: event: MapMouseEvent This event is fired when the user stops dragging the polygon.
dragstart function(event) Arguments: event: MapMouseEvent This event is fired when the user starts dragging the polygon.
mousedown function(event) Arguments: event: PolyMouseEvent This event is fired when the DOM mousedown event is fired on the Polygon.
mousemove function(event) Arguments: event: PolyMouseEvent This event is fired when the DOM mousemove event is fired on the Polygon.
mouseout function(event) Arguments: event: PolyMouseEvent This event is fired on Polygon mouseout.
mouseover function(event) Arguments: event: PolyMouseEvent This event is fired on Polygon mouseover.
mouseup function(event) Arguments: event: PolyMouseEvent This event is fired when the DOM mouseup event is fired on the Polygon.
rightclick function(event) Arguments: event: PolyMouseEvent This event is fired when the Polygon is right-clicked on.

PolygonOptionsinterface

google.maps.PolygonOptionsinterface

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

Properties
clickable optional Type: boolean optional Default: true Indicates whether this Polygon handles mouse events.
draggable optional 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.
editable optional 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.
fillColor optional Type: string optional The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacity optional Type: number optional The fill opacity between 0.0 and 1.0
geodesic optional 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 optional Type: Map optional Map on which to display Polygon.
paths optional Type: MVCArray<MVCArray<LatLng>>|MVCArray<LatLng>
strokeColor optional Type: string optional The stroke color. All CSS3 colors are supported except for extended named colors.
strokeOpacity optional Type: number optional The stroke opacity between 0.0 and 1.0
strokePosition optional Type: StrokePosition optional Default: StrokePosition.CENTER The stroke position.
strokeWeight optional Type: number optional The stroke width in pixels.
visible optional Type: boolean optional Default: true Whether this polygon is visible on the map.
zIndex optional Type: number optional The zIndex compared to other polys.

PolyMouseEventinterface

google.maps.PolyMouseEventinterface

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

This interface extends[MapMouseEvent](/maps/documentation/javascript/reference/map#MapMouseEvent).

Properties
edge optional 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.
path optional 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.
vertex optional 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.
Inherited: domEvent,latLng
Methods
Inherited: stop

Rectangleclass

google.maps.Rectangleclass

A rectangle overlay.

This class extends[MVCObject](/maps/documentation/javascript/reference/event#MVCObject).

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

Constructor
Rectangle Rectangle([opts]) Parameters: opts: RectangleOptions optional Create a rectangle using the passed RectangleOptions, which specify the bounds and style.
Methods
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: bounds: LatLngBounds|LatLngBoundsLiteral optional Return Value: None Sets the bounds of this rectangle.
setDraggable setDraggable(draggable) Parameters: draggable: boolean Return Value: None If set to true, the user can drag this rectangle over the map.
setEditable setEditable(editable) Parameters: 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 setMap(map) Parameters: 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 setOptions(options) Parameters: options: RectangleOptions optional Return Value: None
setVisible setVisible(visible) Parameters: visible: boolean Return Value: None Hides this rectangle if set to false.
Inherited: addListener,bindTo,get,notify,set,setValues,unbind,unbindAll
Events
bounds_changed function() Arguments: None This event is fired when the rectangle's bounds are changed.
click function(event) Arguments: event: MapMouseEvent This event is fired when the DOM click event is fired on the rectangle.
contextmenu function(event) Arguments: event: MapMouseEvent This event is fired when the DOM contextmenu event is fired on the rectangle.
dblclick function(event) Arguments: event: MapMouseEvent This event is fired when the DOM dblclick event is fired on the rectangle.
drag function(event) Arguments: event: MapMouseEvent This event is repeatedly fired while the user drags the rectangle.
dragend function(event) Arguments: event: MapMouseEvent This event is fired when the user stops dragging the rectangle.
dragstart function(event) Arguments: event: MapMouseEvent This event is fired when the user starts dragging the rectangle.
mousedown function(event) Arguments: event: MapMouseEvent This event is fired when the DOM mousedown event is fired on the rectangle.
mousemove function(event) Arguments: event: MapMouseEvent This event is fired when the DOM mousemove event is fired on the rectangle.
mouseout function(event) Arguments: event: MapMouseEvent This event is fired on rectangle mouseout.
mouseover function(event) Arguments: event: MapMouseEvent This event is fired on rectangle mouseover.
mouseup function(event) Arguments: event: MapMouseEvent This event is fired when the DOM mouseup event is fired on the rectangle.
rightclick function(event) Arguments: event: MapMouseEvent This event is fired when the rectangle is right-clicked on.

RectangleOptionsinterface

google.maps.RectangleOptionsinterface

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

Properties
bounds optional Type: LatLngBounds|LatLngBoundsLiteral optional The bounds.
clickable optional Type: boolean optional Default: true Indicates whether this Rectangle handles mouse events.
draggable optional Type: boolean optional Default: false If set to true, the user can drag this rectangle over the map.
editable optional 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.
fillColor optional Type: string optional The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacity optional Type: number optional The fill opacity between 0.0 and 1.0
map optional Type: Map optional Map on which to display Rectangle.
strokeColor optional Type: string optional The stroke color. All CSS3 colors are supported except for extended named colors.
strokeOpacity optional Type: number optional The stroke opacity between 0.0 and 1.0
strokePosition optional Type: StrokePosition optional Default: StrokePosition.CENTER The stroke position.
strokeWeight optional Type: number optional The stroke width in pixels.
visible optional Type: boolean optional Default: true Whether this rectangle is visible on the map.
zIndex optional Type: number optional The zIndex compared to other polys.

Circleclass

google.maps.Circleclass

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

This class extends[MVCObject](/maps/documentation/javascript/reference/event#MVCObject).

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

Constructor
Circle Circle([circleOrCircleOptions]) Parameters: circleOrCircleOptions: Circle|CircleLiteral
Methods
getBounds getBounds() Parameters: None Return Value: LatLngBounds|null Gets the LatLngBounds of 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: center: LatLng|LatLngLiteral optional Return Value: None Sets the center of this circle.
setDraggable setDraggable(draggable) Parameters: draggable: boolean Return Value: None If set to true, the user can drag this circle over the map.
setEditable setEditable(editable) Parameters: 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 setMap(map) Parameters: 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 setOptions(options) Parameters: options: CircleOptions optional 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 to false.
Inherited: addListener,bindTo,get,notify,set,setValues,unbind,unbindAll
Events
center_changed function() Arguments: None This event is fired when the circle's center is changed.
click function(event) Arguments: event: MapMouseEvent This event is fired when the DOM click event is fired on the circle.
dblclick function(event) Arguments: event: MapMouseEvent This event is fired when the DOM dblclick event is fired on the circle.
drag function(event) Arguments: event: MapMouseEvent This event is repeatedly fired while the user drags the circle.
dragend function(event) Arguments: event: MapMouseEvent This event is fired when the user stops dragging the circle.
dragstart function(event) Arguments: event: MapMouseEvent This event is fired when the user starts dragging the circle.
mousedown function(event) Arguments: event: MapMouseEvent This event is fired when the DOM mousedown event is fired on the circle.
mousemove function(event) Arguments: event: MapMouseEvent This event is fired when the DOM mousemove event is fired on the circle.
mouseout function(event) Arguments: event: MapMouseEvent This event is fired on circle mouseout.
mouseover function(event) Arguments: event: MapMouseEvent This event is fired on circle mouseover.
mouseup function(event) Arguments: event: MapMouseEvent 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: event: MapMouseEvent This event is fired when the circle is right-clicked on.

CircleOptionsinterface

google.maps.CircleOptionsinterface

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

Properties
center optional Type: LatLng|LatLngLiteral optional The center of the Circle.
clickable optional Type: boolean optional Default: true Indicates whether this Circle handles mouse events.
draggable optional Type: boolean optional Default: false If set to true, the user can drag this circle over the map.
editable optional 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.
fillColor optional Type: string optional The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacity optional Type: number optional The fill opacity between 0.0 and 1.0.
map optional Type: Map optional Map on which to display the Circle.
radius optional Type: number optional The radius in meters on the Earth's surface.
strokeColor optional Type: string optional The stroke color. All CSS3 colors are supported except for extended named colors.
strokeOpacity optional Type: number optional The stroke opacity between 0.0 and 1.0.
strokePosition optional Type: StrokePosition optional Default: StrokePosition.CENTER The stroke position.
strokeWeight optional Type: number optional The stroke width in pixels.
visible optional Type: boolean optional Default: true Whether this circle is visible on the map.
zIndex optional Type: number optional The zIndex compared to other polys.

StrokePositionconstants

google.maps.StrokePositionconstants

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.

Constants
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.

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-05-12 UTC.