Maps

Map class

google.maps.Map class

This class extends MVCObject.

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

Map
Map(mapDiv[, opts])
Parameters:
Creates a new map inside of the given HTML container, which is typically aDIVelement.
DEMO_MAP_ID Map ID which can be used for code samples which require a Map ID. This Map ID is not intended for use in production applications and cannot be used for features which require cloud configuration (such as Cloud Styling).
controls
Additional controls to attach to the map. To add a control to the map, add the control's<div>to theMVCArraycorresponding to theControlPositionwhere it should be rendered.
data
Type:Data
An instance ofData,bound to the map. Add features to thisDataobject to conveniently display them on this map.
mapTypes
A registry ofMapTypeinstances by string ID.
overlayMapTypes
Type:MVCArray<MapTypeoptional>
Additional map types to overlay. Overlay map types will display on top of the base map they are attached to, in the order in which they appear in theoverlayMapTypesarray (overlays with higher index values are displayed in front of overlays with lower index values).
fitBounds
fitBounds(bounds[, padding])
Parameters:
  • bounds:LatLngBounds|LatLngBoundsLiteralBounds to show.
  • padding:number|PaddingoptionalPadding in pixels. The bounds will be fit in the part of the map that remains after padding is removed. A number value will yield the same padding on all 4 sides. Supply 0 here to make a fitBounds idempotent on the result of getBounds.
Return Value:None
Sets the viewport to contain the given bounds.Note:When the map is set todisplay: none,thefitBoundsfunction reads the map's size as 0x0, and therefore does not do anything. To change the viewport while the map is hidden, set the map tovisibility: hidden,thereby ensuring the map div has an actual size. For vector maps, this method sets the map's tilt and heading to their default zero values. Calling this method may cause a smooth animation as the map pans and zooms to fit the bounds. Whether or not this method animates depends on an internal heuristic.
getBounds
getBounds()
Parameters:None
Return Value:LatLngBounds|undefinedThe lat/lng bounds of the current viewport.
Returns the lat/lng bounds of the current viewport. If more than one copy of the world is visible, the bounds range in longitude from -180 to 180 degrees inclusive. If the map is not yet initialized or center and zoom have not been set then the result isundefined.For vector maps with non-zero tilt or heading, the returned lat/lng bounds represents the smallest bounding box that includes the visible region of the map's viewport. SeeMapCanvasProjection.getVisibleRegionfor getting the exact visible region of the map's viewport.
getCenter
getCenter()
Parameters:None
Return Value:LatLng|undefined
Returns the position displayed at the center of the map. Note that thisLatLngobject isnotwrapped. SeeLatLngfor more information. If the center or bounds have not been set then the result isundefined.
getClickableIcons
getClickableIcons()
Parameters:None
Return Value:boolean|undefined
Returns the clickability of the map icons. A map icon represents a point of interest, also known as a POI. If the returned value istrue,then the icons are clickable on the map.
BetagetDatasetFeatureLayer
getDatasetFeatureLayer(datasetId)
Parameters:
  • datasetId:string
Return Value:FeatureLayer
Returns theFeatureLayerfor the specifieddatasetId.Dataset IDs must be configured in the Google Cloud Console. If the dataset ID is not associated with the map's map style, or if Data-driven styling is not available (no map ID, no vector tiles, no Data-Driven Styling feature layers or Datasets configured in the Map Style), this logs an error, and the resultingFeatureLayer.isAvailablewill be false.
getDiv
getDiv()
Parameters:None
Return Value:HTMLElementThe mapDiv of the map.
getFeatureLayer
getFeatureLayer(featureType)
Parameters:
Return Value:FeatureLayer
Returns theFeatureLayerof the specificFeatureType.AFeatureLayermust be enabled in the Google Cloud Console. If aFeatureLayerof the specifiedFeatureTypedoes not exist on this map, or if Data-driven styling is not available (no map ID, no vector tiles, and noFeatureLayerenabled in the map style), this logs an error, and the resultingFeatureLayer.isAvailablewill be false.
getHeading
getHeading()
Parameters:None
Return Value:number|undefined
Returns the compass heading of the map. The heading value is measured in degrees (clockwise) from cardinal direction North. If the map is not yet initialized then the result isundefined.
getHeadingInteractionEnabled
getHeadingInteractionEnabled()
Parameters:None
Return Value:boolean|null
Returns whether heading interactions are enabled. This option is only in effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
getMapCapabilities
getMapCapabilities()
Parameters:None
Return Value:MapCapabilities
Informs the caller of the current capabilities available to the map based on the Map ID that was provided.
getMapTypeId
getMapTypeId()
Parameters:None
Return Value:MapTypeId|string|undefined
getProjection
getProjection()
Parameters:None
Return Value:Projection|undefined
Returns the currentProjection.If the map is not yet initialized then the result isundefined.Listen to theprojection_changedevent and check its value to ensure it is notundefined.
getRenderingType
getRenderingType()
Parameters:None
Return Value:RenderingType
Returns the current RenderingType of the map.
getStreetView
getStreetView()
Parameters:None
Return Value:StreetViewPanoramaThe panorama bound to the map.
Returns the defaultStreetViewPanoramabound to the map, which may be a default panorama embedded within the map, or the panorama set usingsetStreetView().Changes to the map'sstreetViewControlwill be reflected in the display of such a bound panorama.
getTilt
getTilt()
Parameters:None
Return Value:number|undefined
Returns the current angle of incidence of the map, in degrees from the viewport plane to the map plane. For raster maps, the result will be0for imagery taken directly overhead or45for 45° imagery. This method does not return the value set bysetTilt.SeesetTiltfor details.
getTiltInteractionEnabled
getTiltInteractionEnabled()
Parameters:None
Return Value:boolean|null
Returns whether tilt interactions are enabled. This option is only in effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
getZoom
getZoom()
Parameters:None
Return Value:number|undefined
Returns the zoom of the map. If the zoom has not been set then the result isundefined.
moveCamera
moveCamera(cameraOptions)
Parameters:
Return Value:None
Immediately sets the map's camera to the target camera options, without animation.
panBy
panBy(x, y)
Parameters:
  • x:numberNumber of pixels to move the map in the x direction.
  • y:numberNumber of pixels to move the map in the y direction.
Return Value:None
Changes the center of the map by the given distance in pixels. If the distance is less than both the width and height of the map, the transition will be smoothly animated. Note that the map coordinate system increases from west to east (for x values) and north to south (for y values).
panTo
panTo(latLng)
Parameters:
Return Value:None
Changes the center of the map to the givenLatLng.If the change is less than both the width and height of the map, the transition will be smoothly animated.
panToBounds
panToBounds(latLngBounds[, padding])
Parameters:
  • latLngBounds:LatLngBounds|LatLngBoundsLiteralThe bounds to pan the map to.
  • padding:number|PaddingoptionalPadding in pixels. A number value will yield the same padding on all 4 sides. The default value is 0.
Return Value:None
Pans the map by the minimum amount necessary to contain the givenLatLngBounds.It makes no guarantee where on the map the bounds will be, except that the map will be panned to show as much of the bounds as possible inside{currentMapSizeInPx} - {padding}.For both raster and vector maps, the map's zoom, tilt, and heading will not be changed.
setCenter
setCenter(latlng)
Parameters:
Return Value:None
setClickableIcons
setClickableIcons(value)
Parameters:
  • value:boolean
Return Value:None
Controls whether the map icons are clickable or not. A map icon represents a point of interest, also known as a POI. To disable the clickability of map icons, pass a value offalseto this method.
setHeading
setHeading(heading)
Parameters:
  • heading:number
Return Value:None
Sets the compass heading for map measured in degrees from cardinal direction North. For raster maps, this method only applies to aerial imagery.
setHeadingInteractionEnabled
setHeadingInteractionEnabled(headingInteractionEnabled)
Parameters:
  • headingInteractionEnabled:boolean
Return Value:None
Sets whether heading interactions are enabled. This option is only in effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
setMapTypeId
setMapTypeId(mapTypeId)
Parameters:
Return Value:None
setOptions
setOptions(options)
Parameters:
Return Value:None
setRenderingType
setRenderingType(renderingType)
Parameters:
Return Value:None
Sets the current RenderingType of the map.
setStreetView
setStreetView(panorama)
Parameters:
Return Value:None
Binds aStreetViewPanoramato the map. This panorama overrides the defaultStreetViewPanorama,allowing the map to bind to an external panorama outside of the map. Setting the panorama tonullbinds the default embedded panorama back to the map.
setTilt
setTilt(tilt)
Parameters:
  • tilt:number
Return Value:None
For vector maps, sets the angle of incidence of the map. The allowed values are restricted depending on the zoom level of the map.

For raster maps, controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are0and45.setTilt(0)causes the map to always use a 0° overhead view regardless of the zoom level and viewport.setTilt(45)causes the tilt angle to automatically switch to 45 whenever 45° imagery is available for the current zoom level and viewport, and switch back to 0 whenever 45° imagery is not available (this is the default behavior). 45° imagery is only available forsatelliteandhybridmap types, within some locations, and at some zoom levels.Note:getTiltreturns the current tilt angle, not the value set bysetTilt.BecausegetTiltandsetTiltrefer to different things, do notbind()thetiltproperty; doing so may yield unpredictable effects.
setTiltInteractionEnabled
setTiltInteractionEnabled(tiltInteractionEnabled)
Parameters:
  • tiltInteractionEnabled:boolean
Return Value:None
Sets whether tilt interactions are enabled. This option is only in effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
setZoom
setZoom(zoom)
Parameters:
  • zoom:numberLarger zoom values correspond to a higher resolution.
Return Value:None
Sets the zoom of the map.
Inherited: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
bounds_changed
function()
Arguments:None
This event is fired when the viewport bounds have changed.
center_changed
function()
Arguments:None
This event is fired when the map center property changes.
click
function(event)
Arguments:
This event is fired when the user clicks on the map. A MapMouseEvent with properties for the clicked location is returned unless a place icon was clicked, in which case an IconMouseEvent with a place ID is returned. IconMouseEvent and MapMouseEvent are identical, except that IconMouseEvent has the place ID field. The event can always be treated as an MapMouseEvent when the place ID is not important. The click event is not fired if a marker or info window was clicked.
contextmenu
function(event)
Arguments:
This event is fired when the DOM contextmenu event is fired on the map container.
dblclick
function(event)
Arguments:
This event is fired when the user double-clicks on the map. Note that the click event will sometimes fire once and sometimes twice, right before this one.
drag
function()
Arguments:None
This event is repeatedly fired while the user drags the map.
dragend
function()
Arguments:None
This event is fired when the user stops dragging the map.
dragstart
function()
Arguments:None
This event is fired when the user starts dragging the map.
heading_changed
function()
Arguments:None
This event is fired when the map heading property changes.
idle
function()
Arguments:None
This event is fired when the map becomes idle after panning or zooming.
isfractionalzoomenabled_changed
function()
Arguments:None
This event is fired when the isFractionalZoomEnabled property has changed.
mapcapabilities_changed
function()
Arguments:None
This event is fired when the map capabilities change.
maptypeid_changed
function()
Arguments:None
This event is fired when the mapTypeId property changes.
mousemove
function(event)
Arguments:
This event is fired whenever the user's mouse moves over the map container.
mouseout
function(event)
Arguments:
This event is fired when the user's mouse exits the map container.
mouseover
function(event)
Arguments:
This event is fired when the user's mouse enters the map container.
projection_changed
function()
Arguments:None
This event is fired when the projection has changed.
renderingtype_changed
function()
Arguments:None
This event is fired when the renderingType has changed.
tilesloaded
function()
Arguments:None
This event is fired when the visible tiles have finished loading.
tilt_changed
function()
Arguments:None
This event is fired when the map tilt property changes.
zoom_changed
function()
Arguments:None
This event is fired when the map zoom property changes.
rightclick
function(event)
Arguments:
This event is fired when the user right-clicks on the map.

MapOptions interface

google.maps.MapOptions interface

MapOptions object used to define the properties that can be set on a Map.

