Introducing Places UI Kit: A ready-to-use, low-cost component library that lets you bring the familiar Google Maps UI for Places to any map of your choice. Try it out, and share your input to help shape the future of GMP!

Maps

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

Constructor
`MapElement`	`MapElement([options])` Parameters: `options`: `MapElementOptions optional`

Properties
`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>`

Slots
`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.

Methods
`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.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `type`: `string` A string which specifies the type of event for which to remove an event listener. `listener`: `EventListener\|EventListenerObject` The event listener of the event handler to remove from the event target. `options`: `boolean\|EventListenerOptions optional` See options. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. See removeEventListener.

Methods

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.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type: string A string which specifies the type of event for which to remove an event listener.
listener: EventListener|EventListenerObject The event listener of the event handler to remove from the event target.
options: boolean|EventListenerOptions optional See options.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. See removeEventListener.

Events
`gmp-zoomchange`	`function(event)` Arguments: `event`: `ZoomChangeEvent` 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.

Properties
`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.

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.

Constructor
`Map`	`Map(mapDiv[, opts])` Parameters: `mapDiv`: `HTMLElement` The map will render to fill this element. `opts`: `MapOptions optional` Options Creates a new map inside of the given HTML container, which is typically a `DIV` element.

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

Properties
`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`	Type: `MapTypeRegistry` 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).

Methods
`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.
`getDatasetFeatureLayer`	Notice: Available only in the v=beta channel. `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: `featureType`: `FeatureType` 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: `cameraOptions`: `CameraOptions` 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: `latLng`: `LatLng\|LatLngLiteral` The new center latitude/longitude of the map. 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: `latlng`: `LatLng\|LatLngLiteral` 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.

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

MapElement class

Constructor

Properties

Slots

Methods

Events

MapElementOptions interface

Properties

ZoomChangeEvent class

Map class

Constructor

Constants

Properties

Methods

Maps