## [MarkerElement](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#MarkerElement)
class
class
`google.maps.maps3d.MarkerElement`
extends `HTMLElement`
implements `MarkerElementOptions`
extended by `MarkerInteractiveElement`
library `"maps3d"`
Shows a position on a 3D map. Note that the `position` must be set for the `MarkerElement` to display.
`MarkerElement` supports high customization via custom HTML elements, but has lower interaction performance than `Marker3DElement`, especially when handling more than 1000 markers on a map.
```html
```
```javascript
const {MarkerElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `MarkerElement` | `MarkerElement([options])` **Parameters:** - `options: MarkerElementOptions optional` Creates an `MarkerElement` with the options specified. |
| ### 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"` |
| `anchorLeft` attr: anchor-left | **Input type:** `string optional` **Output type:** `string` **Default:** -50% A [CSS length-percentage](https://developer.mozilla.org/en-US/docs/Web/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:** `anchor-left="string"` |
| `anchorTop` attr: anchor-top | **Input type:** `string optional` **Output type:** `string` **Default:** -100% A [CSS length-percentage](https://developer.mozilla.org/en-US/docs/Web/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:** `anchor-top="string"` |
| `autofitsCamera` attr: autofits-camera | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). **Type:** `boolean optional` **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 MarkerElement should behave when it collides with another `MarkerElement`, `Marker3DElement`, or with the basemap labels. **HTML attribute:** `collision-behavior="value-name"` |
| `collisionPriority` attr: collision-priority | **Input type:** `number optional` **Output 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:** `collision-priority="number"` |
| `position` attr: position | **Input type:** `LatLng|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"` |
| `title` attr: 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:** `title="string"` |
| ### Slots ||
|---|---|
| `default` | Any custom elements directly added to the `MarkerElement` will be slotted. |
| ### CSS Properties ||
|---|---|
| `z-index` | The z-index of this marker. See `z-index` [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/z-index) 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 ||
|---|---|
## [MarkerElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#MarkerElementOptions)
interface
interface
`google.maps.maps3d.MarkerElementOptions`
extended by `MarkerInteractiveElementOptions`
implemented by `MarkerElement, MarkerInteractiveElement`
MarkerElementOptions object used to define the properties that can be set on a MarkerElement.
| ### Properties ||
|---|---|
| `altitudeMode` optional | **Type:** `AltitudeMode optional` See `MarkerElement.altitudeMode`. |
| `anchorLeft` optional | **Type:** `string optional` See `MarkerElement.anchorLeft`. |
| `anchorTop` optional | **Type:** `string optional` See `MarkerElement.anchorTop`. |
| `autofitsCamera` optional | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). **Type:** `boolean optional` See `MarkerElement.autofitsCamera`. |
| `collisionBehavior` optional | **Type:** `CollisionBehavior optional` See `MarkerElement.collisionBehavior`. |
| `collisionPriority` optional | **Type:** `number optional` See `MarkerElement.collisionPriority`. |
| `position` optional | **Type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` See `MarkerElement.position`. |
| `title` optional | **Type:** `string optional` See `MarkerElement.title`. |
## [MarkerInteractiveElement](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#MarkerInteractiveElement)
class
class
`google.maps.maps3d.MarkerInteractiveElement`
extends `MarkerElement, HTMLElement`
implements `MarkerElementOptions, MarkerInteractiveElementOptions`
library `"maps3d"`
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.
```html
```
```javascript
const {MarkerInteractiveElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `MarkerInteractiveElement` | `MarkerInteractiveElement([options])` **Parameters:** - `options: MarkerInteractiveElementOptions optional` Creates a `MarkerInteractiveElement` with the options specified. |
| ### 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"` |
| ### Slots ||
|---|---|
| ### CSS Properties ||
|---|---|
| ### Methods ||
|---|---|
| ### Events ||
|---|---|
| `gmp-click` | `function(clickEvent)` **Arguments:** - `clickEvent: LocationClickEvent optional` This event is fired when the `MarkerInteractiveElement` element is clicked. |
## [MarkerInteractiveElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#MarkerInteractiveElementOptions)
interface
interface
`google.maps.maps3d.MarkerInteractiveElementOptions`
extends `MarkerElementOptions`
implemented by `MarkerInteractiveElement`
MarkerInteractiveElementOptions object used to define the properties that can be set on a MarkerInteractiveElement.
| ### Properties ||
|---|---|
| `gmpPopoverTargetElement` optional | **Type:** `PopoverElement optional` See `MarkerInteractiveElement.gmpPopoverTargetElement`. |
## [Marker3DElement](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Marker3DElement)
class
class
`google.maps.maps3d.Marker3DElement`
extends `HTMLElement`
implements `Marker3DElementOptions`
extended by `Marker3DInteractiveElement`
library `"maps3d"`
Shows a position on a 3D map. Note that the `position` must be set for the `Marker3DElement` to display.
```html
```
```javascript
const {Marker3DElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `Marker3DElement` | `Marker3DElement([options])` **Parameters:** - `options: Marker3DElementOptions optional` Creates an `Marker3DElement` with the options specified. |
| ### 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 | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). **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:** `LatLng|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"` |
| ### 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 `` 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 ||
|---|---|
## [Marker3DElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Marker3DElementOptions)
interface
interface
`google.maps.maps3d.Marker3DElementOptions`
extended by `Marker3DInteractiveElementOptions`
implemented by `Marker3DElement, Marker3DInteractiveElement`
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 | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). **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:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` See `Marker3DElement.position`. |
| `sizePreserved` optional | **Type:** `boolean optional` See `Marker3DElement.sizePreserved`. |
| `zIndex` optional | **Type:** `number optional` See `Marker3DElement.zIndex`. |
## [Marker3DInteractiveElement](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Marker3DInteractiveElement)
class
class
`google.maps.maps3d.Marker3DInteractiveElement`
extends `Marker3DElement, HTMLElement`
implements `Marker3DElementOptions, Marker3DInteractiveElementOptions`
library `"maps3d"`
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.
```html
```
```javascript
const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `Marker3DInteractiveElement` | `Marker3DInteractiveElement([options])` **Parameters:** - `options: Marker3DInteractiveElementOptions optional` Creates an `Marker3DInteractiveElement` with the options specified. |
| ### 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"` |
| ### 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 ||
|---|---|
| ### Events ||
|---|---|
| `gmp-click` | `function(clickEvent)` **Arguments:** - `clickEvent: LocationClickEvent optional` This event is fired when the `Marker3DInteractiveElement` element is clicked. |
| `gmp-pointermove` | `function(pointerMoveEvent)` **Arguments:** - `pointerMoveEvent: LocationPointerEvent optional` This event is fired when the pointer moves within the `Marker3DInteractiveElement` element. |
| `gmp-pointerout` | `function(pointerOutEvent)` **Arguments:** - `pointerOutEvent: LocationPointerEvent optional` This event is fired when the pointer leaves the `Marker3DInteractiveElement` element. |
| `gmp-pointerover` | `function(pointerOverEvent)` **Arguments:** - `pointerOverEvent: LocationPointerEvent optional` This event is fired when the pointer enters the `Marker3DInteractiveElement` element. |
## [Marker3DInteractiveElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Marker3DInteractiveElementOptions)
interface
interface
`google.maps.maps3d.Marker3DInteractiveElementOptions`
extends `Marker3DElementOptions`
implemented by `Marker3DInteractiveElement`
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`. |
## [Model3DElement](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Model3DElement)
class
class
`google.maps.maps3d.Model3DElement`
extends `HTMLElement`
implements `Model3DElementOptions`
extended by `Model3DInteractiveElement`
library `"maps3d"`
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](https://www.khronos.org/gltf/pbr) should be supported. No extensions or extension properties are currently supported.
```html
```
```javascript
const {Model3DElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `Model3DElement` | `Model3DElement([options])` **Parameters:** - `options: Model3DElementOptions optional` Creates an `Model3DElement` with the options specified. |
| ### Properties ||
|---|---|
| `altitudeMode` attr: altitude-mode | **Input type:** `AltitudeMode optional` **Output type:** `AltitudeMode` **Default:** `AltitudeMode.CLAMP_TO_GROUND` Specifies how altitude in the position is interpreted. **HTML attribute:** `altitude-mode="value-name"` |
| `orientation` attr: orientation | **Input type:** `Orientation3D|Orientation3DLiteral optional` **Output type:** `Orientation3D optional` 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:** `orientation="heading,tilt,roll"` |
| `position` attr: position | **Input type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` **Output type:** `LatLngAltitude optional` Sets the `Model3DElement`'s position. Altitude is ignored in certain modes and thus optional. **HTML attribute:** - `position="lat,lng"` - `position="lat,lng,altitude"` |
| `scale` attr: scale | **Input type:** `number|Vector3D|Vector3DLiteral optional` **Output type:** `Vector3D optional` **Default:** `1` Scales the model along the x, y, and z axes in the model's coordinate space. **HTML attribute:** - `scale="number"` - `scale="x,y,z"` |
| `src` attr: src | **Input type:** `string|URL optional` **Output type:** `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:** `src="url"` |
| ### Methods ||
|---|---|
## [Model3DElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Model3DElementOptions)
interface
interface
`google.maps.maps3d.Model3DElementOptions`
extended by `Model3DInteractiveElementOptions`
implemented by `Model3DElement, Model3DInteractiveElement`
Model3DElementOptions object used to define the properties that can be set on a Model3DElement.
| ### Properties ||
|---|---|
| `altitudeMode` optional | **Type:** `AltitudeMode optional` See `Model3DElement.altitudeMode`. |
| `orientation` optional | **Type:** `Orientation3D|Orientation3DLiteral optional` See `Model3DElement.orientation`. |
| `position` optional | **Type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` See `Model3DElement.position`. |
| `scale` optional | **Type:** `number|Vector3D|Vector3DLiteral optional` See `Model3DElement.scale`. |
| `src` optional | **Type:** `string|URL optional` See `Model3DElement.src`. |
## [Model3DInteractiveElement](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Model3DInteractiveElement)
class
class
`google.maps.maps3d.Model3DInteractiveElement`
extends `Model3DElement, HTMLElement`
implements `Model3DElementOptions, Model3DInteractiveElementOptions`
library `"maps3d"`
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](https://www.khronos.org/gltf/pbr) should be supported. No extensions or extension properties are currently supported.
Unlike `Model3DElement`, `Model3DInteractiveElement` receives a `gmp-click` event.
```html
```
```javascript
const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `Model3DInteractiveElement` | `Model3DInteractiveElement([options])` **Parameters:** - `options: Model3DElementOptions optional` Creates a `Model3DInteractiveElement` with the options specified. |
| ### Properties ||
|---|---|
| ### Methods ||
|---|---|
| ### Events ||
|---|---|
| `gmp-click` | `function(clickEvent)` **Arguments:** - `clickEvent: LocationClickEvent optional` This event is fired when the `Model3DInteractiveElement` element is clicked. |
| `gmp-pointermove` | `function(pointerMoveEvent)` **Arguments:** - `pointerMoveEvent: LocationPointerEvent optional` This event is fired when the pointer moves within the `Model3DInteractiveElement` element. |
| `gmp-pointerout` | `function(pointerOutEvent)` **Arguments:** - `pointerOutEvent: LocationPointerEvent optional` This event is fired when the pointer leaves the `Model3DInteractiveElement` element. |
| `gmp-pointerover` | `function(pointerOverEvent)` **Arguments:** - `pointerOverEvent: LocationPointerEvent optional` This event is fired when the pointer enters the `Model3DInteractiveElement` element. |
## [Model3DInteractiveElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Model3DInteractiveElementOptions)
interface
interface
`google.maps.maps3d.Model3DInteractiveElementOptions`
extends `Model3DElementOptions`
implemented by `Model3DInteractiveElement`
Model3DInteractiveElementOptions object used to define the properties that can be set on a Model3DInteractiveElement.
| ### Properties ||
|---|---|
## [Polyline3DElement](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Polyline3DElement)
class
class
`google.maps.maps3d.Polyline3DElement`
extends `HTMLElement`
implements `Polyline3DElementOptions`
extended by `Polyline3DInteractiveElement`
library `"maps3d"`
A 3D polyline is a linear overlay of connected line segments on a 3D map.
```html
```
```javascript
const {Polyline3DElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `Polyline3DElement` | `Polyline3DElement([options])` **Parameters:** - `options: Polyline3DElementOptions optional` Creates an `Polyline3DElement` with the options specified. |
| ### 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 | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). **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 optional` **Output type:** `Array 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](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw#Polyline3DElement.coordinates)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use `path` instead. This property will be removed in a future release. **Type:** `Iterable optional` The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional. |
| ### Methods ||
|---|---|
## [Polyline3DElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Polyline3DElementOptions)
interface
interface
`google.maps.maps3d.Polyline3DElementOptions`
extended by `Polyline3DInteractiveElementOptions`
implemented by `Polyline3DElement, Polyline3DInteractiveElement`
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 | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). **Type:** `boolean optional` See `Polyline3DElement.autofitsCamera`. |
| `coordinates` optional | **Type:** `Iterable 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 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](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Polyline3DInteractiveElement)
class
class
`google.maps.maps3d.Polyline3DInteractiveElement`
extends `Polyline3DElement, HTMLElement`
implements `Polyline3DElementOptions, Polyline3DInteractiveElementOptions`
library `"maps3d"`
A 3D polyline is a linear overlay of connected line segments on a 3D map. Unlike `Polyline3DElement`, `Polyline3DInteractiveElement` receives a `gmp-click` event.
```html
```
```javascript
const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `Polyline3DInteractiveElement` | `Polyline3DInteractiveElement([options])` **Parameters:** - `options: Polyline3DElementOptions optional` Creates a `Polyline3DInteractiveElement` with the options specified. |
| ### Properties ||
|---|---|
| ### Methods ||
|---|---|
| ### Events ||
|---|---|
| `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. |
| `gmp-pointermove` | `function(pointerMoveEvent)` **Arguments:** - `pointerMoveEvent: LocationPointerEvent optional` This event is fired when the pointer moves within the `Polyline3DInteractiveElement` element. |
| `gmp-pointerout` | `function(pointerOutEvent)` **Arguments:** - `pointerOutEvent: LocationPointerEvent optional` This event is fired when the pointer leaves the `Polyline3DInteractiveElement` element. |
| `gmp-pointerover` | `function(pointerOverEvent)` **Arguments:** - `pointerOverEvent: LocationPointerEvent optional` This event is fired when the pointer enters the `Polyline3DInteractiveElement` element. |
## [Polyline3DInteractiveElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Polyline3DInteractiveElementOptions)
interface
interface
`google.maps.maps3d.Polyline3DInteractiveElementOptions`
extends `Polyline3DElementOptions`
implemented by `Polyline3DInteractiveElement`
Polyline3DInteractiveElementOptions object used to define the properties that can be set on a Polyline3DInteractiveElement.
| ### Properties ||
|---|---|
## [Polygon3DElement](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Polygon3DElement)
class
class
`google.maps.maps3d.Polygon3DElement`
extends `HTMLElement`
implements `Polygon3DElementOptions`
extended by `Polygon3DInteractiveElement`
library `"maps3d"`
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.
```html
```
```javascript
const {Polygon3DElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `Polygon3DElement` | `Polygon3DElement([options])` **Parameters:** - `options: Polygon3DElementOptions optional` Creates an `Polygon3DElement` with the options specified. |
| ### Properties ||
|---|---|
| `altitudeMode` | **Input type:** `AltitudeMode optional` **Output type:** `AltitudeMode` **Default:** `AltitudeMode.CLAMP_TO_GROUND` Specifies how altitude components in the coordinates are interpreted. |
| `autofitsCamera` attr: autofits-camera | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). **Input type:** `boolean optional` **Output type:** `boolean` **Default:** `false` If provided, the specified polygon 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 polygon which could be occluded are drawn or not. Polygons 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 polygon to the ground. To extrude a polygon, the `altitudeMode` must be either `RELATIVE_TO_GROUND` or `ABSOLUTE`. **HTML attribute:** `extruded` |
| `fillColor` attr: fill-color | **Input type:** `string optional` **Output type:** `string optional` The fill color. All CSS3 colors are supported. **HTML attribute:** `fill-color="string"` |
| `geodesic` attr: geodesic | **Input type:** `boolean optional` **Output type:** `boolean` **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:** `geodesic` |
| `innerPaths` | **Input type:** `Iterable> optional` **Output type:** `Array> optional` The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths, which create multiple cut-outs inside the polygon. |
| `path` attr: path | **Input type:** `Iterable optional` **Output type:** `Array optional` The ordered sequence of coordinates that designates a closed loop. 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"` |
| `[outerCoordinates](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw#Polygon3DElement.outerCoordinates)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use `path` instead. This property will be removed in a future release. **Type:** `Iterable optional` The ordered sequence of coordinates that designates a closed loop. Altitude is ignored in certain modes and thus optional. |
| `[innerCoordinates](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw#Polygon3DElement.innerCoordinates)` | > [!WARNING] > **[Deprecated:](https://developers.google.com/maps/deprecations.md.txt)** Use `innerPaths` instead. This property will be removed in a future release. **Type:** `Iterable> optional` The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths, which create multiple cut-outs inside the polygon. |
| ### Methods ||
|---|---|
## [Polygon3DElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Polygon3DElementOptions)
interface
interface
`google.maps.maps3d.Polygon3DElementOptions`
extended by `Polygon3DInteractiveElementOptions`
implemented by `Polygon3DElement, Polygon3DInteractiveElement`
Polygon3DElementOptions object used to define the properties that can be set on a Polygon3DElement.
| ### Properties ||
|---|---|
| `altitudeMode` optional | **Type:** `AltitudeMode optional` See `Polygon3DElement.altitudeMode`. |
| `autofitsCamera` optional | **Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel). **Type:** `boolean optional` See `Polygon3DElement.autofitsCamera`. |
| `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 | **Type:** `Iterable|Iterable> optional` See `Polygon3DElement.innerCoordinates`. |
| `innerPaths` optional | **Type:** `Iterable|Iterable> optional` See `Polygon3DElement.innerPaths`. |
| `outerCoordinates` optional | **Type:** `Iterable optional` See `Polygon3DElement.outerCoordinates`. |
| `path` optional | **Type:** `Iterable optional` See `Polygon3DElement.path`. |
| `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](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Polygon3DInteractiveElement)
class
class
`google.maps.maps3d.Polygon3DInteractiveElement`
extends `Polygon3DElement, HTMLElement`
implements `Polygon3DElementOptions, Polygon3DInteractiveElementOptions`
library `"maps3d"`
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.
```html
```
```javascript
const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `Polygon3DInteractiveElement` | `Polygon3DInteractiveElement([options])` **Parameters:** - `options: Polygon3DElementOptions optional` Creates a `Polygon3DInteractiveElement` with the options specified. |
| ### Properties ||
|---|---|
| ### Methods ||
|---|---|
| ### Events ||
|---|---|
| `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. |
| `gmp-pointermove` | `function(pointerMoveEvent)` **Arguments:** - `pointerMoveEvent: LocationPointerEvent optional` This event is fired when the pointer moves within the `Polygon3DInteractiveElement` element. |
| `gmp-pointerout` | `function(pointerOutEvent)` **Arguments:** - `pointerOutEvent: LocationPointerEvent optional` This event is fired when the pointer leaves the `Polygon3DInteractiveElement` element. |
| `gmp-pointerover` | `function(pointerOverEvent)` **Arguments:** - `pointerOverEvent: LocationPointerEvent optional` This event is fired when the pointer enters the `Polygon3DInteractiveElement` element. |
## [Polygon3DInteractiveElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Polygon3DInteractiveElementOptions)
interface
interface
`google.maps.maps3d.Polygon3DInteractiveElementOptions`
extends `Polygon3DElementOptions`
implemented by `Polygon3DInteractiveElement`
Polygon3DInteractiveElementOptions object used to define the properties that can be set on a Polygon3DInteractiveElement.
| ### Properties ||
|---|---|
## [FlattenerElement](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#FlattenerElement)
class
class
`google.maps.maps3d.FlattenerElement`
extends `HTMLElement`
implements `FlattenerElementOptions`
library `"maps3d"`
A flattener element is used to flatten a specified area on the map.
```html
```
```javascript
const {FlattenerElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `FlattenerElement` | `FlattenerElement([options])` **Parameters:** - `options: FlattenerElementOptions optional` |
| ### Properties ||
|---|---|
| `innerPaths` | **Input type:** `Iterable> optional` **Output type:** `Array> optional` 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` attr: path | **Input type:** `Iterable optional` **Output type:** `Array optional` The ordered sequence of coordinates that designates a closed loop. This loop defines the Flattening Zone. **HTML attribute:** `path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."` |
| ### Methods ||
|---|---|
## [FlattenerElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#FlattenerElementOptions)
interface
interface
`google.maps.maps3d.FlattenerElementOptions`
implemented by `FlattenerElement`
FlattenerElementOptions object used to define the properties that can be set on a FlattenerElement.
| ### Properties ||
|---|---|
| `innerPaths` optional | **Type:** `Iterable> optional` See `FlattenerElement.innerPaths`. |
| `path` optional | **Type:** `Iterable optional` See `FlattenerElement.path`. |
## [Label3DElement](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Label3DElement)
class
class
`google.maps.maps3d.Label3DElement`
extends `HTMLElement`
implements `Label3DElementOptions`
library `"maps3d"`
Represents a text label associated with a 3D marker on a map, allowing independent configuration of properties such as collision behavior.
```html
```
```javascript
const {Label3DElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `Label3DElement` | `Label3DElement([options])` **Parameters:** - `options: Label3DElementOptions optional` Creates an `Label3DElement` with the options specified. |
| ### Properties ||
|---|---|
| `collisionBehavior` attr: collision-behavior | **Input type:** `CollisionBehavior optional` **Output type:** `CollisionBehavior optional` **Default:** `CollisionBehavior.REQUIRED` An enumeration specifying how the label of a Marker3DElement should behave when it collides with another element. **HTML attribute:** `collision-behavior="value-name"` |
| `for` attr: for | **Input type:** `string|HTMLElement optional` **Output type:** `string|HTMLElement optional` The Marker3DElement that this label is for. **HTML attribute:** `for="marker-id"` |
| ### Methods ||
|---|---|
## [Label3DElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#Label3DElementOptions)
interface
interface
`google.maps.maps3d.Label3DElementOptions`
implemented by `Label3DElement`
Label3DElementOptions object used to define the properties that can be set on a Label3DElement.
| ### Properties ||
|---|---|
| `collisionBehavior` optional | **Type:** `CollisionBehavior optional` An enumeration specifying how the label of a Marker3DElement should behave when it collides with another element. |
| `for` optional | **Type:** `string|HTMLElement optional` The Marker3DElement that this label is for. |
## [PopoverElement](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#PopoverElement)
class
class
`google.maps.maps3d.PopoverElement`
extends `HTMLElement`
implements `PopoverElementOptions`
library `"maps3d"`
A custom HTML element that renders a popover. It looks like a bubble and is often connected to a marker.
```html
```
```javascript
const {PopoverElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `PopoverElement` | `PopoverElement([options])` **Parameters:** - `options: PopoverElementOptions optional` |
| ### Properties ||
|---|---|
| `altitudeMode` | **Input type:** `AltitudeMode optional` **Output type:** `AltitudeMode` **Default:** `AltitudeMode.CLAMP_TO_GROUND` Specifies how the altitude component of the position is interpreted. |
| `autoPanDisabled` attr: auto-pan-disabled | **Input type:** `boolean optional` **Output type:** `boolean` **Default:** `false` If set to true, disables panning the map to make the popover fully visible when it opens. **HTML attribute:** `auto-pan-disabled` |
| `lightDismissDisabled` attr: light-dismiss-disabled | **Input type:** `boolean optional` **Output type:** `boolean` **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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover). **HTML attribute:** `light-dismiss-disabled` |
| `open` attr: open | **Input type:** `boolean optional` **Output type:** `boolean` **Default:** `false` Specifies whether this popover should be open or not. **HTML attribute:** `open` |
| `positionAnchor` attr: position-anchor | **Input type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral|Marker3DInteractiveElement|MarkerInteractiveElement|string optional` **Output type:** `LatLngAltitude|Marker3DInteractiveElement|MarkerInteractiveElement optional` 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:** - `position-anchor="lat,lng"` - `position-anchor="lat,lng,altitude"` - `position-anchor="marker-id"` |
| ### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) for more details. If not specified, it defaults to the user's color scheme preferences. |
| `padding` | The padding of the popover. See `padding` [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) 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 ||
|---|---|
## [PopoverElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#PopoverElementOptions)
interface
interface
`google.maps.maps3d.PopoverElementOptions`
implemented by `PopoverElement`
PopoverElementOptions object used to define the properties that can be set on a PopoverElement.
| ### Properties ||
|---|---|
| `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 | **Type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral|string|Marker3DInteractiveElement|MarkerInteractiveElement optional` See `PopoverElement.positionAnchor`. |
## [AltitudeMode](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#AltitudeMode)
constants
constants
`google.maps.maps3d.AltitudeMode`
library `"maps3d"`
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.
```javascript
const {AltitudeMode} = await google.maps.importLibrary("maps3d");
```
| ### 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). |
## [CirclePathElement](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#CirclePathElement)
class
class
`google.maps.maps3d.CirclePathElement`
extends `HTMLElement`
implements `CirclePathElementOptions`
library `"maps3d"`
**Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel).
A 3D circle overlay on a 3D map.
```html
```
```javascript
const {CirclePathElement} = await google.maps.importLibrary("maps3d");
```
| ### Constructor ||
|---|---|
| `CirclePathElement` | `CirclePathElement([options])` **Parameters:** - `options: CirclePathElementOptions optional` Creates a `CirclePathElement` with the options specified. |
| ### Properties ||
|---|---|
| `center` attr: center | **Input type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` **Output type:** `LatLngAltitude optional` The center of the circle. **HTML attribute:** `center="lat,lng,altitude"` |
| `radius` attr: radius | **Input type:** `number optional` **Output type:** `number optional` The radius of the circle in meters. **HTML attribute:** `radius="number"` |
| ### Methods ||
|---|---|
## [CirclePathElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3d-map-draw.md.txt#CirclePathElementOptions)
interface
interface
`google.maps.maps3d.CirclePathElementOptions`
implemented by `CirclePathElement`
**Notice:** Available only in the [v=alpha channel](https://developers.google.com/maps/documentation/javascript/versions.md.txt#choosing-the-alpha-channel).
CirclePathElementOptions object used to define the properties that can be set on a CirclePathElement.
| ### Properties ||
|---|---|
| `center` optional | **Type:** `LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` See `CirclePathElement.center`. |
| `radius` optional | **Type:** `number optional` See `CirclePathElement.radius`. |