backgroundColoroptional
Type:stringoptional
Color used for the background of the Map div. This color will be visible when tiles have not yet loaded as the user pans. This option can only be set when the map is initialized.
centeroptional
Type:LatLng|LatLngLiteraloptional
The initial Map center.
clickableIconsoptional
Type:booleanoptional
Default:true
Whenfalse,map icons are not clickable. A map icon represents a point of interest, also known as a POI.
controlSizeoptional
Type:numberoptional
Size in pixels of the controls appearing on the map. This value must be supplied directly when creating the Map, updating this value later may bring the controls into anundefinedstate. Only governs the controls made by the Maps API itself. Does not scale developer created custom controls.
disableDefaultUIoptional
Type:booleanoptional
Enables/disables all default UI buttons. May be overridden individually. Does not disable the keyboard controls, which are separately controlled by theMapOptions.keyboardShortcutsoption. Does not disable gesture controls, which are separately controlled by theMapOptions.gestureHandlingoption.
disableDoubleClickZoomoptional
Type:booleanoptional
Enables/disables zoom and center on double click. Enabled by default.

Note:This property isnot recommended.To disable zooming on double click, you can use thegestureHandlingproperty, and set it to"none".

draggableoptional
Type:booleanoptional
Iffalse,prevents the map from being dragged. Dragging is enabled by default.
draggableCursoroptional
Type:stringoptional
The name or url of the cursor to display when mousing over a draggable map. This property uses the csscursorattribute to change the icon. As with the css property, you must specify at least one fallback cursor that is not a URL. For example:draggableCursor: 'url(http:// example /icon.png), auto;'.
draggingCursoroptional
Type:stringoptional
The name or url of the cursor to display when the map is being dragged. This property uses the csscursorattribute to change the icon. As with the css property, you must specify at least one fallback cursor that is not a URL. For example:draggingCursor: 'url(http:// example /icon.png), auto;'.
fullscreenControloptional
Type:booleanoptional
The enabled/disabled state of the Fullscreen control.
fullscreenControlOptionsoptional
The display options for the Fullscreen control.
gestureHandlingoptional
Type:stringoptional
This setting controls how the API handles gestures on the map. Allowed values:
  • "cooperative":Scroll events and one-finger touch gestures scroll the page, and do not zoom or pan the map. Two-finger touch gestures pan and zoom the map. Scroll events with a ctrl key or ⌘ key pressed zoom the map.
    In this mode the mapcooperateswith the page.
  • "greedy":All touch gestures and scroll events pan or zoom the map.
  • "none":The map cannot be panned or zoomed by user gestures.
  • "auto":(default) Gesture handling is either cooperative or greedy, depending on whether the page is scrollable or in an iframe.
headingoptional
Type:numberoptional
The heading for aerial imagery in degrees measured clockwise from cardinal direction North. Headings are snapped to the nearest available angle for which imagery is available.
headingInteractionEnabledoptional
Type:booleanoptional
Default:false
Whether the map should allow user control of the camera heading (rotation). This option is only in effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
isFractionalZoomEnabledoptional
Type:booleanoptional
Default:truefor vector maps andfalsefor raster maps
Whether the map should allow fractional zoom levels. Listen toisfractionalzoomenabled_changedto know when the default has been set.
keyboardShortcutsoptional
Type:booleanoptional
Iffalse,prevents the map from being controlled by the keyboard. Keyboard shortcuts are enabled by default.
mapIdoptional
Type:stringoptional
TheMap IDof the map. This parameter cannot be set or changed after a map is instantiated.Map.DEMO_MAP_IDcan be used to try out features that require a map ID but which do not require cloud enablement.
mapTypeControloptional
Type:booleanoptional
The initial enabled/disabled state of the Map type control.
mapTypeControlOptionsoptional
The initial display options for the Map type control.
mapTypeIdoptional
Type:MapTypeId|stringoptional
The initial Map mapTypeId. Defaults toROADMAP.
maxZoomoptional
Type:numberoptional
The maximum zoom level which will be displayed on the map. If omitted, or set tonull,the maximum zoom from the current map type is used instead. Valid zoom values are numbers from zero up to the supportedmaximum zoom level.
minZoomoptional
Type:numberoptional
The minimum zoom level which will be displayed on the map. If omitted, or set tonull,the minimum zoom from the current map type is used instead. Valid zoom values are numbers from zero up to the supportedmaximum zoom level.
noClearoptional
Type:booleanoptional
Iftrue,do not clear the contents of the Map div.
panControloptional
Type:booleanoptional
The enabled/disabled state of the Pan control.

