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.

      
<gmp-marker
  altitude-mode="value-name"
  anchor-left="string"
  anchor-top="string"
  collision-behavior="value-name"
  collision-priority="number"
  position="lat,lng"
  title="string">
</gmp-marker>

const {MarkerElement} = await google.maps.importLibrary("maps3d");

MarkerElementOptions interface

google.maps.maps3d.MarkerElementOptions interface

MarkerElementOptions object used to define the properties that can be set on a MarkerElement.

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.

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

const {MarkerInteractiveElement} = await google.maps.importLibrary("maps3d");

MarkerInteractiveElementOptions interface

google.maps.maps3d.MarkerInteractiveElementOptions interface
extends MarkerElementOptions

MarkerInteractiveElementOptions object used to define the properties that can be set on a MarkerInteractiveElement.

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.

     
<gmp-marker-3d
  altitude-mode="value-name"
  autofits-camera
  collision-behavior="value-name"
  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");

Properties
altitudeMode attr: altitude-mode	Input type: AltitudeMode optional Output type: AltitudeMode Default: AltitudeMode.CLAMP_TO_GROUND Specifies how the altitude component of the position is interpreted. HTML attribute: altitude-mode="value-name"
autofitsCamera attr: autofits-camera	Input type: boolean optional Output type: boolean Default: false If provided, the specified marker will be made visible within the map viewport, alongside any other elements that have opted in. HTML attribute: autofits-camera
collisionBehavior attr: collision-behavior	Input type: CollisionBehavior optional Output type: CollisionBehavior Default: CollisionBehavior.REQUIRED An enumeration specifying how a Marker3DElement should behave when it collides with another Marker3DElement or with the basemap labels. HTML attribute: collision-behavior="value-name"
collisionPriority attr: collision-priority	Input type: number optional Output type: number optional The collision priority used for collision detection. HTML attribute: collision-priority="number"
drawsWhenOccluded attr: draws-when-occluded	Input type: boolean optional Output type: boolean 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: draws-when-occluded
extruded attr: extruded	Input type: boolean optional Output type: boolean 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: extruded
label attr: label	Input type: string optional Output type: string optional Text to be displayed by this marker. HTML attribute: label="string"
position attr: position	Input type: LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Output type: LatLngAltitude optional The location of the tip of the marker. Altitude is ignored in certain modes and thus optional. HTML attribute: position="lat,lng" position="lat,lng,altitude"
sizePreserved attr: size-preserved	Input type: boolean optional Output type: boolean 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: size-preserved
zIndex attr: z-index	Input type: number optional Output type: number optional The zIndex compared to other markers. HTML attribute: z-index="number"

Marker3DElementOptions interface

google.maps.maps3d.Marker3DElementOptions interface

Marker3DElementOptions object used to define the properties that can be set on a Marker3DElement.

Properties
altitudeMode optional	Type: AltitudeMode optional See Marker3DElement.altitudeMode.
autofitsCamera optional	Type: boolean optional See Marker3DElement.autofitsCamera.
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	Type: LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral 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.

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

const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d");

Properties
gmpPopoverTargetElement attr: gmp-popover-target-element	Input type: PopoverElement optional Output type: PopoverElement optional When set, the popover element will be open on this marker's click. HTML attribute: gmp-popover-target-element="popover-id"
title attr: 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: title="string"
Inherited: altitudeMode (attr: altitude-mode), autofitsCamera (attr: autofits-camera), collisionBehavior (attr: collision-behavior), collisionPriority (attr: collision-priority), drawsWhenOccluded (attr: draws-when-occluded), extruded (attr: extruded), label (attr: label), position (attr: position), sizePreserved (attr: size-preserved), zIndex (attr: z-index)

Marker3DInteractiveElementOptions interface

google.maps.maps3d.Marker3DInteractiveElementOptions interface
extends Marker3DElementOptions

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

Properties
gmpPopoverTargetElement optional	Type: PopoverElement optional See Marker3DInteractiveElement.gmpPopoverTargetElement.
title optional	Type: string optional See Marker3DInteractiveElement.title.
Inherited: altitudeMode, autofitsCamera, 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.

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

const {Model3DElement} = await google.maps.importLibrary("maps3d");

Model3DElementOptions interface

google.maps.maps3d.Model3DElementOptions interface

Model3DElementOptions object used to define the properties that can be set on a Model3DElement.

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.

<gmp-model-3d-interactive></gmp-model-3d-interactive>

const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d");

Model3DInteractiveElementOptions interface

google.maps.maps3d.Model3DInteractiveElementOptions interface
extends Model3DElementOptions

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

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.

      
<gmp-polyline-3d
  altitude-mode="value-name"
  autofits-camera
  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");

