<iframe src="https://developers.devsite.google/frame/maps/documentation/javascript/reference/map_2b6e495aa1e4f9531a5607d5950bb7317704cca5558a6f62a0805dab9a047da0.frame" class="framebox inherit-locale redirect-iframe" allow="clipboard-write https://developers.devsite.google" allowfullscreen is-upgraded></iframe>

## [MapElement](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapElement)
class


class
`google.maps.MapElement`
extends `HTMLElement`
implements `MapElementOptions`

library `"maps"`

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>

<br />

Internally, it uses `Map`, which can be accessed with the `MapElement.innerMap` property.

<br />

```html
<gmp-map
  center="lat,lng"
  heading-interaction-disabled
  internal-usage-attribution-ids="id1 id2"
  map-id="string"
  rendering-type="value-name"
  tilt-interaction-disabled
  zoom="number">
</gmp-map>
```

```javascript
const {MapElement} = await google.maps.importLibrary("maps");
```

| ### Constructor ||
|---|---|
| `MapElement` | `MapElement([options])` **Parameters:** - `options: MapElementOptions optional` |

| ### Properties ||
|---|---|
| `center` attr: center | **Type:** `LatLng|LatLngLiteral optional` The center latitude/longitude of the map. **HTML attribute:** `center="lat,lng"` |
| `headingInteractionDisabled` attr: heading-interaction-disabled | **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:** `heading-interaction-disabled` |
| `innerMap` | **Type:** `Map` A reference to the `Map` that the MapElement uses internally. |
| `internalUsageAttributionIds` attr: internal-usage-attribution-ids | **Input type:** `Iterable<string> optional` **Output type:** `Array<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:** `internal-usage-attribution-ids="id1 id2"` |
| `mapId` attr: map-id | **Type:** `string optional` The [map ID](https://developers.google.com/maps/documentation/get-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:** `map-id="string"` |
| `renderingType` attr: rendering-type | **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:** `rendering-type="value-name"` |
| `tiltInteractionDisabled` attr: tilt-interaction-disabled | **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:** `tilt-interaction-disabled` |
| `zoom` attr: zoom | **Type:** `number optional` The zoom level of the map. Valid zoom values are numbers from zero up to the supported [maximum zoom level](https://developers.google.com/maps/documentation/javascript/maxzoom.md.txt). Larger zoom values correspond to a higher resolution. **HTML attribute:** `zoom="number"` |

| ### 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 ||
|---|---|

| ### Events ||
|---|---|
| `gmp-zoomchange` | `function(event)` **Arguments:** - `event: ZoomChangeEvent optional` This event is fired when the map zoom property changes. |

## [MapElementOptions](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapElementOptions)
interface


interface
`google.maps.MapElementOptions`

implemented by `MapElement`

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](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#ZoomChangeEvent)
class


class
`google.maps.ZoomChangeEvent`
extends `Event`

library `"maps"`

This event is created from monitoring zoom change.

```javascript
const {ZoomChangeEvent} = await google.maps.importLibrary("maps");
```

## [Map](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#Map)
class


class
`google.maps.Map`
extends `MVCObject`

library `"maps"`

```javascript
const {Map} = await google.maps.importLibrary("maps");
```

| ### 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. |
| `![Beta](data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M20.21,17.64l-6.15-8.22V5.57h2.57V3H6.35v2.57h2.57v3.86l-6.3,8.4c-0.44,0.6-0.5,1.41-0.15,2.08C2.8,20.58,3.49,21,4.24,21h14.5c1.11,0,2.01-0.9,2.01-2.01C20.75,18.48,20.53,18,20.21,17.64z' fill='%2301579b'/%3E%3C/svg%3E "Beta")getDatasetFeatureLayer` | > [!WARNING] > **Notice:** Available only in the [v=beta channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-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. |
| `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:** - `mapTypeId: MapTypeId|string` **Return Value:** None |
| `setOptions` | `setOptions(options)` **Parameters:** - `options: MapOptions optional` **Return Value:** None |
| `setRenderingType` | `setRenderingType(renderingType)` **Parameters:** - `renderingType: RenderingType` **Return Value:** None Sets the current RenderingType of the map. |
| `setStreetView` | `setStreetView(panorama)` **Parameters:** - `panorama: StreetViewPanorama optional` The panorama to bind to the map. **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. |

| ### Events ||
|---|---|
| `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:** - `event: MapMouseEvent|IconMouseEvent optional` 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:** - `event: MapMouseEvent optional` This event is fired when the DOM contextmenu event is fired on the map container. |
| `dblclick` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` 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:** - `event: MapMouseEvent optional` This event is fired whenever the user's mouse moves over the map container. |
| `mouseout` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the user's mouse exits the map container. |
| `mouseover` | `function(event)` **Arguments:** - `event: MapMouseEvent optional` 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](https://developers.google.com/maps/documentation/javascript/reference/map#Map.rightclick)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use the `Map.contextmenu` event instead in order to support usage patterns like control-click on macOS. `function(event)` **Arguments:** - `event: MapMouseEvent optional` This event is fired when the user right-clicks on the map. |

## [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions)
interface


interface
`google.maps.MapOptions`

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

| ### Properties ||
|---|---|
| `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](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions.draggable)` optional | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Deprecated in 2017. To disable dragging on the map, you can use the `gestureHandling` property, and set it to `"none"`. **Type:** `boolean optional` If `false`, prevents the map from being dragged and zoomed by mouse and touch gestures. 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](https://developers.google.com/maps/documentation/get-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](https://developers.google.com/maps/documentation/javascript/maxzoom.md.txt). |
| `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](https://developers.google.com/maps/documentation/javascript/maxzoom.md.txt). |
| `noClear` optional | **Type:** `boolean optional` If `true`, do not clear the contents of the Map div. |
| `[panControl](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions.panControl)` optional | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** The Pan control is deprecated as of September 2015. **Type:** `boolean optional` The enabled/disabled state of the Pan control. <br /> |
| `[panControlOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions.panControlOptions)` optional | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** The Pan control is deprecated as of September 2015. **Type:** `PanControlOptions optional` The display options for the Pan control. <br /> |
| `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](https://developers.google.com/maps/documentation/cloud-customization) 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](https://developers.google.com/maps/documentation/javascript/maxzoom.md.txt). 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. |

## [MapTypeStyle](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapTypeStyle)
interface


interface
`google.maps.MapTypeStyle`

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](https://developers.google.com/maps/documentation/javascript/style-reference.md.txt).

| ### Properties ||
|---|---|
| `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](https://developers.google.com/maps/documentation/javascript/style-reference.md.txt#stylers). |
| `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](https://developers.google.com/maps/documentation/javascript/style-reference.md.txt#style-elements). |
| `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](https://developers.google.com/maps/documentation/javascript/style-reference.md.txt#style-features). |

## [MapMouseEvent](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapMouseEvent)
interface


interface
`google.maps.MapMouseEvent`

extended by `Data.MouseEvent, FeatureMouseEvent, IconMouseEvent, PolyMouseEvent`

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

| ### Properties ||
|---|---|
| `domEvent` | **Type:** `MouseEvent|TouchEvent|PointerEvent|KeyboardEvent|Event` 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. |

| ### Methods ||
|---|---|
| `stop` | `stop()` **Parameters:** None **Return Value:** `void` Prevents this event from propagating further. |

## [IconMouseEvent](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#IconMouseEvent)
interface


interface
`google.maps.IconMouseEvent`
extends `MapMouseEvent`

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](https://developers.google.com/maps/documentation/places/web-service/place-id.md.txt) in the Places API developer guide.

| ### Properties ||
|---|---|
| `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](https://developers.google.com/maps/documentation/places/web-service/place-id.md.txt) in the Places API developer guide. |

| ### Methods ||
|---|---|

## [ColorScheme](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#ColorScheme)
constants


constants
`google.maps.ColorScheme`

library `"core"`

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

These constants are also usable as strings. In TypeScript, the string literals are defined by the `ColorSchemeString` type.

```javascript
const {ColorScheme} = await google.maps.importLibrary("core");
```

| ### Constants ||
|---|---|
| `DARK` | The dark color scheme for a map. |
| `FOLLOW_SYSTEM` | The color scheme is selected based on system preferences, which are checked once at method execution time. |
| `LIGHT` | The light color scheme for a map. Default value for legacy Maps JS. |

## [MapTypeId](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapTypeId)
constants


constants
`google.maps.MapTypeId`

library `"maps"`

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

These constants are also usable as strings. In TypeScript, the string literals are defined by the `MapTypeIdString` type.

```javascript
const {MapTypeId} = await google.maps.importLibrary("maps");
```

| ### Constants ||
|---|---|
| `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](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapTypeRegistry)
class


class
`google.maps.MapTypeRegistry`
extends `MVCObject`

library `"maps"`

A registry for MapType instances, keyed by MapType id.

```javascript
const {MapTypeRegistry} = await google.maps.importLibrary("maps");
```

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

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

## [MapRestriction](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapRestriction)
interface


interface
`google.maps.MapRestriction`

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

| ### Properties ||
|---|---|
| `latLngBounds` | **Type:** `LatLngBounds|LatLngBoundsLiteral` 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](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#TrafficLayer)
class


class
`google.maps.TrafficLayer`
extends `MVCObject`

library `"maps"`

A traffic layer.

```javascript
const {TrafficLayer} = await google.maps.importLibrary("maps");
```

| ### Constructor ||
|---|---|
| `TrafficLayer` | `TrafficLayer([opts])` **Parameters:** - `opts: TrafficLayerOptions optional` A layer that displays current road traffic. |

| ### Methods ||
|---|---|
| `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:** - `options: TrafficLayerOptions optional` **Return Value:** None |

## [TrafficLayerOptions](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#TrafficLayerOptions)
interface


interface
`google.maps.TrafficLayerOptions`

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

| ### Properties ||
|---|---|
| `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](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#TransitLayer)
class


class
`google.maps.TransitLayer`
extends `MVCObject`

library `"maps"`

A transit layer.

```javascript
const {TransitLayer} = await google.maps.importLibrary("maps");
```

| ### Constructor ||
|---|---|
| `TransitLayer` | `TransitLayer()` **Parameters:** None A layer that displays transit lines. |

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

## [BicyclingLayer](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#BicyclingLayer)
class


class
`google.maps.BicyclingLayer`
extends `MVCObject`

library `"maps"`

A layer showing bike lanes and paths.

```javascript
const {BicyclingLayer} = await google.maps.importLibrary("maps");
```

| ### Constructor ||
|---|---|
| `BicyclingLayer` | `BicyclingLayer()` **Parameters:** None A layer that displays bike lanes and paths and demotes large roads. |

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

## [CameraOptions](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#CameraOptions)
interface


interface
`google.maps.CameraOptions`

extended by `CameraParams`

> [!WARNING]
> **Notice:** Available only in the [v=beta channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-beta-channel).

Used for setting the map's camera options.

| ### Properties ||
|---|---|
| `center` optional | **Type:** `LatLngLiteral|LatLng optional` |
| `heading` optional | **Type:** `number optional` |
| `tilt` optional | **Type:** `number optional` |
| `zoom` optional | **Type:** `number optional` |

## [VisibleRegion](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#VisibleRegion)
interface


interface
`google.maps.VisibleRegion`

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.

| ### Properties ||
|---|---|
| `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](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#RenderingType)
constants


constants
`google.maps.RenderingType`

library `"maps"`

These constants are also usable as strings. In TypeScript, the string literals are defined by the `RenderingTypeString` type.

```javascript
const {RenderingType} = await google.maps.importLibrary("maps");
```

| ### Constants ||
|---|---|
| `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](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapCapabilities)
interface


interface
`google.maps.MapCapabilities`

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.

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