panControlOptionsoptional
Type:PanControlOptionsoptional
The display options for the Pan control.

renderingTypeoptional
Type:RenderingTypeoptional
Whether the map should be a raster or vector map. This parameter cannot be set or changed after a map is instantiated. If not set, then the cloud configuration for the map ID will determine the rendering type (if available). Please note that vector maps may not be available for all devices and browsers and the map will fall back to a raster map as needed.
restrictionoptional
Type:MapRestrictionoptional
Defines a boundary that restricts the area of the map accessible to users. When set, a user can only pan and zoom while the camera view stays inside the limits of the boundary.
rotateControloptional
Type:booleanoptional
The enabled/disabled state of the Rotate control.
rotateControlOptionsoptional
The display options for the Rotate control.
scaleControloptional
Type:booleanoptional
The initial enabled/disabled state of the Scale control.
scaleControlOptionsoptional
Type:ScaleControlOptionsoptional
The initial display options for the Scale control.
scrollwheeloptional
Type:booleanoptional
Iffalse,disables zooming on the map using a mouse scroll wheel. The scrollwheel is enabled by default.

Note:This property isnot recommended.To disable zooming using scrollwheel, you can use thegestureHandlingproperty, and set it to either"cooperative"or"none".

streetViewoptional
Type:StreetViewPanoramaoptional
AStreetViewPanoramato display when the Street View pegman is dropped on the map. If no panorama is specified, a defaultStreetViewPanoramawill be displayed in the map'sdivwhen the pegman is dropped.
streetViewControloptional
Type:booleanoptional
The initial enabled/disabled state of the Street View Pegman control. This control is part of the default UI, and should be set tofalsewhen displaying a map type on which the Street View road overlay should not appear (e.g. a non-Earth map type).
streetViewControlOptionsoptional
The initial display options for the Street View Pegman control.
stylesoptional
Type:Array<MapTypeStyle>optional
Styles to apply to each of the default map types. Note that forsatellite/hybridandterrainmodes, these styles will only apply to labels and geometry. This feature is not available when using a map ID, or when using vector maps (usecloud-based maps stylinginstead).
tiltoptional
Type:numberoptional
For vector maps, sets the angle of incidence of the map. The allowed values are restricted depending on the zoom level of the map. For raster maps, controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are0and45.The value0causes the map to always use a 0° overhead view regardless of the zoom level and viewport. The value45causes the tilt angle to automatically switch to 45 whenever 45° imagery is available for the current zoom level and viewport, and switch back to 0 whenever 45° imagery is not available (this is the default behavior). 45° imagery is only available forsatelliteandhybridmap types, within some locations, and at some zoom levels.Note:getTiltreturns the current tilt angle, not the value specified by this option. BecausegetTiltand this option refer to different things, do notbind()thetiltproperty; doing so may yield unpredictable effects.
tiltInteractionEnabledoptional
Type:booleanoptional
Default:false
Whether the map should allow user control of the camera tilt. This option is only in effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
zoomoptional
Type:numberoptional
The initial Map zoom level. Valid zoom values are numbers from zero up to the supportedmaximum zoom level.Larger zoom values correspond to a higher resolution.
zoomControloptional
Type:booleanoptional
The enabled/disabled state of the Zoom control.
zoomControlOptionsoptional
Type:ZoomControlOptionsoptional
The display options for the Zoom control.

MapElement class

google.maps.MapElement class

MapElement is anHTMLElementsubclass for rendering maps. After loading themapslibrary, a map can be created in HTML. For example:

<gmp-map center= "37.4220656,-122.0840897" zoom= "10" map-id= "DEMO_MAP_ID" >
<button slot= "control-block-start-inline-end" >Custom Control</button>
</gmp-map>

Internally, it usesMap,which can be accessed with theinnerMapproperty.

Custom element:
<gmp-map center= "lat,lng" heading-interaction-disabled map-id= "string" rendering-type= "vector" tilt-interaction-disabled zoom= "number" ></gmp-map>

This class extends HTMLElement.

This class implements MapElementOptions.

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

