Get Started Contact sales

    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 calling const {Polyline} = await google.maps.importLibrary("maps") .See Libraries in the Maps JavaScript API .

    Polyline
    Polyline([opts])
    Parameters:
    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 LatLng s or an MVCArray of LatLng s when constructing a polyline, though simple arrays are converted to MVCArray s 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 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:
    Return Value:  None
    setPath
    setPath(path)
    Parameters:
    Return Value:  None
    Sets the path. See PolylineOptions for more details.
    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
    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.
    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 | LatLngLiteral > optional
    The ordered sequence of coordinates of the Polyline. This path may be specified using either a simple array of LatLng s, or an MVCArray of LatLng s. 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.
    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.

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

    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 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
    Polygon([opts])
    Parameters:
    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 LatLng s. You may pass either an array of LatLngs or an MVCArray of LatLng s when constructing these paths. Arrays are converted to MVCArray s 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 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:
    Return Value:  None
    setPath
    setPath(path)
    Parameters:
    Return Value:  None
    Sets the first path. See PolygonOptions for more details.
    setPaths
    setPaths(paths)
    Parameters:
    Return Value:  None
    Sets the path for this polygon.
    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
    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.
    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
    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 LatLng 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 LatLng s. More complex polygons may specify an array of arrays. Any simple arrays are converted into MVCArray s. Inserting or removing LatLng s from the MVCArray will automatically update the polygon on the map.
    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.

    PolyMouseEvent interface

    google.maps . PolyMouseEvent interface

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

    This interface extends MapMouseEvent .
    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
    Inherited: stop

    Rectangle class

    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 .

    Rectangle
    Rectangle([opts])
    Parameters:
    Create a rectangle using the passed RectangleOptions , 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 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:
    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
    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.
    bounds 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.

    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 calling const {Circle} = await google.maps.importLibrary("maps") .See Libraries in the Maps JavaScript API .

    Circle
    Circle([circleOrCircleOptions])
    Parameters:
    Create a circle using the passed CircleOptions , which specify the center, radius, and style.
    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:
    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:
    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
    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.
    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.

    StrokePosition constants

    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 .
    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.
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: