Draw on the map

Marker3DElement class

google.maps.maps3d.Marker3DElement class

Shows a position on a 3D map. Note that the position must be set for the Marker3DElement to display.

Custom element:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"></gmp-marker-3d>

This class extends HTMLElement.

This class implements Marker3DElementOptions.

Access by calling const {Marker3DElement} = await google.maps.importLibrary("maps3d").
See Libraries in the Maps JavaScript API.
Marker3DElement
Marker3DElement([options])
Parameters: 
Creates an Marker3DElement with the options specified.
altitudeMode
Type:  AltitudeMode optional
Default: AltitudeMode.CLAMP_TO_GROUND
Specifies how the altitude component of the position is interpreted.
HTML attribute:
  • <gmp-marker-3d altitude-mode="absolute"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="clamp-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-mesh"></gmp-marker-3d>
collisionBehavior
Type:  CollisionBehavior optional
Default: CollisionBehavior.REQUIRED
An enumeration specifying how a Marker3DElement should behave when it collides with another Marker3DElement or with the basemap labels.
HTML attribute:
  • <gmp-marker-3d collision-behavior="required"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="required-and-hides-optional"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="optional-and-hides-lower-priority"></gmp-marker-3d>
drawsWhenOccluded
Type:  boolean optional
Default: false
Specifies whether this marker should be drawn or not when it's occluded. The marker can be occluded by map geometry (e.g. buildings).
HTML attribute:
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
Type:  boolean optional
Default: false
Specifies whether to connect the marker to the ground. To extrude a marker, the altitudeMode must be either RELATIVE_TO_GROUND or ABSOLUTE.
HTML attribute:
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
Type:  string optional
Text to be displayed by this marker.
HTML attribute:
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
The location of the tip of the marker. Altitude is ignored in certain modes and thus optional.
HTML attribute:
  • <gmp-marker-3d position="lat,lng"></gmp-marker-3d>
  • <gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>
sizePreserved
Type:  boolean optional
Default: false
Specifies whether this marker should preserve its size or not regardless of distance from camera. By default, the marker is scaled based on distance from camera/tilt.
HTML attribute:
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
Type:  number optional
The zIndex compared to other markers.
HTML attribute:
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
Any custom elements directly added to the Marker3DElement will be slotted, however only elements of HTMLImageElement, SVGElement and PinElement types will be used for drawing markers, other elements will be ignored.
HTMLImageElement and SVGElement must be wrapped in <template> element before assigning to the Marker3DElement's default slot.

Images and SVGs are currently rasterized before they are rendered in the 3D scene, so custom HTML embedded into SVG or CSS classes added to images won't be applied and might not be reflected when markers are displayed on the screen.
addEventListener
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
removeEventListener(type, listener[, options])
Parameters: 
Return Value:  void
Removes an event listener previously registered with addEventListener from the target. See removeEventListener.

Marker3DElementOptions interface

google.maps.maps3d.Marker3DElementOptions interface

Marker3DElementOptions object used to define the properties that can be set on a Marker3DElement.
altitudeMode optional
Type:  AltitudeMode optional
See Marker3DElement.altitudeMode.
collisionBehavior optional
Type:  CollisionBehavior optional
See Marker3DElement.collisionBehavior.
drawsWhenOccluded optional
Type:  boolean optional
See Marker3DElement.drawsWhenOccluded.
extruded optional
Type:  boolean optional
See Marker3DElement.extruded.
label optional
Type:  string optional
See Marker3DElement.label.
position optional
See Marker3DElement.position.
sizePreserved optional
Type:  boolean optional
See Marker3DElement.sizePreserved.
zIndex optional
Type:  number optional
See Marker3DElement.zIndex.

Marker3DInteractiveElement class

google.maps.maps3d.Marker3DInteractiveElement class

Shows a position on a 3D map. Note that the position must be set for the Marker3DInteractiveElement to display. Unlike Marker3DElement, Marker3DInteractiveElement receives a gmp-click event.

Custom element:
<gmp-marker-3d-interactive gmp-popover-target="popover-id" title="string"></gmp-marker-3d-interactive>

This class extends Marker3DElement.

This class implements Marker3DInteractiveElementOptions.

Access by calling const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d").
See Libraries in the Maps JavaScript API.
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
Parameters: 
Creates an Marker3DInteractiveElement with the options specified.
gmpPopoverTargetElement
Type:  PopoverElement optional
When set, the popover element will be open on this marker's click.
HTML attribute:
  • <gmp-marker-3d-interactive gmp-popover-target="popover-id"></gmp-marker-3d-interactive>
title
Type:  string
Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the Marker3DInteractiveElement with the provided value.
HTML attribute:
  • <gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>
Inherited: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex
default
Any custom elements directly added to the Marker3DInteractiveElement will be slotted, however only elements of PinElement's type will be used for drawing markers, other elements will be ignored.
addEventListener
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
removeEventListener(type, listener[, options])
Parameters: 
Return Value:  void
Removes an event listener previously registered with addEventListener from the target. See removeEventListener.
gmp-click
function(clickEvent)
Arguments: 
This event is fired when the Marker3DInteractiveElement element is clicked.

Marker3DInteractiveElementOptions interface

google.maps.maps3d.Marker3DInteractiveElementOptions interface

Marker3DInteractiveElementOptions object used to define the properties that can be set on a Marker3DInteractiveElement.

This interface extends Marker3DElementOptions.

gmpPopoverTargetElement optional
Type:  PopoverElement optional
See Marker3DInteractiveElement.gmpPopoverTargetElement.
title optional
Type:  string optional
See Marker3DInteractiveElement.title.
Inherited: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Model3DElement class

google.maps.maps3d.Model3DElement class

A 3D model which allows the rendering of gLTF models. Note that the position and the src must be set for the Model3DElement to display.

Core properties of the gLTF PBR should be supported. No extensions or extension properties are currently supported.

Custom element:
<gmp-model-3d altitude-mode="absolute" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"></gmp-model-3d>

This class extends HTMLElement.

This class implements Model3DElementOptions.

Access by calling const {Model3DElement} = await google.maps.importLibrary("maps3d").
See Libraries in the Maps JavaScript API.
Model3DElement
Model3DElement([options])
Parameters: 
Creates an Model3DElement with the options specified.
altitudeMode
Type:  AltitudeMode optional
Default: AltitudeMode.CLAMP_TO_GROUND
Specifies how altitude in the position is interpreted.
HTML attribute:
  • <gmp-model-3d altitude-mode="absolute"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="clamp-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-mesh"></gmp-model-3d>
orientation
Describes rotation of a 3D model's coordinate system to position the model on the 3D Map.

Rotations are applied to the model in the following order: roll, tilt and then heading.
HTML attribute:
  • <gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>
position
Sets the Model3DElement's position. Altitude is ignored in certain modes and thus optional.
HTML attribute:
  • <gmp-model-3d position="lat,lng"></gmp-model-3d>
  • <gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>
scale
Type:  number|Vector3D|Vector3DLiteral optional
Default: 1
Scales the model along the x, y, and z axes in the model's coordinate space.
HTML attribute:
  • <gmp-model-3d scale="number"></gmp-model-3d>
  • <gmp-model-3d scale="x,y,z"></gmp-model-3d>
src
Type:  string|URL optional
Specifies the url of the 3D model. At this time, only models in the .glb format are supported.

Any relative HTTP urls will be resolved to their corresponding absolute ones.

Please note that If you're hosting your .glb model files on a different website or server than your main application, make sure to set up the correct CORS HTTP headers. This allows your application to securely access the model files from the other domain.
HTML attribute:
  • <gmp-model-3d src="url"></gmp-model-3d>
