Draw on the map

MarkerElement class

google.maps.maps3d.MarkerElement class

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>

This class extends HTMLElement.

This class implements MarkerElementOptions.

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

Constructor
MarkerElement

MarkerElement([options])

Parameters:

Creates an MarkerElement with the options specified.

Properties
BetaaltitudeMode

Type:  AltitudeMode optional

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>
BetaanchorLeft

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>
BetaanchorTop

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>
BetacollisionBehavior

Type:  CollisionBehavior optional

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>
BetacollisionPriority

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>
Betaposition

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>
Betatitle

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>

Slots
Betadefault

Any custom elements directly added to the MarkerElement will be slotted.

CSS Properties
Betaz-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.

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

MarkerInteractiveElement class

google.maps.maps3d.MarkerInteractiveElement class

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>

This class extends MarkerElement.

This class implements MarkerInteractiveElementOptions.

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

Constructor
MarkerInteractiveElement

MarkerInteractiveElement([options])

Parameters:

Creates a MarkerInteractiveElement with the options specified.

Properties
BetagmpPopoverTargetElement

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: BetaaltitudeMode, BetaanchorLeft, BetaanchorTop, BetacollisionBehavior, BetacollisionPriority, Betaposition, Betatitle

Slots
Inherited: Betadefault

CSS Properties
Inherited: Betaz-index

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

Events
Betagmp-click

function(clickEvent)

Arguments:

This event is fired when the MarkerInteractiveElement element is clicked.

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" collision-priority="number" 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.

Constructor
Marker3DElement

Marker3DElement([options])

Parameters:

Creates an Marker3DElement with the options specified.

Properties
altitudeMode

Type:  AltitudeMode optional

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

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>
BetacollisionPriority

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>

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

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

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.

Constructor
Marker3DInteractiveElement

Marker3DInteractiveElement([options])

Parameters:

Creates an Marker3DInteractiveElement with the options specified.

Properties
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, BetacollisionPriority, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

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

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

Events
gmp-click

function(clickEvent)

Arguments:

This event is fired when the Marker3DInteractiveElement element is clicked.

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.

Constructor
Model3DElement

Model3DElement([options])

Parameters:

Creates an Model3DElement with the options specified.

Properties
altitudeMode

Type:  AltitudeMode optional

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>

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

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.

Constructor
Model3DInteractiveElement

Model3DInteractiveElement([options])

Parameters:

Creates a Model3DInteractiveElement with the options specified.

Properties
Inherited: altitudeMode, orientation, position, scale, src

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

Events
gmp-click

function(clickEvent)

Arguments:

This event is fired when the Model3DInteractiveElement element is clicked.

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.

Constructor
Polyline3DElement

Polyline3DElement([options])

Parameters:

Creates an Polyline3DElement with the options specified.

Properties
altitudeMode

Type:  AltitudeMode optional

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.

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

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.

Constructor
Polyline3DInteractiveElement

Polyline3DInteractiveElement([options])

Parameters:

Creates a Polyline3DInteractiveElement with the options specified.

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

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

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

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.

Constructor
Polygon3DElement

Polygon3DElement([options])

Parameters:

Creates an Polygon3DElement with the options specified.

Properties
altitudeMode

Type:  AltitudeMode optional

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.

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

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.

Constructor
Polygon3DInteractiveElement

Polygon3DInteractiveElement([options])

Parameters:

Creates a Polygon3DInteractiveElement with the options specified.

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

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

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

FlattenerElement class

google.maps.maps3d.FlattenerElement class

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>

This class extends HTMLElement.

This class implements FlattenerElementOptions.

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

Constructor
FlattenerElement

FlattenerElement([options])

Parameters:

Properties
BetainnerPaths

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

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>

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

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" auto-pan-disabled 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.

Constructor
PopoverElement

PopoverElement([options])

Parameters:

Properties
altitudeMode

Type:  AltitudeMode optional

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>

Slots
default

Places the slotted content in the main section of the popover.
header

Places the slotted content in the heading section of the popover.

CSS Properties
--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.

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

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.

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

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2026-03-02 UTC.