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.
Constructor | |
---|---|
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. |
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
Retrieves the path. |
getVisible |
getVisible() Parameters: None
Return Value:
boolean Returns whether this poly is visible on the map. |
setDraggable |
setDraggable(draggable) Parameters:
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:
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:
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:
Return Value: None
Hides this poly if set to false . |
Inherited:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Events | |
---|---|
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. |
|
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.
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|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.
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'. |
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.
Constructor | |
---|---|
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. |
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
Retrieves the first path. |
getPaths |
getPaths() Parameters: None
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:
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:
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:
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:
Return Value: None
Hides this poly if set to false . |
Inherited:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Events | |
---|---|
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. |
|
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.
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>|Array<Array<LatLng|LatLngLiteral>>|Array<LatLng|LatLngLiteral> 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
.
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
|
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.
Constructor | |
---|---|
Rectangle |
Rectangle([opts]) Parameters:
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:
Return Value: None
Sets the bounds of this rectangle. |
setDraggable |
setDraggable(draggable) Parameters:
Return Value: None
If set to true , the user can drag this rectangle over the map. |
setEditable |
setEditable(editable) Parameters:
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:
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:
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:
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. |
|
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.
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. |
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.
Constructor | |
---|---|
Circle |
Circle([circleOrCircleOptions]) Parameters:
Create a circle using the passed CircleOptions , which specify the center, radius, and style. |
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:
Return Value: None
Sets the center of this circle. |
setDraggable |
setDraggable(draggable) Parameters:
Return Value: None
If set to true , the user can drag this circle over the map. |
setEditable |
setEditable(editable) Parameters:
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:
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:
Return Value: None
Sets the radius of this circle (in meters). |
setVisible |
setVisible(visible) Parameters:
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:
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.
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. |
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.
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. |