addEventListener
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
removeEventListener(type, listener[, options])
Parameters: 
Return Value:  void
Removes an event listener previously registered with addEventListener from the target. See removeEventListener.

Model3DElementOptions interface

google.maps.maps3d.Model3DElementOptions interface

Model3DElementOptions object used to define the properties that can be set on a Model3DElement.
altitudeMode optional
Type:  AltitudeMode optional
See Model3DElement.altitudeMode.
orientation optional
See Model3DElement.orientation.
position optional
See Model3DElement.position.
scale optional
Type:  number|Vector3D|Vector3DLiteral optional
See Model3DElement.scale.
src optional
Type:  string|URL optional
See Model3DElement.src.

Model3DInteractiveElement class

google.maps.maps3d.Model3DInteractiveElement class

A 3D model which allows the rendering of gLTF models. Note that the position and the src must be set for the Model3DElement to display.

Core properties of the gLTF PBR should be supported. No extensions or extension properties are currently supported.

Unlike Model3DElement, Model3DInteractiveElement receives a gmp-click event.

Custom element:
<gmp-model-3d-interactive></gmp-model-3d-interactive>

This class extends Model3DElement.

This class implements Model3DInteractiveElementOptions.

Access by calling const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d").
See Libraries in the Maps JavaScript API.
Model3DInteractiveElement
Model3DInteractiveElement([options])
Parameters: 
Creates a Model3DInteractiveElement with the options specified.
Inherited: altitudeMode, orientation, position, scale, src
addEventListener
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
removeEventListener(type, listener[, options])
Parameters: 
Return Value:  void
Removes an event listener previously registered with addEventListener from the target. See removeEventListener.
gmp-click
function(clickEvent)
Arguments: 
This event is fired when the Model3DInteractiveElement element is clicked.

Model3DInteractiveElementOptions interface

google.maps.maps3d.Model3DInteractiveElementOptions interface

Model3DInteractiveElementOptions object used to define the properties that can be set on a Model3DInteractiveElement.

This interface extends Model3DElementOptions.

Inherited: altitudeMode, orientation, position, scale, src

Polyline3DElement class

google.maps.maps3d.Polyline3DElement class

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-width="number" path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" 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.
Polyline3DElement
Polyline3DElement([options])
Parameters: 
Creates an Polyline3DElement with the options specified.
altitudeMode
Type:  AltitudeMode optional
Default: AltitudeMode.CLAMP_TO_GROUND
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>
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>
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>
path
The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional.
HTML attribute:
  • <gmp-polyline-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></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>
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>
coordinates
The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional.
addEventListener
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
removeEventListener(type, listener[, options])
Parameters: 
Return Value:  void
Removes an event listener previously registered with addEventListener from the target. See removeEventListener.

Polyline3DElementOptions interface

google.maps.maps3d.Polyline3DElementOptions interface

Polyline3DElementOptions object used to define the properties that can be set on a Polyline3DElement.
altitudeMode optional
Type:  AltitudeMode optional
See Polyline3DElement.altitudeMode.
coordinates optional
See Polyline3DElement.coordinates.
drawsOccludedSegments optional
Type:  boolean optional
See Polyline3DElement.drawsOccludedSegments.
extruded optional
Type:  boolean optional
See Polyline3DElement.extruded.
geodesic optional
Type:  boolean optional
See Polyline3DElement.geodesic.
outerColor optional
Type:  string optional
See Polyline3DElement.outerColor.
outerWidth optional
Type:  number optional
See Polyline3DElement.outerWidth.
strokeColor optional
Type:  string optional
See Polyline3DElement.strokeColor.
strokeWidth optional
Type:  number optional
See Polyline3DElement.strokeWidth.
zIndex optional
Type:  number optional
See Polyline3DElement.zIndex.

Polyline3DInteractiveElement class

google.maps.maps3d.Polyline3DInteractiveElement class

A 3D polyline is a linear overlay of connected line segments on a 3D map. Unlike Polyline3DElement, Polyline3DInteractiveElement receives a gmp-click event.