MapElement
MapElement([options])
Parameters:
center
Type:LatLng|LatLngLiteraloptional
The center latitude/longitude of the map.
HTML attribute:
  • <gmp-map center= "lat,lng" ></gmp-map>
headingInteractionDisabled
Type:booleanoptional
Default:false
Whether the map should allow user control of the camera heading (rotation). This option is only in effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
HTML attribute:
  • <gmp-map heading-interaction-disabled></gmp-map>
innerMap
Type:Map
A reference to theMapthat the MapElement uses internally.
mapId
Type:stringoptional
TheMap IDof the map. This parameter cannot be set or changed after a map is instantiated.Map.DEMO_MAP_IDcan be used to try out features that require a map ID but which do not require cloud enablement.
HTML attribute:
  • <gmp-map map-id= "string" ></gmp-map>
renderingType
Type:RenderingTypeoptional
Whether the map should be a raster or vector map. This parameter cannot be set or changed after a map is instantiated. If not set, then the cloud configuration for the map ID will determine the rendering type (if available). Please note that vector maps may not be available for all devices and browsers and the map will fall back to a raster map as needed.
HTML attribute:
  • <gmp-map rendering-type= "vector" ></gmp-map>
  • <gmp-map rendering-type= "raster" ></gmp-map>
tiltInteractionDisabled
Type:booleanoptional
Default:false
Whether the map should allow user control of the camera tilt. This option is only in effect when the map is a vector map. If not set in code, then the cloud configuration for the map ID will be used (if available).
HTML attribute:
  • <gmp-map tilt-interaction-disabled></gmp-map>
zoom
Type:numberoptional
The zoom level of the map. Valid zoom values are numbers from zero up to the supportedmaximum zoom level.Larger zoom values correspond to a higher resolution.
HTML attribute:
  • <gmp-map zoom= "number" ></gmp-map>
control-block-end-inline-center
Places the slotted element in theControlPosition.BLOCK_END_INLINE_CENTERposition.
control-block-end-inline-end
Places the slotted element in theControlPosition.BLOCK_END_INLINE_ENDposition.
control-block-end-inline-start
Places the slotted element in theControlPosition.BLOCK_END_INLINE_STARTposition.
control-block-start-inline-center
Places the slotted element in theControlPosition.BLOCK_START_INLINE_CENTERposition.
control-block-start-inline-end
Places the slotted element in theControlPosition.BLOCK_START_INLINE_ENDposition.
control-block-start-inline-start
Places the slotted element in theControlPosition.BLOCK_START_INLINE_STARTposition.
control-inline-end-block-center
Places the slotted element in theControlPosition.INLINE_END_BLOCK_CENTERposition.
control-inline-end-block-end
Places the slotted element in theControlPosition.INLINE_END_BLOCK_ENDposition.
control-inline-end-block-start
Places the slotted element in theControlPosition.INLINE_END_BLOCK_STARTposition.
control-inline-start-block-center
Places the slotted element in theControlPosition.INLINE_START_BLOCK_CENTERposition.
control-inline-start-block-end
Places the slotted element in theControlPosition.INLINE_START_BLOCK_ENDposition.
control-inline-start-block-start
Places the slotted element in theControlPosition.INLINE_START_BLOCK_STARTposition.
default
You can create reusable components around the Maps JavaScript Web Components, likeAdvancedMarkerElement,using custom elements. By default, any custom elements added directly to theMapElementwill be slotted and rendered inMapPanes.overlayMouseTarget.However, the Maps JavaScript API Web Components may be re-slotted to theMapElement's internal slots.
BetaaddEventListener
addEventListener(type, listener[, options])
Parameters:
  • type:stringA case-sensitive string representing the event type to listen for.
  • listener:EventListener|EventListenerObjectThe object that receives a notification. This must be a function or an object with the handleEvent method
  • options:boolean|AddEventListenerOptionsoptionalSeeoptions.Custom events only supportcaptureandpassive.
Return Value:void
Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameters:
Return Value:void
Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener
gmp-zoomchange
function(event)
Arguments:
This event is fired when the map zoom property changes.

MapElementOptions interface

google.maps.MapElementOptions interface

MapElementOptions object used to define the properties that can be set on a MapElement.

