3D Maps

Map3DElement class

google.maps.maps3d.Map3DElement class

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

Custom element:
<gmp-map-3d camera-position="lat,lng,altitude" center="lat,lng,altitude" default-ui-hidden description="string" fov="number" gesture-handling="auto" heading="number" internal-usage-attribution-ids="id1 id2" map-id="string" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" mode="hybrid" range="number" roll="number" tilt="number" default-ui-disabled></gmp-map-3d>

This class extends HTMLElement.

This class implements Map3DElementOptions.

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

Constructor

Map3DElement

Map3DElement([options])

Parameters:

Properties

bounds

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.

BetacameraPosition

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:

  • <gmp-map-3d camera-position="lat,lng,altitude"></gmp-map-3d>
center

The center of the map given as a LatLngAltitude, where altitude is in meters above ground 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: 63170000}. 63170000 meters is a maximum allowed altitude (Earth radius multiplied by 10).

HTML attribute:

  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultUIHidden

Type:  boolean optional

Default: false

When true, all default UI buttons are hidden.

HTML attribute:

  • <gmp-map-3d default-ui-hidden></gmp-map-3d>
description

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:

  • <gmp-map-3d description="string"></gmp-map-3d>
Betafov

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:

  • <gmp-map-3d fov="number"></gmp-map-3d>
gestureHandling

Type:  GestureHandling optional

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:

  • <gmp-map-3d gesture-handling="auto"></gmp-map-3d>
  • <gmp-map-3d gesture-handling="cooperative"></gmp-map-3d>
  • <gmp-map-3d gesture-handling="greedy"></gmp-map-3d>
heading

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:

  • <gmp-map-3d heading="number"></gmp-map-3d>
internalUsageAttributionIds

Type:  Iterable<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:

  • <gmp-map-3d internal-usage-attribution-ids="id1 id2"></gmp-map-3d>
language

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

Type:  string optional

Specifies a map ID which will be used to fetch cloud-based map style for the map. This should not be set after the map has been initialized. Therefore we ensure the mapId is only set during initialization and do not publish this attribute to public-facing channels.

HTML attribute:

  • <gmp-map-3d map-id="string"></gmp-map-3d>
maxAltitude

Type:  number optional

The maximum altitude above the ground which will be displayed on the map. A valid value is between 0 and 63170000 meters (Earth radius multiplied by 10).

HTML attribute:

  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading

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:

  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt

Type:  number optional

The maximum angle of incidence of the map. A valid value is between 0 and 90 degrees.

HTML attribute:

  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude

Type:  number optional

The minimum altitude above the ground which will be displayed on the map. A valid value is between 0 and 63170000 meters (Earth radius multiplied by 10).

HTML attribute:

  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading

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:

  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt

Type:  number optional

The minimum angle of incidence of the map. A valid value is between 0 and 90 degrees.

HTML attribute:

  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
mode

Type:  MapMode optional

Specifies a mode the map should be rendered in. If not set, the map won't be rendered.

HTML attribute:

  • <gmp-map-3d mode="hybrid"></gmp-map-3d>
  • <gmp-map-3d mode="satellite"></gmp-map-3d>
range

Type:  number optional

The distance from camera to the center of the map, in meters.

HTML attribute:

  • <gmp-map-3d range="number"></gmp-map-3d>
region

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

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:

  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt

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:

  • <gmp-map-3d tilt="number"></gmp-map-3d>
defaultUIDisabled

Type:  boolean optional

Default: false

When true, all default UI buttons are disabled. Does not disable the keyboard and gesture controls.

HTML attribute:

  • <gmp-map-3d default-ui-disabled></gmp-map-3d>

Methods

addEventListener

addEventListener(type, listener[, options])

Parameters:

  • typestring A case-sensitive string representing the event type to listen for.
  • listenerEventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
  • optionsboolean|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.

flyCameraAround

flyCameraAround(options)

Parameters:

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:

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

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

Return Value:  void

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

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:

  • animationEndEventEvent

This event is fired when the fly animation ends. This event bubbles up through the DOM tree.

Betagmp-camerapositionchange

function(cameraPositionChangeEvent)

Arguments:

  • cameraPositionChangeEventEvent

This event is fired when the Map3DElement's cameraPosition property changes.

gmp-centerchange

function(centerChangeEvent)

Arguments:

  • centerChangeEventEvent

This event is fired when the Map3DElement's center property changes.

gmp-click

function(clickEvent)

Arguments:

This event is fired when the Map3DElement element is clicked.

gmp-error

function(mapInitializationErrorEvent)

Arguments:

  • mapInitializationErrorEventEvent

This event is fired when the map fails to initialize.

Betagmp-fovchange

function(fovChangeEvent)

Arguments:

  • fovChangeEventEvent

This event is fired when the Map3DElement's fov property changes.

gmp-headingchange

function(headingChangeEvent)

Arguments:

  • headingChangeEventEvent

This event is fired when the Map3DElement's heading property changes.

gmp-map-id-error

function(mapIdErrorEvent)

Arguments:

  • mapIdErrorEventEvent

This event is fired when the Map3DElement's mapId property is invalid.

gmp-rangechange

function(rangeChangeEvent)

Arguments:

  • rangeChangeEventEvent

This event is fired when the Map3DElement's range property changes.

gmp-rollchange

function(rollChangeEvent)

Arguments:

  • rollChangeEventEvent

This event is fired when the Map3DElement's roll property changes.

gmp-steadychange

function(steadyChangeEvent)

Arguments:

This event is fired when the steady state of Map3DElement changes.

gmp-tiltchange

function(tiltChangeEvent)

Arguments:

  • tiltChangeEventEvent

This event is fired when the Map3DElement's tilt property changes.

MapMode constants

google.maps.maps3d.MapMode constants

Specifies a mode the map should be rendered in.

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

Constants

HYBRID This map mode displays a transparent layer of major streets on satellite, or photorealistic imagery.
SATELLITE This map mode displays satellite, or photorealistic imagery where available.

GestureHandling constants

google.maps.maps3d.GestureHandling constants

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

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

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.

FlyAroundAnimationOptions interface

google.maps.maps3d.FlyAroundAnimationOptions interface

Customization options for the FlyCameraAround Animation.

Properties

camera

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.

rounds optional

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 interface

google.maps.maps3d.FlyToAnimationOptions interface

Customization options for the FlyCameraTo Animation.

Properties

endCamera

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.

SteadyChangeEvent class

google.maps.maps3d.SteadyChangeEvent class

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

This class extends Event.

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

Properties

isSteady

Type:  boolean

Indicates whether Map3DElement is steady (i.e. all rendering for the current scene has completed) or not.

LocationClickEvent class

google.maps.maps3d.LocationClickEvent class

This event is created from clicking a Map3DElement.

This class extends Event.

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

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 class

google.maps.maps3d.PlaceClickEvent class

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.

This class extends LocationClickEvent.

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

Properties

placeId

Type:  string

The place id of the map feature.

Inherited: position

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.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2026-03-02 UTC.