Custom element:
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

This class extends Polyline3DElement.

This class implements Polyline3DInteractiveElementOptions.

Access by calling const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d").
See Libraries in the Maps JavaScript API.
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Parameters: 
Creates a Polyline3DInteractiveElement with the options specified.
Inherited: altitudeMode, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, strokeColor, strokeWidth, zIndex, coordinates
addEventListener
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
removeEventListener(type, listener[, options])
Parameters: 
Return Value:  void
Removes an event listener previously registered with addEventListener from the target. See removeEventListener.
gmp-click
function(clickEvent)
Arguments: 
  • clickEvent:  LocationClickEvent The event object will contain the lat-lng-altitude location of the click.
This event is fired when the Polyline3DInteractiveElement element is clicked.

Polyline3DInteractiveElementOptions interface

google.maps.maps3d.Polyline3DInteractiveElementOptions interface

Polyline3DInteractiveElementOptions object used to define the properties that can be set on a Polyline3DInteractiveElement.

This interface extends Polyline3DElementOptions.

Inherited: altitudeMode, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, strokeColor, strokeWidth, zIndex

Polygon3DElement class

google.maps.maps3d.Polygon3DElement class

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" geodesic path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" 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.
Polygon3DElement
Polygon3DElement([options])
Parameters: 
Creates an Polygon3DElement with the options specified.
altitudeMode
Type:  AltitudeMode optional
Default: AltitudeMode.CLAMP_TO_GROUND
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>
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>
innerPaths
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.
path
The ordered sequence of coordinates that designates a closed loop. Altitude is ignored in certain modes and thus optional.
HTML attribute:
  • <gmp-polygon-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polygon-3d>
strokeColor
Type:  string optional
The stroke color. All CSS3 colors are supported.
HTML attribute:
  • <gmp-polygon-3d stroke-color="string"></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>
outerCoordinates
The ordered sequence of coordinates that designates a closed loop. Altitude is ignored in certain modes and thus optional.
innerCoordinates
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.
addEventListener
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
removeEventListener(type, listener[, options])
Parameters: 
Return Value:  void
Removes an event listener previously registered with addEventListener from the target. See removeEventListener.

Polygon3DElementOptions interface

google.maps.maps3d.Polygon3DElementOptions interface

Polygon3DElementOptions object used to define the properties that can be set on a Polygon3DElement.
altitudeMode optional
Type:  AltitudeMode optional
See Polygon3DElement.altitudeMode.
drawsOccludedSegments optional
Type:  boolean optional
See Polygon3DElement.drawsOccludedSegments.
extruded optional
Type:  boolean optional
See Polygon3DElement.extruded.
fillColor optional
Type:  string optional
See Polygon3DElement.fillColor.
geodesic optional
Type:  boolean optional
See Polygon3DElement.geodesic.
innerCoordinates optional
See Polygon3DElement.innerCoordinates.
outerCoordinates optional
See Polygon3DElement.outerCoordinates.
strokeColor optional
Type:  string optional
See Polygon3DElement.strokeColor.
strokeWidth optional
Type:  number optional
See Polygon3DElement.strokeWidth.
zIndex optional
Type:  number optional
See Polygon3DElement.zIndex.

Polygon3DInteractiveElement class

google.maps.maps3d.Polygon3DInteractiveElement class

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. Unlike Polygon3DElement, Polygon3DInteractiveElement receives a gmp-click event.

Custom element:
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

This class extends Polygon3DElement.

This class implements Polygon3DInteractiveElementOptions.

Access by calling const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d").
See Libraries in the Maps JavaScript API.
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Parameters: 
Creates a Polygon3DInteractiveElement with the options specified.
Inherited: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerPaths, path, strokeColor, strokeWidth, zIndex, outerCoordinates, innerCoordinates
addEventListener
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
removeEventListener(type, listener[, options])
Parameters: 
Return Value:  void
Removes an event listener previously registered with addEventListener from the target. See removeEventListener.
gmp-click
function(clickEvent)
Arguments: 
  • clickEvent:  LocationClickEvent The event object will contain the lat-lng-altitude location of the click.