centeroptional
Type:LatLng|LatLngLiteraloptional
headingInteractionDisabledoptional
Type:booleanoptional
mapIdoptional
Type:stringoptional
renderingTypeoptional
Type:RenderingTypeoptional
tiltInteractionDisabledoptional
Type:booleanoptional
zoomoptional
Type:numberoptional

ZoomChangeEvent class

google.maps.ZoomChangeEvent class

This event is created from monitoring zoom change.

This class extends Event.

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

MapTypeStyle interface

google.maps.MapTypeStyle interface

TheMapTypeStyleis a collection of selectors and stylers that define how the map should be styled. Selectors specify the map features and/or elements that should be affected, and stylers specify how those features and elements should be modified. For details, see thestyle reference.

stylers
The style rules to apply to the selected map features and elements. The rules are applied in the order that you specify in this array. For guidelines on usage and allowed values, see thestyle reference.
elementTypeoptional
Type:stringoptional
The element to which a styler should be applied. An element is a visual aspect of a feature on the map. Example: a label, an icon, the stroke or fill applied to the geometry, and more. Optional. IfelementTypeis not specified, the value is assumed to be'all'.For details of usage and allowed values, see thestyle reference.
featureTypeoptional
Type:stringoptional
The feature, or group of features, to which a styler should be applied. Optional. IffeatureTypeis not specified, the value is assumed to be'all'.For details of usage and allowed values, see thestyle reference.

MapMouseEvent interface

google.maps.MapMouseEvent interface

This object is returned from various mouse events on the map and overlays, and contains all the fields shown below.

domEvent
The corresponding native DOM event. Developers should not rely ontarget,currentTarget,relatedTargetandpathproperties being defined and consistent. Developers should not also rely on the DOM structure of the internal implementation of the Maps API. Due to internal event mapping, thedomEventmay have different semantics from theMapMouseEvent(e.g. aMapMouseEvent"click" may have adomEventof typeKeyboardEvent).
latLngoptional
Type:LatLngoptional
The latitude/longitude that was below the cursor when the event occurred.
stop
stop()
Parameters:None
Return Value:void
Prevents this event from propagating further.

IconMouseEvent interface

google.maps.IconMouseEvent interface

This object is sent in an event when a user clicks on an icon on the map. The place ID of this place is stored in the placeId member. To prevent the default info window from showing up, call the stop() method on this event to prevent it being propagated. Learn more aboutplace IDsin the Places API developer guide.

This interface extends MapMouseEvent.

placeIdoptional
Type:stringoptional
The place ID of the place that was clicked. This place ID can be used to query more information about the feature that was clicked.

Learn more aboutplace IDsin the Places API developer guide.

Inherited: domEvent, latLng
Inherited: stop

MapTypeId constants

google.maps.MapTypeId constants

Identifiers for common MapTypes. Specify these by value, or by using the constant's name. For example,'satellite'orgoogle.maps.MapTypeId.SATELLITE.

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

HYBRID This map type displays a transparent layer of major streets on satellite images.
ROADMAP This map type displays a normal street map.
SATELLITE This map type displays satellite images.
TERRAIN This map type displays maps with physical features such as terrain and vegetation.

MapTypeRegistry class

google.maps.MapTypeRegistry class

A registry for MapType instances, keyed by MapType id.

This class extends MVCObject.

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

MapTypeRegistry
MapTypeRegistry()
Parameters:None
TheMapTypeRegistryholds the collection of custom map types available to the map for its use. The API consults this registry when providing the list of available map types within controls, for example.
set
set(id, mapType)
Parameters:
  • id:stringIdentifier of the MapType to add to the registry.
  • mapType:MapType|*MapType object to add to the registry.
Return Value:None
Sets the registry to associate the passed string identifier with the passed MapType.
Inherited: addListener, bindTo, get, notify, setValues, unbind, unbindAll

MapRestriction interface

google.maps.MapRestriction interface

A restriction that can be applied to the Map. The map's viewport will not exceed these restrictions.