Properties
altitudeMode attr: altitude-mode	Input type: AltitudeMode optional Output type: AltitudeMode Default: AltitudeMode.CLAMP_TO_GROUND Specifies how altitude components in the coordinates are interpreted. HTML attribute: altitude-mode="value-name"
autofitsCamera attr: autofits-camera	Input type: boolean optional Output type: boolean Default: false If provided, the specified polyline will be made visible within the map viewport, alongside any other elements that have opted in. HTML attribute: autofits-camera
drawsOccludedSegments attr: draws-occluded-segments	Input type: boolean optional Output type: boolean 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: draws-occluded-segments
extruded attr: extruded	Input type: boolean optional Output type: boolean 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: extruded
geodesic attr: geodesic	Input type: boolean optional Output type: boolean 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: geodesic
outerColor attr: outer-color	Input type: string optional Output type: string optional The outer color. All CSS3 colors are supported. HTML attribute: outer-color="string"
outerWidth attr: outer-width	Input type: number optional Output type: number optional The outer width is between 0.0 and 1.0. This is a percentage of the strokeWidth. HTML attribute: outer-width="number"
path attr: path	Input type: Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional Output type: Array<LatLngAltitude> optional The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional. HTML attribute: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
strokeColor attr: stroke-color	Input type: string optional Output type: string optional The stroke color. All CSS3 colors are supported. HTML attribute: stroke-color="string"
strokeWidth attr: stroke-width	Input type: number optional Output type: number optional The stroke width in pixels. HTML attribute: stroke-width="number"
zIndex attr: z-index	Input type: number optional Output type: number optional The zIndex compared to other polys. HTML attribute: z-index="number"
coordinates	Type: Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional.

Polyline3DElementOptions interface

google.maps.maps3d.Polyline3DElementOptions interface

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

Properties
altitudeMode optional	Type: AltitudeMode optional See Polyline3DElement.altitudeMode.
autofitsCamera optional	Type: boolean optional See Polyline3DElement.autofitsCamera.
coordinates optional	Type: Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> 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.
path optional	Type: Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional See Polyline3DElement.path.
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.

<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d");

Properties
Inherited: altitudeMode (attr: altitude-mode), autofitsCamera (attr: autofits-camera), drawsOccludedSegments (attr: draws-occluded-segments), extruded (attr: extruded), geodesic (attr: geodesic), outerColor (attr: outer-color), outerWidth (attr: outer-width), path (attr: path), strokeColor (attr: stroke-color), strokeWidth (attr: stroke-width), zIndex (attr: z-index), coordinates

Polyline3DInteractiveElementOptions interface

google.maps.maps3d.Polyline3DInteractiveElementOptions interface
extends Polyline3DElementOptions

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

Properties
Inherited: altitudeMode, autofitsCamera, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, 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.

    
<gmp-polygon-3d
  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");

Polygon3DElementOptions interface

google.maps.maps3d.Polygon3DElementOptions interface

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

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.

<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d");

Polygon3DInteractiveElementOptions interface

google.maps.maps3d.Polygon3DInteractiveElementOptions interface
extends Polygon3DElementOptions

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

FlattenerElement class

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

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

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

const {FlattenerElement} = await google.maps.importLibrary("maps3d");

FlattenerElementOptions interface

google.maps.maps3d.FlattenerElementOptions interface

FlattenerElementOptions object used to define the properties that can be set on a FlattenerElement.

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.

<gmp-popover
  auto-pan-disabled
  light-dismiss-disabled
  open
  position-anchor="lat,lng">
</gmp-popover>

const {PopoverElement} = await google.maps.importLibrary("maps3d");

PopoverElementOptions interface

google.maps.maps3d.PopoverElementOptions interface

PopoverElementOptions object used to define the properties that can be set on a PopoverElement.

AltitudeMode constants

google.maps.maps3d.AltitudeMode constants

Specifies how altitude components in the coordinates are interpreted.

These constants are also usable as strings. In TypeScript, the string literals are defined by the AltitudeModeString type.

const {AltitudeMode} = await google.maps.importLibrary("maps3d");

CirclePathElement class

google.maps.maps3d.CirclePathElement class
extends HTMLElement
implements CirclePathElementOptions

A 3D circle overlay on a 3D map.

 
<gmp-circle-path
  center="lat,lng,altitude"
  radius="number">
</gmp-circle-path>

const {CirclePathElement} = await google.maps.importLibrary("maps3d");

CirclePathElementOptions interface

google.maps.maps3d.CirclePathElementOptions interface

CirclePathElementOptions object used to define the properties that can be set on a CirclePathElement.