Draw on the map

MarkerElement class

google.maps.maps3d.MarkerElement class
extends HTMLElement
implements MarkerElementOptions

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

Custom element:
<gmp-marker altitude-mode="absolute" anchor-left="string" anchor-top="string" collision-behavior="required" collision-priority="number" position="lat,lng" title="string"></gmp-marker>

const {MarkerElement} = await google.maps.importLibrary("maps3d")
MarkerElement
MarkerElement([options])
Parameters: 
Creates an MarkerElement 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 altitude-mode="absolute"></gmp-marker>
  • <gmp-marker altitude-mode="clamp-to-ground"></gmp-marker>
  • <gmp-marker altitude-mode="relative-to-ground"></gmp-marker>
  • <gmp-marker altitude-mode="relative-to-mesh"></gmp-marker>
anchorLeft
Type:  string optional
Default: -50%
A CSS length-percentage value which is used to offset the anchor point from the top left corner of the marker. This is useful when using a visual which has an anchor point that is different from the typical bottom center point of the default marker.
HTML attribute:
  • <gmp-marker anchor-left="string"></gmp-marker>
anchorTop
Type:  string optional
Default: -100%
A CSS length-percentage value which is used to offset the anchor point from the top left corner of the marker. This is useful when using a visual which has an anchor point that is different from the typical bottom center point of the default marker.
HTML attribute:
  • <gmp-marker anchor-top="string"></gmp-marker>
collisionBehavior
Type:  CollisionBehavior optional
Default: CollisionBehavior.REQUIRED
An enumeration specifying how a MarkerElement should behave when it collides with another MarkerElement, Marker3DElement, or with the basemap labels.
HTML attribute:
  • <gmp-marker collision-behavior="required"></gmp-marker>
  • <gmp-marker collision-behavior="required-and-hides-optional"></gmp-marker>
  • <gmp-marker collision-behavior="optional-and-hides-lower-priority"></gmp-marker>
collisionPriority
Type:  number optional
A number which is used to help determine relative priority between CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY markers (including Marker3DElement ). A higher collisionPriority value indicates higher priority.
HTML attribute:
  • <gmp-marker collision-priority="number"></gmp-marker>
position
The location of the tip of the marker. Altitude is ignored in certain modes and thus optional.
HTML attribute:
  • <gmp-marker position="lat,lng"></gmp-marker>
  • <gmp-marker position="lat,lng,altitude"></gmp-marker>
title
Type:  string
Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the MarkerElement with the provided value.
HTML attribute:
  • <gmp-marker title="string"></gmp-marker>
default
Any custom elements directly added to the MarkerElement will be slotted.
z-index
The z-index of this marker. See z-index documentation for more details. Overlapping markers with a larger z-index cover those with a smaller one. By default, markers are displayed according to their DOM position, with markers added later in the DOM appearing in front of markers added to the DOM earlier.
Inherited: addEventListener, removeEventListener

MarkerElementOptions interface

google.maps.maps3d.MarkerElementOptions interface

MarkerElementOptions object used to define the properties that can be set on a MarkerElement.
altitudeMode optional
Type:  AltitudeMode optional
See MarkerElement.altitudeMode.
anchorLeft optional
Type:  string optional
See MarkerElement.anchorLeft.
anchorTop optional
Type:  string optional
See MarkerElement.anchorTop.
collisionBehavior optional
Type:  CollisionBehavior optional
See MarkerElement.collisionBehavior.
collisionPriority optional
Type:  number optional
See MarkerElement.collisionPriority.
position optional
See MarkerElement.position.
title optional
Type:  string optional
See MarkerElement.title.

MarkerInteractiveElement class

google.maps.maps3d.MarkerInteractiveElement class
extends MarkerElement
implements MarkerInteractiveElementOptions

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

Custom element:
<gmp-marker-interactive gmp-popover-target="popover-id"></gmp-marker-interactive>

const {MarkerInteractiveElement} = await google.maps.importLibrary("maps3d")
MarkerInteractiveElement
MarkerInteractiveElement([options])
Parameters: 
Creates a MarkerInteractiveElement 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-interactive gmp-popover-target="popover-id"></gmp-marker-interactive>
Inherited: altitudeMode, anchorLeft, anchorTop, collisionBehavior, collisionPriority, position, title
Inherited: default
Inherited: z-index
Inherited: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Arguments: 
This event is fired when the MarkerInteractiveElement element is clicked.

MarkerInteractiveElementOptions interface

google.maps.maps3d.MarkerInteractiveElementOptions interface
extends MarkerElementOptions

MarkerInteractiveElementOptions object used to define the properties that can be set on a MarkerInteractiveElement.
gmpPopoverTargetElement optional
Type:  PopoverElement optional
See MarkerInteractiveElement.gmpPopoverTargetElement.
Inherited: altitudeMode, anchorLeft, anchorTop, collisionBehavior, collisionPriority, position, title

Marker3DElement class

google.maps.maps3d.Marker3DElement class
extends HTMLElement
implements Marker3DElementOptions

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" collision-priority="number" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"></gmp-marker-3d>

const {Marker3DElement} = await google.maps.importLibrary("maps3d")
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>
collisionPriority
Type:  number optional
The collision priority used for collision detection.
HTML attribute:
  • <gmp-marker-3d collision-priority="number"></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.
Inherited: addEventListener, 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.
collisionPriority optional
Type:  number optional
See Marker3DElement.collisionPriority.
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
extends Marker3DElement
implements Marker3DInteractiveElementOptions

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>

const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d")
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, collisionPriority, 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.
Inherited: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Arguments: 
This event is fired when the Marker3DInteractiveElement element is clicked.

Marker3DInteractiveElementOptions interface

google.maps.maps3d.Marker3DInteractiveElementOptions interface
extends Marker3DElementOptions

Marker3DInteractiveElementOptions object used to define the properties that can be set on a Marker3DInteractiveElement.
gmpPopoverTargetElement optional
Type:  PopoverElement optional
See Marker3DInteractiveElement.gmpPopoverTargetElement.
title optional
Type:  string optional
See Marker3DInteractiveElement.title.
Inherited: altitudeMode, collisionBehavior, collisionPriority, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Model3DElement class

google.maps.maps3d.Model3DElement class
extends HTMLElement
implements Model3DElementOptions

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>

const {Model3DElement} = await google.maps.importLibrary("maps3d")
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>
Inherited: addEventListener, 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
extends Model3DElement
implements Model3DInteractiveElementOptions

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>

const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d")
Model3DInteractiveElement
Model3DInteractiveElement([options])
Parameters: 
Creates a Model3DInteractiveElement with the options specified.
Inherited: altitudeMode, orientation, position, scale, src
Inherited: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Arguments: 
This event is fired when the Model3DInteractiveElement element is clicked.

Model3DInteractiveElementOptions interface

google.maps.maps3d.Model3DInteractiveElementOptions interface
extends Model3DElementOptions

Model3DInteractiveElementOptions object used to define the properties that can be set on a Model3DInteractiveElement.
Inherited: altitudeMode, orientation, position, scale, src

Polyline3DElement class

google.maps.maps3d.Polyline3DElement class
extends HTMLElement
implements Polyline3DElementOptions

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>

const {Polyline3DElement} = await google.maps.importLibrary("maps3d")
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.
Inherited: addEventListener, 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
extends Polyline3DElement
implements Polyline3DInteractiveElementOptions

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>

const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d")
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Parameters: 
Creates a Polyline3DInteractiveElement with the options specified.
Inherited: altitudeMode, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, strokeColor, strokeWidth, zIndex, coordinates
Inherited: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Arguments: 
  • clickEvent:  LocationClickEvent optional 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
extends Polyline3DElementOptions

Polyline3DInteractiveElementOptions object used to define the properties that can be set on a Polyline3DInteractiveElement.
Inherited: altitudeMode, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, strokeColor, strokeWidth, zIndex

Polygon3DElement class

google.maps.maps3d.Polygon3DElement class
extends HTMLElement
implements Polygon3DElementOptions

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>

const {Polygon3DElement} = await google.maps.importLibrary("maps3d")
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.
Inherited: addEventListener, 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
extends Polygon3DElement
implements Polygon3DInteractiveElementOptions

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>

const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d")
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Parameters: 
Creates a Polygon3DInteractiveElement with the options specified.
Inherited: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerPaths, path, strokeColor, strokeWidth, zIndex, outerCoordinates, innerCoordinates
Inherited: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Arguments: 
  • clickEvent:  LocationClickEvent optional 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
extends Polygon3DElementOptions

Polygon3DInteractiveElementOptions object used to define the properties that can be set on a Polygon3DInteractiveElement.
Inherited: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, outerCoordinates, strokeColor, strokeWidth, zIndex

FlattenerElement class

google.maps.maps3d.FlattenerElement class
extends HTMLElement
implements FlattenerElementOptions

A flattener element is used to flatten a specified area on the map.

Custom element:
<gmp-flattener path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-flattener>

const {FlattenerElement} = await google.maps.importLibrary("maps3d")
FlattenerElement
FlattenerElement([options])
Parameters: 
innerPaths
The ordered sequence of coordinates that designates a closed loop. These paths define Exclusion Holes within the polygon's main path, which is the Flattening Zone. Areas within an innerPath are exempt from flattening.
path
The ordered sequence of coordinates that designates a closed loop. This loop defines the Flattening Zone.
HTML attribute:
  • <gmp-flattener path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-flattener>
Inherited: addEventListener, removeEventListener

FlattenerElementOptions interface

google.maps.maps3d.FlattenerElementOptions interface

FlattenerElementOptions object used to define the properties that can be set on a FlattenerElement.
innerPaths optional
See FlattenerElement.innerPaths.
path optional
See FlattenerElement.path.

PopoverElement class

google.maps.maps3d.PopoverElement class
extends HTMLElement
implements PopoverElementOptions

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" auto-pan-disabled light-dismiss-disabled open position-anchor="lat,lng"></gmp-popover>

const {PopoverElement} = await google.maps.importLibrary("maps3d")
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>
autoPanDisabled
Type:  boolean optional
Default: false
If set to true, disables panning the map to make the popover fully visible when it opens.
HTML attribute:
  • <gmp-popover auto-pan-disabled></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.
background-color
The background color of the popover. See background-color documentation for more details. Please note that default place popover is also affected by this property. Use targeted CSS classes or inline styles on custom popovers to avoid styling the default place popover.
border-radius
The border-radius of the popover. See border-radius documentation for more details. Please note that default place popover is also affected by this property. Use targeted CSS classes or inline styles on custom popovers to avoid styling the default place popover.
box-shadow
The box-shadow of the popover. See box-shadow documentation for more details. Please note that default place popover is also affected by this property. Use targeted CSS classes or inline styles on custom popovers to avoid styling the default place popover.
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.
padding
The padding of the popover. See padding documentation for more details. Please note that default place popover is also affected by this property. Use targeted CSS classes or inline styles on custom popovers to avoid styling the default place popover.
Inherited: addEventListener, 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.
autoPanDisabled optional
Type:  boolean optional
See PopoverElement.autoPanDisabled.
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.

const {AltitudeMode} = await google.maps.importLibrary("maps3d")
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).