This event is fired when the Polygon3DInteractiveElement element is clicked.

Polygon3DInteractiveElementOptions interface

google.maps.maps3d.Polygon3DInteractiveElementOptions interface

Polygon3DInteractiveElementOptions object used to define the properties that can be set on a Polygon3DInteractiveElement.

This interface extends Polygon3DElementOptions.

Inherited: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, outerCoordinates, strokeColor, strokeWidth, zIndex

PopoverElement class

google.maps.maps3d.PopoverElement class

A custom HTML element that renders a popover. It looks like a bubble and is often connected to a marker.

Custom element:
<gmp-popover altitude-mode="absolute" light-dismiss-disabled open position-anchor="lat,lng"></gmp-popover>

This class extends HTMLElement.

This class implements PopoverElementOptions.

Access by calling const {PopoverElement} = await google.maps.importLibrary("maps3d").
See Libraries in the Maps JavaScript API.
PopoverElement
PopoverElement([options])
Parameters: 
altitudeMode
Type:  AltitudeMode optional
Default: AltitudeMode.CLAMP_TO_GROUND
Specifies how the altitude component of the position is interpreted.
HTML attribute:
  • <gmp-popover altitude-mode="absolute"></gmp-popover>
  • <gmp-popover altitude-mode="clamp-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-mesh"></gmp-popover>
lightDismissDisabled
Type:  boolean optional
Default: false
Specifies whether this popover should be "light dismissed" or not. The "light dismiss" behavior is similar to setting the popover="auto" attribute which is part of the browser Popover API.
HTML attribute:
  • <gmp-popover light-dismiss-disabled></gmp-popover>
open
Type:  boolean optional
Default: false
Specifies whether this popover should be open or not.
HTML attribute:
  • <gmp-popover open></gmp-popover>
positionAnchor
The position at which to display this popover. If the popover is anchored to an interactive marker, the marker's position will be used instead.
HTML attribute:
  • <gmp-popover position-anchor="lat,lng"></gmp-popover>
  • <gmp-popover position-anchor="lat,lng,altitude"></gmp-popover>
  • <gmp-popover position-anchor="marker-id"></gmp-popover>
default
Places the slotted content in the main section of the popover.
header
Places the slotted content in the heading section of the popover.
--gmp-popover-max-width
Maximum width of the popover, regardless of content's width.
--gmp-popover-min-width
Minimum width of the popover, regardless of content's width. When using this property, it is strongly recommended to set it to a value less than the width of the map (in pixels).
--gmp-popover-pixel-offset-x
The offset on the x-axis, in pixels, of the tip of the popover from the point on the map at whose geographical coordinates the popover is anchored.
--gmp-popover-pixel-offset-y
The offset on the y-axis, in pixels, of the tip of the popover from the point on the map at whose geographical coordinates the popover is anchored.
color-scheme
Indicates which color scheme this popover can be rendered in. See color-scheme documentation for more details. If not specified, it defaults to the user's color scheme preferences.
addEventListener
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
removeEventListener(type, listener[, options])
Parameters: 
Return Value:  void
Removes an event listener previously registered with addEventListener from the target. See removeEventListener.

PopoverElementOptions interface

google.maps.maps3d.PopoverElementOptions interface

PopoverElementOptions object used to define the properties that can be set on a PopoverElement.
altitudeMode optional
Type:  AltitudeMode optional
See PopoverElement.altitudeMode.
lightDismissDisabled optional
Type:  boolean optional
See PopoverElement.lightDismissDisabled.
open optional
Type:  boolean optional
See PopoverElement.open.
positionAnchor optional
See PopoverElement.positionAnchor.

AltitudeMode constants

google.maps.maps3d.AltitudeMode constants

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