latLngBounds
When set, a user can only pan and zoom inside the given bounds. Bounds can restrict both longitude and latitude, or can restrict latitude only. For latitude-only bounds use west and east longitudes of -180 and 180, respectively, for example,latLngBounds: {north: northLat, south: southLat, west: -180, east: 180}.
strictBoundsoptional
Type:booleanoptional
Bounds can be made more restrictive by setting thestrictBoundsflag totrue.This reduces how far a user can zoom out, ensuring that everything outside of the restricted bounds stays hidden. The default isfalse,meaning that a user can zoom out until the entire bounded area is in view, possibly including areas outside the bounded area.

TrafficLayer class

google.maps.TrafficLayer class

A traffic layer.

This class extends MVCObject.

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

TrafficLayer
TrafficLayer([opts])
Parameters:
A layer that displays current road traffic.
getMap
getMap()
Parameters:None
Return Value:Map
Returns the map on which this layer is displayed.
setMap
setMap(map)
Parameters:
Return Value:None
Renders the layer on the specified map. If map is set tonull,the layer will be removed.
setOptions
setOptions(options)
Parameters:
Return Value:None
Inherited: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

TrafficLayerOptions interface

google.maps.TrafficLayerOptions interface

TrafficLayerOptions object used to define the properties that can be set on a TrafficLayer.

autoRefreshoptional
Type:booleanoptional
Default:true
Whether the traffic layer refreshes with updated information automatically.
mapoptional
Type:Mapoptional
Map on which to display the traffic layer.

TransitLayer class

google.maps.TransitLayer class

A transit layer.

This class extends MVCObject.

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

TransitLayer
TransitLayer()
Parameters:None
A layer that displays transit lines.
getMap
getMap()
Parameters:None
Return Value:Map
Returns the map on which this layer is displayed.
setMap
setMap(map)
Parameters:
Return Value:None
Renders the layer on the specified map. If map is set tonull,the layer will be removed.
Inherited: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

BicyclingLayer class

google.maps.BicyclingLayer class

A layer showing bike lanes and paths.

This class extends MVCObject.

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

BicyclingLayer
BicyclingLayer()
Parameters:None
A layer that displays bike lanes and paths and demotes large roads.
getMap
getMap()
Parameters:None
Return Value:Map
Returns the map on which this layer is displayed.
setMap
setMap(map)
Parameters:
Return Value:None
Renders the layer on the specified map. If map is set tonull,the layer will be removed.
Inherited: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

CameraOptions interface

google.maps.CameraOptions interface

Used for setting the map's camera options.

centeroptional
Type:LatLngLiteral|LatLngoptional
headingoptional
Type:numberoptional
tiltoptional
Type:numberoptional
zoomoptional
Type:numberoptional

VisibleRegion interface

google.maps.VisibleRegion interface

Contains the four points defining the four-sided polygon that is the visible region of the map. On a vector map this polygon can be a trapezoid instead of a rectangle, when a vector map has tilt.

farLeft
Type:LatLng
farRight
Type:LatLng
latLngBounds
The smallest bounding box that includes the visible region.
nearLeft
Type:LatLng
nearRight
Type:LatLng

RenderingType constants

google.maps.RenderingType constants

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

RASTER Indicates that the map is a raster map.
UNINITIALIZED Indicates that it is unknown yet whether the map is vector or raster, because the map has not finished initializing yet.
VECTOR Indicates that the map is a vector map.

MapCapabilities interface

google.maps.MapCapabilities interface

Object containing a snapshot of what capabilities are currently available for the Map. Note that this does not necessarily mean that relevant modules are loaded or initialized, but rather that the current map has permission to use these APIs. See the properties for a list of possible capabilities.

isAdvancedMarkersAvailableoptional
Type:booleanoptional
If true, this map is configured properly to allow for the use of advanced markers. Note that you must still import themarkerlibrary in order to use advanced markers. Seehttps://goo.gle/gmp-isAdvancedMarkersAvailablefor more information.
isDataDrivenStylingAvailableoptional
Type:booleanoptional
If true, this map is configured properly to allow for the use of data-driven styling for at least one FeatureLayer. Seehttps://goo.gle/gmp-data-driven-stylingandhttps://goo.gle/gmp-FeatureLayerIsAvailablefor more information.
isWebGLOverlayViewAvailableoptional
Type:booleanoptional
If true, this map is configured properly to allow for the use ofWebGLOverlayView.