3D Maps

Map3DElement class

google.maps.maps3d.Map3DElement class

Notice: Available only in the v=alpha channel.

Map3DElement is an HTML interface for the 3D Map view.

Custom element:
<gmp-map-3d center="lat,lng,altitude" default-labels-disabled heading="number" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" 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.

Constructor
Map3DElement	Map3DElement([options]) Parameters:  options:  Map3DElementOptions optional

Properties
bounds	Type:  LatLngBounds|LatLngBoundsLiteral 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.
center	Type:  LatLngAltitude|LatLngAltitudeLiteral optional 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>
defaultLabelsDisabled	Type:  boolean optional Default: false When true, default map labels aren't rendered. HTML attribute: <gmp-map-3d default-labels-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>
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>
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>

Methods
addEventListener	Notice: Available only in the v=beta channel. addEventListener(type, listener[, options]) Parameters:  type:  string A case-sensitive string representing the event type to listen for. listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive. Return Value:  void Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener
removeEventListener	Notice: Available only in the v=beta channel. removeEventListener(type, listener[, options]) Parameters:  type:  string A string which specifies the type of event for which to remove an event listener. listener:  EventListener|EventListenerObject The event listener of the event handler to remove from the event target. options:  boolean|EventListenerOptions optional See options Return Value:  void Removes an event listener previously registered with addEventListener from the target. See removeEventListener

Events
gmp-centerchange	function(centerChangeEvent) Arguments:  centerChangeEvent:  CenterChangeEvent This event is fired when the Map3DElement's center property changes.
gmp-click	function(clickEvent) Arguments:  clickEvent:  ClickEvent This event is fired when the Map3DElement element is clicked.
gmp-headingchange	function(headingChangeEvent) Arguments:  headingChangeEvent:  HeadingChangeEvent This event is fired when the Map3DElement's heading property changes.
gmp-rangechange	function(rangeChangeEvent) Arguments:  rangeChangeEvent:  RangeChangeEvent This event is fired when the Map3DElement's range property changes.
gmp-rollchange	function(rollChangeEvent) Arguments:  rollChangeEvent:  RollChangeEvent This event is fired when the Map3DElement's roll property changes.
gmp-steadychange	function(steadyChangeEvent) Arguments:  steadyChangeEvent:  SteadyChangeEvent This event is fired when the steady state of Map3DElement changes.
gmp-tiltchange	function(tiltChangeEvent) Arguments:  tiltChangeEvent:  TiltChangeEvent This event is fired when the Map3DElement's tilt property changes.

Map3DElementOptions interface

google.maps.maps3d.Map3DElementOptions interface

Notice: Available only in the v=alpha channel.

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

Properties
bounds optional	Type:  LatLngBounds|LatLngBoundsLiteral optional See Map3DElement.bounds.
center optional	Type:  LatLngAltitude|LatLngAltitudeLiteral optional See Map3DElement.center.
defaultLabelsDisabled optional	Type:  boolean optional See Map3DElement.defaultLabelsDisabled.
heading optional	Type:  number optional See Map3DElement.heading.
maxAltitude optional	Type:  number optional See Map3DElement.maxAltitude.
maxHeading optional	Type:  number optional See Map3DElement.maxHeading.
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.
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 class

google.maps.maps3d.SteadyChangeEvent class

Notice: Available only in the v=alpha channel.

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.

ClickEvent class

google.maps.maps3d.ClickEvent class

Notice: Available only in the v=alpha channel.

This event is created from clicking a Map3DElement.

This class extends Event.

Access by calling const {ClickEvent} = 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.

CenterChangeEvent class

google.maps.maps3d.CenterChangeEvent class

Notice: Available only in the v=alpha channel.

This event is created from monitoring center change on Map3DElement. This event bubbles up through the DOM tree.

This class extends Event.

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

HeadingChangeEvent class

google.maps.maps3d.HeadingChangeEvent class

Notice: Available only in the v=alpha channel.

This event is created from monitoring heading change on Map3DElement. This event bubbles up through the DOM tree.

This class extends Event.

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

RangeChangeEvent class

google.maps.maps3d.RangeChangeEvent class

Notice: Available only in the v=alpha channel.

This event is created from monitoring range change on Map3DElement. This event bubbles up through the DOM tree.

This class extends Event.

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

RollChangeEvent class

google.maps.maps3d.RollChangeEvent class

Notice: Available only in the v=alpha channel.

This event is created from monitoring roll change on Map3DElement. This event bubbles up through the DOM tree.

This class extends Event.

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

TiltChangeEvent class

google.maps.maps3d.TiltChangeEvent class

Notice: Available only in the v=alpha channel.

This event is created from monitoring tilt change on Map3DElement. This event bubbles up through the DOM tree.

This class extends Event.

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

Polyline3DElement class

google.maps.maps3d.Polyline3DElement class

Notice: Available only in the v=alpha channel.

A 3D polyline is a linear overlay of connected line segments on a 3D map.

Custom element:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-opacity="number" outer-width="number" stroke-color="string" stroke-opacity="number" stroke-width="number" z-index="number"></gmp-polyline-3d>

This class extends HTMLElement.

This class implements Polyline3DElementOptions.

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

Constructor
Polyline3DElement	Polyline3DElement([options]) Parameters:  options:  Polyline3DElementOptions optional

Properties
altitudeMode	Type:  AltitudeMode optional Default: AltitudeMode.ABSOLUTE Specifies how altitude components in the coordinates are interpreted. HTML attribute: <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d> <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d> <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d> <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
coordinates	Type:  Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional.
drawsOccludedSegments	Type:  boolean optional Default: false Specifies whether parts of the polyline which could be occluded are drawn or not. Polylines can be occluded by map geometry (e.g. buildings). HTML attribute: <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded	Type:  boolean optional Default: false Specifies whether to connect the polyline to the ground. To extrude a polyline, the altitudeMode must be either RELATIVE_TO_GROUND or ABSOLUTE. HTML attribute: <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic	Type:  boolean optional Default: false When true, edges of the polyline are interpreted as geodesic and will follow the curvature of the Earth. When false, edges of the polyline are rendered as straight lines in screen space. HTML attribute: <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor	Type:  string optional The outer color. All CSS3 colors are supported. HTML attribute: <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerOpacity	Type:  number optional The outer opacity between 0.0 and 1.0. HTML attribute: <gmp-polyline-3d outer-opacity="number"></gmp-polyline-3d>
outerWidth	Type:  number optional The outer width is between 0.0 and 1.0. This is a percentage of the strokeWidth. HTML attribute: <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
strokeColor	Type:  string optional The stroke color. All CSS3 colors are supported. HTML attribute: <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeOpacity	Type:  number optional The stroke opacity between 0.0 and 1.0. HTML attribute: <gmp-polyline-3d stroke-opacity="number"></gmp-polyline-3d>
strokeWidth	Type:  number optional The stroke width in pixels. HTML attribute: <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex	Type:  number optional The zIndex compared to other polys. HTML attribute: <gmp-polyline-3d z-index="number"></gmp-polyline-3d>

Methods
addEventListener	Notice: Available only in the v=beta channel. addEventListener(type, listener[, options]) Parameters:  type:  string A case-sensitive string representing the event type to listen for. listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive. Return Value:  void Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener
removeEventListener	Notice: Available only in the v=beta channel. removeEventListener(type, listener[, options]) Parameters:  type:  string A string which specifies the type of event for which to remove an event listener. listener:  EventListener|EventListenerObject The event listener of the event handler to remove from the event target. options:  boolean|EventListenerOptions optional See options Return Value:  void Removes an event listener previously registered with addEventListener from the target. See removeEventListener

Polyline3DElementOptions interface

google.maps.maps3d.Polyline3DElementOptions interface

Notice: Available only in the v=alpha channel.

Polyline3DElementOptions object used to define the properties that can be set on a Polyline3DElement.

Properties
altitudeMode optional	Type:  AltitudeMode optional Default: AltitudeMode.ABSOLUTE See Polyline3DElement.altitudeMode.
coordinates optional	Type:  Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional See Polyline3DElement.coordinates.
drawsOccludedSegments optional	Type:  boolean optional Default: false See Polyline3DElement.drawsOccludedSegments.
extruded optional	Type:  boolean optional Default: false See Polyline3DElement.extruded.
geodesic optional	Type:  boolean optional Default: false See Polyline3DElement.geodesic.
outerColor optional	Type:  string optional See Polyline3DElement.outerColor.
outerOpacity optional	Type:  number optional See Polyline3DElement.outerOpacity.
outerWidth optional	Type:  number optional See Polyline3DElement.outerWidth.
strokeColor optional	Type:  string optional See Polyline3DElement.strokeColor.
strokeOpacity optional	Type:  number optional See Polyline3DElement.strokeOpacity.
strokeWidth optional	Type:  number optional See Polyline3DElement.strokeWidth.
zIndex optional	Type:  number optional See Polyline3DElement.zIndex.

Polygon3DElement class

google.maps.maps3d.Polygon3DElement class

Notice: Available only in the v=alpha channel.

A 3D polygon (like a 3D polyline) defines a series of connected coordinates in an ordered sequence. Additionally, polygons form a closed loop and define a filled region.

Custom element:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" fill-opacity="number" geodesic stroke-color="string" stroke-opacity="number" stroke-width="number" z-index="number"></gmp-polygon-3d>

This class extends HTMLElement.

This class implements Polygon3DElementOptions.

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

