Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.

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

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

MapElement class

Constructor

Properties

Slots

Methods

Events

MapElementOptions interface

Properties

Maps