Get Started Contact sales

    Maps

    Map class

    google.maps . Map class

    This class extends MVCObject .

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

    Map
    Map(mapDiv[, opts])
    Parameters:
    Creates a new map inside of the given HTML container, which is typically a DIV element.
    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
    Type: Array < MVCArray < HTMLElement >>
    Additional controls to attach to the map. To add a control to the map, add the control's <div> to the MVCArray corresponding to the ControlPosition where it should be rendered.
    data
    Type: Data
    An instance of Data , bound to the map. Add features to this Data object to conveniently display them on this map.
    mapTypes
    A registry of MapType instances by string ID.
    overlayMapTypes
    Type: MVCArray < MapType optional >
    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 the overlayMapTypes array (overlays with higher index values are displayed in front of overlays with lower index values).
    fitBounds
    fitBounds(bounds[, padding])
    Parameters:
    • bounds :  LatLngBounds | LatLngBoundsLiteral Bounds to show.
    • padding :  number| Padding optional Padding 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 to display: none , the fitBounds function 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 to visibility: 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 |undefined The 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 is undefined . 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. See MapCanvasProjection.getVisibleRegion for 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 this LatLng object is not wrapped. See LatLng for more information. If the center or bounds have not been set then the result is undefined .
    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 is true , then the icons are clickable on the map.
    Beta getDatasetFeatureLayer
    getDatasetFeatureLayer(datasetId)
    Parameters:
    • datasetId :  string
    Return Value: FeatureLayer
    Returns the FeatureLayer for the specified datasetId . 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 resulting FeatureLayer.isAvailable will be false.
    getDiv
    getDiv()
    Parameters:  None
    Return Value: HTMLElement The mapDiv of the map.
    getFeatureLayer
    getFeatureLayer(featureType)
    Parameters:
    Return Value: FeatureLayer
    Returns the FeatureLayer of the specific FeatureType . A FeatureLayer must be enabled in the Google Cloud Console. If a FeatureLayer of the specified FeatureType does not exist on this map, or if Data-driven styling is not available (no map ID, no vector tiles, and no FeatureLayer enabled in the map style), this logs an error, and the resulting FeatureLayer.isAvailable will 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 is undefined .
    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).
    getInternalUsageAttributionIds
    getInternalUsageAttributionIds()
    Parameters:  None
    Return Value: Iterable <string>|null
    Returns the list of usage attribution IDs, which help Google understand which libraries and samples are helpful to developers, such as usage of a marker clustering library.
    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 current Projection . If the map is not yet initialized then the result is undefined . Listen to the projection_changed event and check its value to ensure it is not undefined .
    getRenderingType
    getRenderingType()
    Parameters:  None
    Return Value: RenderingType
    Returns the current RenderingType of the map.
    getStreetView
    getStreetView()
    Parameters:  None
    Return Value: StreetViewPanorama The panorama bound to the map.
    Returns the default StreetViewPanorama bound to the map, which may be a default panorama embedded within the map, or the panorama set using setStreetView() . Changes to the map's streetViewControl will 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 be 0 for imagery taken directly overhead or 45 for 45° imagery. This method does not return the value set by setTilt . See setTilt for 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 is undefined .
    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 :  number Number of pixels to move the map in the x direction.
    • y :  number Number 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 given LatLng . 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 | LatLngBoundsLiteral The bounds to pan the map to.
    • padding :  number| Padding optional Padding 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 given LatLngBounds . 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 of false to 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 a StreetViewPanorama to the map. This panorama overrides the default StreetViewPanorama , allowing the map to bind to an external panorama outside of the map. Setting the panorama to null binds 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 are 0 and 45 . 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 for satellite and hybrid map types, within some locations, and at some zoom levels. Note: getTilt returns the current tilt angle, not the value set by setTilt . Because getTilt and setTilt refer to different things, do not bind() the tilt property; 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 :  number Larger 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. Note: dragend is NOT fired when the user stops panning the map using the keyboard. Please use the Map.idle event instead in order to determine when the user has stopped panning OR 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.

    backgroundColor optional
    Type: string optional
    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.
    cameraControl optional
    Type: boolean optional
    The enabled/disabled state of the Camera control.
    cameraControlOptions optional
    Type: CameraControlOptions optional
    The display options for the Camera control.
    center optional
    Type: LatLng | LatLngLiteral optional
    The initial Map center.
    clickableIcons optional
    Type: boolean optional
    Default: true
    When false , map icons are not clickable. A map icon represents a point of interest, also known as a POI.
    colorScheme optional
    Type: ColorScheme |string optional
    Default: ColorScheme.LIGHT
    The initial Map color scheme. This option can only be set when the map is initialized.
    controlSize optional
    Type: number optional
    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 an undefined state. Only governs the controls made by the Maps API itself. Does not scale developer created custom controls.
    disableDefaultUI optional
    Type: boolean optional
    Enables/disables all default UI buttons. May be overridden individually. Does not disable the keyboard controls, which are separately controlled by the MapOptions.keyboardShortcuts option. Does not disable gesture controls, which are separately controlled by the MapOptions.gestureHandling option.
    disableDoubleClickZoom optional
    Type: boolean optional
    Enables/disables zoom and center on double click. Enabled by default.

    Note: This property is not recommended. To disable zooming on double click, you can use the gestureHandling property, and set it to "none" .

    draggable optional
    Type: boolean optional
    If false , prevents the map from being dragged. Dragging is enabled by default.
    draggableCursor optional
    Type: string optional
    The name or url of the cursor to display when mousing over a draggable map. This property uses the css cursor attribute 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://www.example.com/icon.png ), auto;' .
    draggingCursor optional
    Type: string optional
    The name or url of the cursor to display when the map is being dragged. This property uses the css cursor attribute 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://www.example.com/icon.png ), auto;' .
    fullscreenControl optional
    Type: boolean optional
    The enabled/disabled state of the Fullscreen control.
    fullscreenControlOptions optional
    Type: FullscreenControlOptions optional
    The display options for the Fullscreen control.
    gestureHandling optional
    Type: string optional
    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 map cooperates with 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.
    heading optional
    Type: number optional
    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.
    headingInteractionEnabled optional
    Type: boolean optional
    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).
    internalUsageAttributionIds optional
    Type: Iterable <string> optional
    Default: null
    Adds a usage attribution ID to the initializer, which helps Google understand which libraries and samples are helpful to developers, such as usage of a marker clustering library. To opt out of sending the usage attribution ID, it is safe to delete this property or replace the value with an empty string. Only unique values will be sent. Changes to this value after instantiation may be ignored.
    isFractionalZoomEnabled optional
    Type: boolean optional
    Default: true for vector maps and false for raster maps
    Whether the map should allow fractional zoom levels. Listen to isfractionalzoomenabled_changed to know when the default has been set.
    keyboardShortcuts optional
    Type: boolean optional
    If false , prevents the map from being controlled by the keyboard. Keyboard shortcuts are enabled by default.
    mapId optional
    Type: string optional
    The map ID of the map. This parameter cannot be set or changed after a map is instantiated. Map.DEMO_MAP_ID can be used to try out features that require a map ID but which do not require cloud enablement.
    mapTypeControl optional
    Type: boolean optional
    The initial enabled/disabled state of the Map type control.
    mapTypeControlOptions optional
    Type: MapTypeControlOptions optional
    The initial display options for the Map type control.
    mapTypeId optional
    Type: MapTypeId |string optional
    The initial Map mapTypeId. Defaults to ROADMAP .
    maxZoom optional
    Type: number optional
    The maximum zoom level which will be displayed on the map. If omitted, or set to null , the maximum zoom from the current map type is used instead. Valid zoom values are numbers from zero up to the supported maximum zoom level .
    minZoom optional
    Type: number optional
    The minimum zoom level which will be displayed on the map. If omitted, or set to null , the minimum zoom from the current map type is used instead. Valid zoom values are numbers from zero up to the supported maximum zoom level .
    noClear optional
    Type: boolean optional
    If true , do not clear the contents of the Map div.
    panControl optional
    Type: boolean optional
    The enabled/disabled state of the Pan control.
    panControlOptions optional
    Type: PanControlOptions optional
    The display options for the Pan control.
    renderingType optional
    Type: RenderingType optional
    Default: RenderingType.RASTER
    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.
    restriction optional
    Type: MapRestriction optional
    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.
    rotateControl optional
    Type: boolean optional
    The enabled/disabled state of the Rotate control.
    rotateControlOptions optional
    Type: RotateControlOptions optional
    The display options for the Rotate control.
    scaleControl optional
    Type: boolean optional
    The initial enabled/disabled state of the Scale control.
    scaleControlOptions optional
    Type: ScaleControlOptions optional
    The initial display options for the Scale control.
    scrollwheel optional
    Type: boolean optional
    If false , disables zooming on the map using a mouse scroll wheel. The scrollwheel is enabled by default.

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

    streetView optional
    Type: StreetViewPanorama optional
    A StreetViewPanorama to display when the Street View pegman is dropped on the map. If no panorama is specified, a default StreetViewPanorama will be displayed in the map's div when the pegman is dropped.
    streetViewControl optional
    Type: boolean optional
    The initial enabled/disabled state of the Street View Pegman control. This control is part of the default UI, and should be set to false when displaying a map type on which the Street View road overlay should not appear (e.g. a non-Earth map type).
    streetViewControlOptions optional
    Type: StreetViewControlOptions optional
    The initial display options for the Street View Pegman control.
    styles optional
    Type: Array < MapTypeStyle > optional
    Styles to apply to each of the default map types. Note that for satellite / hybrid and terrain modes, these styles will only apply to labels and geometry. This feature is not available when using a map ID, or when using vector maps (use cloud-based maps styling instead).
    tilt optional
    Type: number optional
    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 are 0 and 45 . The value 0 causes the map to always use a 0° overhead view regardless of the zoom level and viewport. The value 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 for satellite and hybrid map types, within some locations, and at some zoom levels. Note: getTilt returns the current tilt angle, not the value specified by this option. Because getTilt and this option refer to different things, do not bind() the tilt property; doing so may yield unpredictable effects.
    tiltInteractionEnabled optional
    Type: boolean optional
    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).
    zoom optional
    Type: number optional
    The initial Map zoom level. Valid zoom values are numbers from zero up to the supported maximum zoom level . Larger zoom values correspond to a higher resolution.
    zoomControl optional
    Type: boolean optional
    The enabled/disabled state of the Zoom control.
    zoomControlOptions optional
    Type: ZoomControlOptions optional
    The display options for the Zoom control.

    MapElement class

    google.maps . MapElement class

    MapElement is an HTMLElement subclass for rendering maps. After loading the maps library, 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 uses Map , which can be accessed with the innerMap property.

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

    This class extends HTMLElement .

    This class implements MapElementOptions .

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

    MapElement
    MapElement([options])
    Parameters:
    center
    Type: LatLng | LatLngLiteral optional
    The center latitude/longitude of the map.
    HTML attribute:
    • <gmp-map center="lat,lng"></gmp-map>
    headingInteractionDisabled
    Type: boolean optional
    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 the Map that the MapElement uses internally.
    internalUsageAttributionIds
    Type: Iterable <string> optional
    Default: null
    Adds a usage attribution ID to the initializer, which helps Google understand which libraries and samples are helpful to developers, such as usage of a marker clustering library. To opt out of sending the usage attribution ID, it is safe to delete this property or replace the value with an empty string. Only unique values will be sent. Changes to this value after instantiation may be ignored.
    HTML attribute:
    • <gmp-map internal-usage-attribution-ids="id1 id2"></gmp-map>
    mapId
    Type: string optional
    The map ID of the map. This parameter cannot be set or changed after a map is instantiated. Map.DEMO_MAP_ID can 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: RenderingType optional
    Default: RenderingType.VECTOR
    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: boolean optional
    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: number optional
    The zoom level of the map. Valid zoom values are numbers from zero up to the supported maximum 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 the ControlPosition.BLOCK_END_INLINE_CENTER position.
    control-block-end-inline-end
    Places the slotted element in the ControlPosition.BLOCK_END_INLINE_END position.
    control-block-end-inline-start
    Places the slotted element in the ControlPosition.BLOCK_END_INLINE_START position.
    control-block-start-inline-center
    Places the slotted element in the ControlPosition.BLOCK_START_INLINE_CENTER position.
    control-block-start-inline-end
    Places the slotted element in the ControlPosition.BLOCK_START_INLINE_END position.
    control-block-start-inline-start
    Places the slotted element in the ControlPosition.BLOCK_START_INLINE_START position.
    control-inline-end-block-center
    Places the slotted element in the ControlPosition.INLINE_END_BLOCK_CENTER position.
    control-inline-end-block-end
    Places the slotted element in the ControlPosition.INLINE_END_BLOCK_END position.
    control-inline-end-block-start
    Places the slotted element in the ControlPosition.INLINE_END_BLOCK_START position.
    control-inline-start-block-center
    Places the slotted element in the ControlPosition.INLINE_START_BLOCK_CENTER position.
    control-inline-start-block-end
    Places the slotted element in the ControlPosition.INLINE_START_BLOCK_END position.
    control-inline-start-block-start
    Places the slotted element in the ControlPosition.INLINE_START_BLOCK_START position.
    default
    You can create reusable components around the Maps JavaScript Web Components, like AdvancedMarkerElement , using custom elements. By default, any custom elements added directly to the MapElement will be slotted and rendered in MapPanes.overlayMouseTarget . However, the Maps JavaScript API Web Components may be re-slotted to the MapElement 's internal slots.
    Beta addEventListener
    addEventListener(type, listener[, options])
    Parameters:
    • type :  string A case-sensitive string representing the event type to listen for.
    • listener :  EventListener | EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
    • options :  boolean| AddEventListenerOptions optional See options . Custom events only support capture and passive .
    Return Value: void
    Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener .
    Beta removeEventListener
    removeEventListener(type, listener[, options])
    Parameters:
    Return Value: void
    Removes an event listener previously registered with addEventListener from the target. See removeEventListener .
    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.
    center optional
    Type: LatLng | LatLngLiteral optional
    See MapElement.center .
    headingInteractionDisabled optional
    Type: boolean optional
    See MapElement.headingInteractionDisabled .
    internalUsageAttributionIds optional
    Type: Iterable <string> optional
    See MapElement.internalUsageAttributionIds .
    mapId optional
    Type: string optional
    See MapElement.mapId .
    renderingType optional
    Type: RenderingType optional
    See MapElement.renderingType .
    tiltInteractionDisabled optional
    Type: boolean optional
    See MapElement.tiltInteractionDisabled .
    zoom optional
    Type: number optional
    See MapElement.zoom .

    ZoomChangeEvent class

    google.maps . ZoomChangeEvent class

    This event is created from monitoring zoom change.

    This class extends Event .

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

    MapTypeStyle interface

    google.maps . MapTypeStyle interface

    The MapTypeStyle is 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 the style reference .
    stylers
    Type: Array < Object >
    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 the style reference .
    elementType optional
    Type: string optional
    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. If elementType is not specified, the value is assumed to be 'all' . For details of usage and allowed values, see the style reference .
    featureType optional
    Type: string optional
    The feature, or group of features, to which a styler should be applied. Optional. If featureType is not specified, the value is assumed to be 'all' . For details of usage and allowed values, see the style 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 on target , currentTarget , relatedTarget and path properties 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, the domEvent may have different semantics from the MapMouseEvent (e.g. a MapMouseEvent "click" may have a domEvent of type KeyboardEvent ).
    latLng optional
    Type: LatLng optional
    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 about place IDs in the Places API developer guide.

    This interface extends MapMouseEvent .
    placeId optional
    Type: string optional
    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 about place IDs in the Places API developer guide.
    Inherited: domEvent , latLng
    Inherited: stop

    ColorScheme constants

    google.maps . ColorScheme constants

    Identifiers for map color schemes. Specify these by value, or by using the constant's name. For example, 'FOLLOW_SYSTEM' or google.maps.ColorScheme.FOLLOW_SYSTEM .

    Access by calling const {ColorScheme} = await google.maps.importLibrary("core") .See Libraries in the Maps JavaScript API .
    DARK The dark color scheme for a map.
    FOLLOW_SYSTEM The color scheme is selected based on system preferences.
    LIGHT The light color scheme for a map. Default value for legacy Maps JS.

    MapTypeId constants

    google.maps . MapTypeId constants

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

    Access by calling const {MapTypeId} = await google.maps.importLibrary("maps") .See Libraries 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 calling const {MapTypeRegistry} = await google.maps.importLibrary("maps") .See Libraries in the Maps JavaScript API .
    MapTypeRegistry
    MapTypeRegistry()
    Parameters:  None
    The MapTypeRegistry holds 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 :  string Identifier 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} .
    strictBounds optional
    Type: boolean optional
    Bounds can be made more restrictive by setting the strictBounds flag to true . This reduces how far a user can zoom out, ensuring that everything outside of the restricted bounds stays hidden. The default is false , 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 calling const {TrafficLayer} = await google.maps.importLibrary("maps") .See Libraries in the Maps JavaScript API .

    TrafficLayer
    TrafficLayer([opts])
    Parameters:
    A layer that displays current road traffic.
    getMap
    getMap()
    Parameters:  None
    Return Value: Map |null
    Returns the map on which this layer is displayed.
    setMap
    setMap(map)
    Parameters:
    • map :  Map optional
    Return Value:  None
    Renders the layer on the specified map. If map is set to null , 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.
    autoRefresh optional
    Type: boolean optional
    Default: true
    Whether the traffic layer refreshes with updated information automatically.
    map optional
    Type: Map optional
    Map on which to display the traffic layer.

    TransitLayer class

    google.maps . TransitLayer class

    A transit layer.

    This class extends MVCObject .

    Access by calling const {TransitLayer} = await google.maps.importLibrary("maps") .See Libraries in the Maps JavaScript API .
    TransitLayer
    TransitLayer()
    Parameters:  None
    A layer that displays transit lines.
    getMap
    getMap()
    Parameters:  None
    Return Value: Map |null
    Returns the map on which this layer is displayed.
    setMap
    setMap(map)
    Parameters:
    • map :  Map optional
    Return Value: void
    Renders the layer on the specified map. If map is set to null , 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 calling const {BicyclingLayer} = await google.maps.importLibrary("maps") .See Libraries 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 |null
    Returns the map on which this layer is displayed.
    setMap
    setMap(map)
    Parameters:
    • map :  Map optional
    Return Value: void
    Renders the layer on the specified map. If map is set to null , 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.
    center optional
    Type: LatLngLiteral | LatLng optional
    heading optional
    Type: number optional
    tilt optional
    Type: number optional
    zoom optional
    Type: number optional

    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
    Type: LatLngBounds
    The smallest bounding box that includes the visible region.
    nearLeft
    Type: LatLng
    nearRight
    Type: LatLng

    RenderingType constants

    google.maps . RenderingType constants

    Access by calling const {RenderingType} = await google.maps.importLibrary("maps") .See Libraries 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.
    isAdvancedMarkersAvailable optional
    Type: boolean optional
    If true, this map is configured properly to allow for the use of advanced markers. Note that you must still import the marker library in order to use advanced markers. See https://goo.gle/gmp-isAdvancedMarkersAvailable for more information.
    isDataDrivenStylingAvailable optional
    Type: boolean optional
    If true, this map is configured properly to allow for the use of data-driven styling for at least one FeatureLayer. See https://goo.gle/gmp-data-driven-styling and https://goo.gle/gmp-FeatureLayerIsAvailable for more information.
    isWebGLOverlayViewAvailable optional
    Type: boolean optional
    If true, this map is configured properly to allow for the use of WebGLOverlayView .
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: