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

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


class
`google.maps.maps3d.Map3DElement`
extends `HTMLElement`
implements `Map3DElementOptions`

library `"maps3d"`

Map3DElement is an HTML interface for the 3D Map view. Note that the `mode` must be set for the 3D Map to start rendering.

```html
<gmp-map-3d
  autofits-camera-animation="value-name"
  camera-position="lat,lng,altitude"
  center="lat,lng,altitude"
  color-scheme="value-name"
  default-ui-hidden
  description="string"
  fov="number"
  gesture-handling="value-name"
  heading="number"
  internal-usage-attribution-ids="id1 id2"
  map-id="string"
  max-altitude="number"
  max-heading="number"
  max-memory-megabytes="number"
  max-tilt="number"
  min-altitude="number"
  min-heading="number"
  min-tilt="number"
  mode="value-name"
  quality-mode="value-name"
  range="number"
  roll="number"
  tilt="number">
</gmp-map-3d>
```

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

| ### Constructor ||
|---|---|
| `Map3DElement` | `Map3DElement([options])` **Parameters:** - `options: Map3DElementOptions optional` |

| ### Properties ||
|---|---|
| `![Alpha](data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' viewBox='0 0 24 24' fill='%2301579b'%3E%3Cpath d='M5 21q-1.275 0-1.812-1.137-.538-1.138.262-2.113L9 11V5H8q-.425 0-.713-.288Q7 4.425 7 4t.287-.713Q7.575 3 8 3h8q.425 0 .712.287Q17 3.575 17 4t-.288.712Q16.425 5 16 5h-1v6l5.55 6.75q.8.975.262 2.113Q20.275 21 19 21Zm2-3h10l-3.4-4h-3.2Zm-2 1h14l-6-7.3V5h-2v6.7Zm7-7Z'/%3E%3C/svg%3E "Alpha")autofitsCameraAnimation` attr: autofits-camera-animation | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). **Input type:** `AutofitsCameraAnimation optional` **Output type:** `AutofitsCameraAnimation optional` **Default:** `none` The animation to use for automatic camera fitting. **HTML attribute:** `autofits-camera-animation="value-name"` |
| `bounds` | **Input type:** `LatLngBounds|LatLngBoundsLiteral optional` **Output type:** `LatLngBounds optional` When set, restricts the position of the camera within the specified lat/lng bounds. Note that objects outside the bounds are still rendered. Bounds can restrict both longitude and latitude, or can restrict either latitude or longitude only. For latitude-only bounds use west and east longitudes of `-180` and `180`, respectively. For longitude-only bounds use north and south latitudes of `90` and `-90`, respectively. |
| `cameraPosition` attr: camera-position | **Input type:** `LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional` **Output type:** `LatLngAltitude optional` The position of the camera given as a LatLngAltitude. Will be derived if omitted. If `center` is omitted but `cameraPosition` is specified, `center` will derive from `cameraPosition.` If both are updated in the same run loop, `cameraPosition` will be favored. The fields `cameraPosition` and `center` can be one-to-one-derived from each other in context of the given shared heading, range, roll, and tilt. **HTML attribute:** `camera-position="lat,lng,altitude"` |
| `center` attr: center | **Input type:** `LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional` **Output type:** `LatLngAltitude optional` The center of the map given as a LatLngAltitude, where altitude is in meters above the mean sea level. Note that this is not necessarily where the camera is located, as the `range` field affects the camera's distance from the map center. If not set, defaults to `{lat: 0, lng: 0, altitude: 63710000}`. 63710000 meters is a maximum allowed altitude (Earth radius multiplied by 10). **HTML attribute:** `center="lat,lng,altitude"` |
| `colorScheme` attr: color-scheme | **Input type:** `ColorScheme optional` **Output type:** `ColorScheme optional` **Default:** `ColorScheme.FOLLOW_SYSTEM` Specifies the color scheme for the map. If not set, defaults to `ColorScheme.FOLLOW_SYSTEM`. **HTML attribute:** `color-scheme="value-name"` |
| `defaultUIHidden` attr: default-ui-hidden | **Input type:** `boolean optional` **Output type:** `boolean` **Default:** `false` When `true`, all default UI buttons are hidden. **HTML attribute:** `default-ui-hidden` |
| `description` attr: description | **Input type:** `string optional` **Output type:** `string optional` If provided, an accessibility description (e.g. for use with screen readers) will be added to the map with the provided value. **HTML attribute:** `description="string"` |
| `fov` attr: fov | **Input type:** `number optional` **Output type:** `number optional` Specifies the vertical field of view in degrees. Valid values range from 5.0 to 80.0. Higher values increase the visible area but may introduce perspective distortion. Default: 35.0. **HTML attribute:** `fov="number"` |
| `gestureHandling` attr: gesture-handling | **Input type:** `GestureHandling optional` **Output type:** `GestureHandling` **Default:** `GestureHandling.GREEDY` Controls cooperative gesture handling. When set to `COOPERATIVE`, modifier keys or two-finger gestures are required to scroll the map. When set to `GREEDY`, the host page cannot be scrolled from user events on the map element. When set to `AUTO`, the gesture handling is determined by the scrollability of the host page. **HTML attribute:** `gesture-handling="value-name"` |
| `heading` attr: heading | **Input type:** `number optional` **Output type:** `number optional` The compass heading of the map, in degrees, where due north is zero. When there is no tilt, any roll will be interpreted as heading. **HTML attribute:** `heading="number"` |
| `internalUsageAttributionIds` attr: internal-usage-attribution-ids | **Input type:** `Iterable<string> optional` **Output type:** `Array<string> optional` 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. Only unique values will be sent. Changes to this value after instantiation may be ignored. **HTML attribute:** `internal-usage-attribution-ids="id1 id2"` |
| `language` | **Input type:** `string optional` **Output type:** `string optional` Language in which to attempt to render the base map's language. Will default to the language requested by the developer when loading the Maps JS API. |
| `mapId` attr: map-id | **Input type:** `string optional` **Output type:** `string optional` Specifies a map ID which will be used to fetch cloud-based map style for the map. **HTML attribute:** `map-id="string"` |
| `maxAltitude` attr: max-altitude | **Input type:** `number optional` **Output type:** `number optional` The maximum altitude above the ground which will be displayed on the map. A valid value is between `0` and `63710000` meters (Earth radius multiplied by 10). **HTML attribute:** `max-altitude="number"` |
| `maxHeading` attr: max-heading | **Input type:** `number optional` **Output type:** `number optional` The maximum angle of heading (rotation) of the map. A valid value is between `0` and `360` degrees. `minHeading` and `maxHeading` represent an interval of \<= `360` degrees in which heading gestures will be allowed. `minHeading = 180` and `maxHeading = 90` will allow heading in `[0, 90]` and heading in `[180, 360]`. `minHeading = 90` and `maxHeading = 180` will allow heading in `[90, 180]`. **HTML attribute:** `max-heading="number"` |
| `maxMemoryMegabytes` attr: max-memory-megabytes | **Input type:** `number optional` **Output type:** `number optional` The maximum amount of memory, in megabytes, the map may use for rendering. Lower values reduce memory usage at the cost of visual detail; higher values allow more detail to be kept in memory. Valid values range from 64 to 2048. If not set, a limit is chosen automatically based on the device and the size of the map. Must be set before the map is initialized; changes made afterwards are ignored. **HTML attribute:** `max-memory-megabytes="number"` |
| `maxTilt` attr: max-tilt | **Input type:** `number optional` **Output type:** `number optional` The maximum angle of incidence of the map. A valid value is between `0` and `90` degrees. **HTML attribute:** `max-tilt="number"` |
| `minAltitude` attr: min-altitude | **Input type:** `number optional` **Output type:** `number optional` The minimum altitude above the ground which will be displayed on the map. A valid value is between `0` and `63710000` meters (Earth radius multiplied by 10). **HTML attribute:** `min-altitude="number"` |
| `minHeading` attr: min-heading | **Input type:** `number optional` **Output type:** `number optional` The minimum angle of heading (rotation) of the map. A valid value is between `0` and `360` degrees. `minHeading` and `maxHeading` represent an interval of \<= `360` degrees in which heading gestures will be allowed. `minHeading = 180` and `maxHeading = 90` will allow heading in `[0, 90]` and heading in `[180, 360]`. `minHeading = 90` and `maxHeading = 180` will allow heading in `[90, 180]`. **HTML attribute:** `min-heading="number"` |
| `minTilt` attr: min-tilt | **Input type:** `number optional` **Output type:** `number optional` The minimum angle of incidence of the map. A valid value is between `0` and `90` degrees. **HTML attribute:** `min-tilt="number"` |
| `mode` attr: mode | **Input type:** `MapMode optional` **Output type:** `MapMode optional` **Default:** `MapMode.ROADMAP` Specifies a mode the map should be rendered in. If not set, defaults to `MapMode.ROADMAP`. **HTML attribute:** `mode="value-name"` |
| `qualityMode` attr: quality-mode | **Input type:** `QualityMode optional` **Output type:** `QualityMode optional` **Default:** `QualityMode.FIDELITY` Specifies the rendering quality of the map. Set to `QualityMode.PERFORMANCE` to render with reduced visual detail, which lowers memory usage. **HTML attribute:** `quality-mode="value-name"` |
| `range` attr: range | **Input type:** `number optional` **Output type:** `number optional` The distance from camera to the center of the map, in meters. **HTML attribute:** `range="number"` |
| `region` | **Input type:** `string optional` **Output type:** `string optional` Region with which to attempt to render the base map's POIs. Will default to the region requested by the developer when loading the Maps JS API. |
| `roll` attr: roll | **Input type:** `number optional` **Output type:** `number optional` The roll of the camera around the view vector in degrees. To resolve ambiguities, when there is no tilt, any roll will be interpreted as heading. **HTML attribute:** `roll="number"` |
| `tilt` attr: tilt | **Input type:** `number optional` **Output type:** `number optional` The tilt of the camera's view vector in degrees. A view vector looking directly down at the earth would have a tilt of zero degrees. A view vector pointing away from the earth would have a tilt of `180` degrees. **HTML attribute:** `tilt="number"` |
| `[defaultUIDisabled](https://developers.google.com/maps/documentation/javascript/reference/3d-map#Map3DElement.defaultUIDisabled)` attr: default-ui-disabled | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Please use `Map3DElement.defaultUIHidden` instead. This property will be removed in a future release. **Type:** `boolean optional` **Default:** `false` When `true`, all default UI buttons are disabled. Does not disable the keyboard and gesture controls. **HTML attribute:** `default-ui-disabled` |

| ### Methods ||
|---|---|
| `flyCameraAround` | `flyCameraAround(options)` **Parameters:** - `options: FlyAroundAnimationOptions` **Return Value:** None This method orbits the camera around a given location for a given duration. The animation can be repeated by the given number of `FlyAroundAnimationOptions.repeatCount` times. The camera will move in a clockwise direction. The location being orbited around is specified via `CameraOptions.center`. This is the location that will show in the center of the viewport during the orbit animation, while the camera moves around it. The method is asynchronous because animations can only start after the map has loaded a minimum amount. The method returns once the animation has been started. If the number of `FlyAroundAnimationOptions.repeatCount` times is zero, no spin will occur, and the animation will complete immediately after it starts. |
| `flyCameraTo` | `flyCameraTo(options)` **Parameters:** - `options: FlyToAnimationOptions` **Return Value:** None This method moves the camera parabolically from the current location to a given end location over a given duration. End location can be specified via `CameraOptions.cameraPosition`, which controls the exact camera position, or via `CameraOptions.center`, which controls the visible viewport center of the map. The method is asynchronous because animations can only start after the map has loaded a minimum amount. The method returns once the animation has been started. |
| `stopCameraAnimation` | `stopCameraAnimation()` **Parameters:** None **Return Value:** None This method stops any fly animation that might happen to be running. The camera stays wherever it is mid-animation; it does not teleport to the end point. The method is asynchronous because animations can only start or stop after the map has loaded a minimum amount. The method returns once the animation has stopped. |

| ### Events ||
|---|---|
| `gmp-animationend` | `function(animationEndEvent)` **Arguments:** - `animationEndEvent: Event optional` This event is fired when the fly animation ends. This event bubbles up through the DOM tree. |
| `gmp-camerapositionchange` | `function(cameraPositionChangeEvent)` **Arguments:** - `cameraPositionChangeEvent: Event optional` This event is fired when the Map3DElement's cameraPosition property changes. |
| `gmp-centerchange` | `function(centerChangeEvent)` **Arguments:** - `centerChangeEvent: Event optional` This event is fired when the Map3DElement's center property changes. |
| `gmp-click` | `function(clickEvent)` **Arguments:** - `clickEvent: LocationClickEvent|PlaceClickEvent optional` This event is fired when the `Map3DElement` element is clicked. |
| `gmp-error` | `function(mapInitializationErrorEvent)` **Arguments:** - `mapInitializationErrorEvent: Event optional` This event is fired when the map fails to initialize. |
| `gmp-fovchange` | `function(fovChangeEvent)` **Arguments:** - `fovChangeEvent: Event optional` This event is fired when the Map3DElement's fov property changes. |
| `gmp-headingchange` | `function(headingChangeEvent)` **Arguments:** - `headingChangeEvent: Event optional` This event is fired when the Map3DElement's heading property changes. |
| `gmp-map-id-error` | `function(mapIdErrorEvent)` **Arguments:** - `mapIdErrorEvent: Event optional` This event is fired when the Map3DElement's mapId property is invalid. |
| `gmp-rangechange` | `function(rangeChangeEvent)` **Arguments:** - `rangeChangeEvent: Event optional` This event is fired when the Map3DElement's range property changes. |
| `gmp-rollchange` | `function(rollChangeEvent)` **Arguments:** - `rollChangeEvent: Event optional` This event is fired when the Map3DElement's roll property changes. |
| `gmp-steadychange` | `function(steadyChangeEvent)` **Arguments:** - `steadyChangeEvent: SteadyChangeEvent optional` This event is fired when the steady state of `Map3DElement` changes. |
| `gmp-tiltchange` | `function(tiltChangeEvent)` **Arguments:** - `tiltChangeEvent: Event optional` This event is fired when the Map3DElement's tilt property changes. |

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


interface
`google.maps.maps3d.Map3DElementOptions`

implemented by `Map3DElement`

Map3DElementOptions object used to define the properties that can be set on a Map3DElement.

| ### Properties ||
|---|---|
| `![Alpha](data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' viewBox='0 0 24 24' fill='%2301579b'%3E%3Cpath d='M5 21q-1.275 0-1.812-1.137-.538-1.138.262-2.113L9 11V5H8q-.425 0-.713-.288Q7 4.425 7 4t.287-.713Q7.575 3 8 3h8q.425 0 .712.287Q17 3.575 17 4t-.288.712Q16.425 5 16 5h-1v6l5.55 6.75q.8.975.262 2.113Q20.275 21 19 21Zm2-3h10l-3.4-4h-3.2Zm-2 1h14l-6-7.3V5h-2v6.7Zm7-7Z'/%3E%3C/svg%3E "Alpha")autofitsCameraAnimation` optional | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). **Type:** `AutofitsCameraAnimation optional` See `![Alpha](data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' viewBox='0 0 24 24' fill='%2301579b'%3E%3Cpath d='M5 21q-1.275 0-1.812-1.137-.538-1.138.262-2.113L9 11V5H8q-.425 0-.713-.288Q7 4.425 7 4t.287-.713Q7.575 3 8 3h8q.425 0 .712.287Q17 3.575 17 4t-.288.712Q16.425 5 16 5h-1v6l5.55 6.75q.8.975.262 2.113Q20.275 21 19 21Zm2-3h10l-3.4-4h-3.2Zm-2 1h14l-6-7.3V5h-2v6.7Zm7-7Z'/%3E%3C/svg%3E "Alpha")Map3DElement.autofitsCameraAnimation`. |
| `bounds` optional | **Type:** `LatLngBounds|LatLngBoundsLiteral optional` See `Map3DElement.bounds`. |
| `cameraPosition` optional | **Type:** `LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional` See `Map3DElement.cameraPosition`. |
| `center` optional | **Type:** `LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional` See `Map3DElement.center`. |
| `colorScheme` optional | **Type:** `ColorScheme optional` See `Map3DElement.colorScheme`. |
| `[defaultUIDisabled](https://developers.google.com/maps/documentation/javascript/reference/3d-map#Map3DElementOptions.defaultUIDisabled)` optional | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Please use `Map3DElement.defaultUIHidden` instead. This property will be removed in a future release. **Type:** `boolean optional` See `Map3DElement.defaultUIDisabled`. |
| `defaultUIHidden` optional | **Type:** `boolean optional` See `Map3DElement.defaultUIHidden`. |
| `description` optional | **Type:** `string optional` See `Map3DElement.description`. |
| `fov` optional | **Type:** `number optional` See `Map3DElement.fov`. |
| `gestureHandling` optional | **Type:** `GestureHandling optional` See `Map3DElement.gestureHandling`. |
| `heading` optional | **Type:** `number optional` See `Map3DElement.heading`. |
| `internalUsageAttributionIds` optional | **Type:** `Iterable<string> optional` See `Map3DElement.internalUsageAttributionIds`. |
| `language` optional | **Type:** `string optional` See `Map3DElement.language`. |
| `mapId` optional | **Type:** `string optional` See `Map3DElement.mapId`. |
| `maxAltitude` optional | **Type:** `number optional` See `Map3DElement.maxAltitude`. |
| `maxHeading` optional | **Type:** `number optional` See `Map3DElement.maxHeading`. |
| `maxMemoryMegabytes` optional | **Type:** `number optional` See `Map3DElement.maxMemoryMegabytes`. |
| `maxTilt` optional | **Type:** `number optional` See `Map3DElement.maxTilt`. |
| `minAltitude` optional | **Type:** `number optional` See `Map3DElement.minAltitude`. |
| `minHeading` optional | **Type:** `number optional` See `Map3DElement.minHeading`. |
| `minTilt` optional | **Type:** `number optional` See `Map3DElement.minTilt`. |
| `mode` optional | **Type:** `MapMode optional` See `Map3DElement.mode`. |
| `qualityMode` optional | **Type:** `QualityMode optional` See `Map3DElement.qualityMode`. |
| `range` optional | **Type:** `number optional` See `Map3DElement.range`. |
| `region` optional | **Type:** `string optional` See `Map3DElement.region`. |
| `roll` optional | **Type:** `number optional` See `Map3DElement.roll`. |
| `tilt` optional | **Type:** `number optional` See `Map3DElement.tilt`. |

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


constants
`google.maps.maps3d.MapMode`

library `"maps3d"`

Specifies a mode the map should be rendered in.

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

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

| ### Constants ||
|---|---|
| `HYBRID` | This map mode displays a transparent layer of major streets on satellite, or photorealistic imagery. |
| `ROADMAP` | This map mode displays a normal street map. |
| `SATELLITE` | This map mode displays satellite, or photorealistic imagery where available. |

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


constants
`google.maps.maps3d.QualityMode`

library `"maps3d"`

Specifies the rendering quality of the 3D map.

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

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

| ### Constants ||
|---|---|
| `FIDELITY` | Renders the map with standard visual detail. |
| `PERFORMANCE` | Renders the map with reduced visual detail to lower memory usage. Useful on memory-constrained devices or when the map shares the page with other memory-intensive content. |

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


constants
`google.maps.maps3d.GestureHandling`

library `"maps3d"`

Specifies how gesture events should be handled on the map element.

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

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

| ### Constants ||
|---|---|
| `AUTO` | This lets the map choose whether to use cooperative or greedy gesture handling. This is the default behavior if not specified. This will cause the map to enter cooperative mode if the map is dominating its scroll parent (usually the host page) to where the user cannot scroll away from the map to other content. |
| `COOPERATIVE` | This forces cooperative mode, where modifier keys or two-finger gestures are required to scroll the map. |
| `GREEDY` | This forces greedy mode, where the host page cannot be scrolled from user events on the map element. |

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


constants
`google.maps.maps3d.AutofitsCameraAnimation`

library `"maps3d"`
**Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel).

Specifies how the camera should behave when it moves to a new position to center itself according to its opted-in child elements.

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

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

| ### Constants ||
|---|---|
| `FLY_TO` | Flies to the new position. |
| `NONE` | Snaps to the new position without an animation. |

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


interface
`google.maps.maps3d.FlyAroundAnimationOptions`

Customization options for the FlyCameraAround Animation.

| ### Properties ||
|---|---|
| `camera` | **Type:** `CameraOptions` The central point at which the camera should look at during the orbit animation. Note that the map heading will change as the camera orbits around this center point. |
| `durationMillis` optional | **Type:** `number optional` The duration of one animation cycle in milliseconds. |
| `repeatCount` optional | **Type:** `number optional` Specifies the number of times an animation should repeat. If the number is zero, the animation will complete immediately after it starts. If Number.Infinity is passed, the animation will repeat forever. |
| `[rounds](https://developers.google.com/maps/documentation/javascript/reference/3d-map#FlyAroundAnimationOptions.rounds)` optional | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Please use `FlyAroundAnimationOptions.repeatCount` instead. **Type:** `number optional` The number of rounds to rotate around the center in the given duration. This controls the overall speed of rotation. Passing a negative number to rounds will cause the camera to rotate in a counter-clockwise direction instead of the default clockwise direction. |

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


interface
`google.maps.maps3d.FlyToAnimationOptions`

Customization options for the FlyCameraTo Animation.

| ### Properties ||
|---|---|
| `endCamera` | **Type:** `CameraOptions` The location at which the camera should point at the end of the animation. |
| `durationMillis` optional | **Type:** `number optional` The duration of the animation in milliseconds. A duration of 0 will teleport the camera straight to the end position. |

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


interface
`google.maps.maps3d.CameraOptions`

CameraOptions object used to define the properties that can be set on a camera object. The camera object can be anything that has a camera position, e.g. a current map state, or a future requested animation state.

| ### Properties ||
|---|---|
| `altitudeMode` optional | **Type:** `AltitudeMode optional` **Default:** `AltitudeMode.ABSOLUTE` An enum specifying how to interpret the altitude value of the given `CameraOptions` object. This reuses the existing `AltitudeMode` enum. |
| `cameraPosition` optional | **Type:** `LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional` See `Map3DElement.cameraPosition`. |
| `center` optional | **Type:** `LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional` See `Map3DElement.center`. |
| `fov` optional | **Type:** `number optional` See `Map3DElement.fov`. |
| `heading` optional | **Type:** `number optional` See `Map3DElement.heading`. |
| `range` optional | **Type:** `number optional` See `Map3DElement.range`. |
| `roll` optional | **Type:** `number optional` See `Map3DElement.roll`. |
| `tilt` optional | **Type:** `number optional` See `Map3DElement.tilt`. |

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


class
`google.maps.maps3d.SteadyChangeEvent`
extends `Event`

library `"maps3d"`

This event is created from monitoring a steady state of `Map3DElement`. This event bubbles up through the DOM tree.

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

| ### Properties ||
|---|---|
| `isSteady` | **Type:** `boolean` Indicates whether Map3DElement is steady (i.e. all rendering for the current scene has completed) or not. |

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


class
`google.maps.maps3d.LocationClickEvent`
extends `Event`

extended by `PlaceClickEvent`

library `"maps3d"`

This event is created from clicking a Map3DElement.

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

| ### Properties ||
|---|---|
| `position` | **Type:** `LatLngAltitude optional` The latitude/longitude/altitude that was below the cursor when the event occurred. Please note, that at coarser levels, less accurate data will be returned. Also, sea floor elevation may be returned for the altitude value when clicking at the water surface from higher camera positions. This event bubbles up through the DOM tree. |

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


class
`google.maps.maps3d.LocationPointerEvent`
extends `Event`

library `"maps3d"`

This event is created when a pointer interaction occurs on an interactive Map3DElement.

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

| ### Properties ||
|---|---|
| `position` | **Type:** `LatLngAltitude optional` The latitude/longitude/altitude that was below the cursor when the event occurred. Please note, that at coarser levels, less accurate data will be returned. Also, sea floor elevation may be returned for the altitude value when clicking at the water surface from higher camera positions. This event bubbles up through the DOM tree. |

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


class
`google.maps.maps3d.PlaceClickEvent`
extends `LocationClickEvent, Event`

library `"maps3d"`

This event is created from clicking on a place icon on a `Map3DElement`. To prevent the default popover from showing up, call the `preventDefault()` method on this event to prevent it being handled by the `Map3DElement`.

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

| ### Properties ||
|---|---|
| `placeId` | **Type:** `string` The place id of the map feature. |

| ### Methods ||
|---|---|
| `fetchPlace` | `fetchPlace()` **Parameters:** None **Return Value:** `Promise<Place>` Fetches a `Place` for this place id. In the resulting `Place` object, the id property will be populated. Additional fields can be subsequently requested via `Place.fetchFields()` subject to normal Places API enablement and billing. The promise is rejected if there was an error fetching the `Place`. |