Constructor
Polygon3DElement	Polygon3DElement([options]) Parameters:  options:  Polygon3DElementOptions optional

Properties
altitudeMode	Type:  AltitudeMode optional Default: AltitudeMode.ABSOLUTE Specifies how altitude components in the coordinates are interpreted. HTML attribute: <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d> <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d> <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d> <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments	Type:  boolean optional Default: false Specifies whether parts of the polygon which could be occluded are drawn or not. Polygons can be occluded by map geometry (e.g. buildings). HTML attribute: <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded	Type:  boolean optional Default: false Specifies whether to connect the polygon to the ground. To extrude a polygon, the altitudeMode must be either RELATIVE_TO_GROUND or ABSOLUTE. HTML attribute: <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor	Type:  string optional The fill color. All CSS3 colors are supported. HTML attribute: <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
fillOpacity	Type:  number optional The fill opacity between 0.0 and 1.0. HTML attribute: <gmp-polygon-3d fill-opacity="number"></gmp-polygon-3d>
geodesic	Type:  boolean optional Default: false When true, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When false, edges of the polygon are rendered as straight lines in screen space. HTML attribute: <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerCoordinates	Type:  Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths, which create multiple cut-outs inside the polygon.
outerCoordinates	Type:  Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional The ordered sequence of coordinates that designates a closed loop. Altitude is ignored in certain modes and thus optional.
strokeColor	Type:  string optional The stroke color. All CSS3 colors are supported. HTML attribute: <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeOpacity	Type:  number optional The stroke opacity between 0.0 and 1.0. HTML attribute: <gmp-polygon-3d stroke-opacity="number"></gmp-polygon-3d>
strokeWidth	Type:  number optional The stroke width in pixels. HTML attribute: <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex	Type:  number optional The zIndex compared to other polys. HTML attribute: <gmp-polygon-3d z-index="number"></gmp-polygon-3d>

Methods
addEventListener	Notice: Available only in the v=beta channel. addEventListener(type, listener[, options]) Parameters:  type:  string A case-sensitive string representing the event type to listen for. listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive. Return Value:  void Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener
removeEventListener	Notice: Available only in the v=beta channel. removeEventListener(type, listener[, options]) Parameters:  type:  string A string which specifies the type of event for which to remove an event listener. listener:  EventListener|EventListenerObject The event listener of the event handler to remove from the event target. options:  boolean|EventListenerOptions optional See options Return Value:  void Removes an event listener previously registered with addEventListener from the target. See removeEventListener

Polygon3DElementOptions interface

google.maps.maps3d.Polygon3DElementOptions interface

Notice: Available only in the v=alpha channel.

Polygon3DElementOptions object used to define the properties that can be set on a Polygon3DElement.

Properties
altitudeMode optional	Type:  AltitudeMode optional Default: AltitudeMode.ABSOLUTE See Polygon3DElement.altitudeMode.
drawsOccludedSegments optional	Type:  boolean optional Default: false See Polygon3DElement.drawsOccludedSegments.
extruded optional	Type:  boolean optional Default: false See Polygon3DElement.extruded.
fillColor optional	Type:  string optional See Polygon3DElement.fillColor.
fillOpacity optional	Type:  number optional See Polygon3DElement.fillOpacity.
geodesic optional	Type:  boolean optional Default: false See Polygon3DElement.geodesic.
innerCoordinates optional	Type:  Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral>|Iterable<LatLngLiteral>> optional See Polygon3DElement.innerCoordinates.
outerCoordinates optional	Type:  Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional See Polygon3DElement.outerCoordinates.
strokeColor optional	Type:  string optional See Polygon3DElement.strokeColor.
strokeOpacity optional	Type:  number optional See Polygon3DElement.strokeOpacity.
strokeWidth optional	Type:  number optional See Polygon3DElement.strokeWidth.
zIndex optional	Type:  number optional See Polygon3DElement.zIndex.

AltitudeMode constants

google.maps.maps3d.AltitudeMode constants

Notice: Available only in the v=alpha channel.

Specifies how altitude components in the coordinates are interpreted.

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

Constants
ABSOLUTE	Allows to express objects relative to the average mean sea level. That also means that if the terrain level of detail changes underneath the object, its absolute position will remain the same.
CLAMP_TO_GROUND	Allows to express objects placed on the ground. They will remain at ground level following the terrain regardless of what altitude is provided. If the object is positioned over a major body of water, it will be placed at sea level.
RELATIVE_TO_GROUND	Allows to express objects relative to the ground surface. If the terrain level of detail changes, the position of the object will remain constant relative to the ground. When over water, the altitude will be interpreted as a value in meters above sea level.
RELATIVE_TO_MESH	Allows to express objects relative to the highest of ground+building+water surface. When over water, this will be water surface; when over terrain, this will be the building surface (if present) or ground surface (if no buildings).