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 center="lat,lng,altitude" default-ui-disabled heading="number" internal-usage-attribution-ids="id1 id2" 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"></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.

Map3DElement
Map3DElement([options])
Parameters: 
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.
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>
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>
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>
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>
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>
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, making the given number of rounds in that time.

By default, the camera orbits clockwise. If given a negative number for rounds, the camera will orbit in a counter-clockwise direction instead.

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

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: 
  • typestring A string which specifies the type of event for which to remove an event listener.
  • listenerEventListener|EventListenerObject The event listener of the event handler to remove from the event target.
  • optionsboolean|EventListenerOptions optional See