## [Marker3DElement](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#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:
``
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](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).
| ### Constructor ||
|---|---|
| `Marker3DElement` | `Marker3DElement([options])` **Parameters:** - `options`: `Marker3DElementOptions optional` Creates an `Marker3DElement` with the options specified. |
| ### Properties ||
|---|---|
| `altitudeMode` | **Type:** `AltitudeMode optional` **Default:** `AltitudeMode.CLAMP_TO_GROUND` Specifies how the altitude component of the position is interpreted. **HTML attribute:** - `` - `` - `` - `` |
| `collisionBehavior` | **Type:** `CollisionBehavior optional` **Default:** `CollisionBehavior.REQUIRED` An enumeration specifying how a Marker3DElement should behave when it collides with another Marker3DElement or with the basemap labels. **HTML attribute:** - `` - `` - `` |
| `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:** - `` |
| `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:** - `` |
| `label` | **Type:** `string optional` Text to be displayed by this marker. **HTML attribute:** - `` |
| `position` | **Type:** `LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` The location of the tip of the marker. Altitude is ignored in certain modes and thus optional. **HTML attribute:** - `` - `` |
| `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:** - `` |
| `zIndex` | **Type:** `number optional` The zIndex compared to other markers. **HTML attribute:** - `` |
| ### 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 ||
|---|---|
| `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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters). 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). |
| `removeEventListener` | `removeEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A string which specifies the type of event for which to remove an event listener. - `listener`: `EventListener|EventListenerObject` The event listener of the event handler to remove from the event target. - `options`: `boolean|EventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#parameters). **Return Value:** `void` Removes an event listener previously registered with addEventListener from the target. See [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). |
## [Marker3DElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#Marker3DElementOptions)
interface
`google.maps.maps3d.Marker3DElementOptions`
interface
Marker3DElementOptions object used to define the properties that can be set on a Marker3DElement.
| ### Properties ||
|---|---|
| `altitudeMode optional` | **Type:** `AltitudeMode optional` See `Marker3DElement.altitudeMode`. |
| `collisionBehavior optional` | **Type:** `CollisionBehavior optional` See `Marker3DElement.collisionBehavior`. |
| `drawsWhenOccluded optional` | **Type:** `boolean optional` See `Marker3DElement.drawsWhenOccluded`. |
| `extruded optional` | **Type:** `boolean optional` See `Marker3DElement.extruded`. |
| `label optional` | **Type:** `string optional` See `Marker3DElement.label`. |
| `position optional` | **Type:** `LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` See `Marker3DElement.position`. |
| `sizePreserved optional` | **Type:** `boolean optional` See `Marker3DElement.sizePreserved`. |
| `zIndex optional` | **Type:** `number optional` See `Marker3DElement.zIndex`. |
## [Marker3DInteractiveElement](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#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:
``
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](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).
| ### Constructor ||
|---|---|
| `Marker3DInteractiveElement` | `Marker3DInteractiveElement([options])` **Parameters:** - `options`: `Marker3DInteractiveElementOptions optional` 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:** - `` |
| `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:** - `` |
| ### 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters). 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). |
| `removeEventListener` | `removeEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A string which specifies the type of event for which to remove an event listener. - `listener`: `EventListener|EventListenerObject` The event listener of the event handler to remove from the event target. - `options`: `boolean|EventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#parameters). **Return Value:** `void` Removes an event listener previously registered with addEventListener from the target. See [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). |
| ### Events ||
|---|---|
| `gmp-click` | `function(clickEvent)` **Arguments:** - `clickEvent`: `LocationClickEvent` This event is fired when the `Marker3DInteractiveElement` element is clicked. |
## [Marker3DInteractiveElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#Marker3DInteractiveElementOptions)
interface
`google.maps.maps3d.Marker3DInteractiveElementOptions`
interface
Marker3DInteractiveElementOptions object used to define the properties that can be set on a Marker3DInteractiveElement.
This interface extends
`Marker3DElementOptions`.
| ### 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/3.63/3d-map-draw.md.txt#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](https://www.khronos.org/gltf/pbr) should be supported. No extensions or extension properties are currently supported.
Custom element:
``
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](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).
| ### Constructor ||
|---|---|
| `Model3DElement` | `Model3DElement([options])` **Parameters:** - `options`: `Model3DElementOptions optional` Creates an `Model3DElement` with the options specified. |
| ### Properties ||
|---|---|
| `altitudeMode` | **Type:** `AltitudeMode optional` **Default:** `AltitudeMode.CLAMP_TO_GROUND` Specifies how altitude in the position is interpreted. **HTML attribute:** - `` - `` - `` - `` |
| `orientation` | **Type:** `Orientation3D|Orientation3DLiteral 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:** - `` |
| `position` | **Type:** `LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional` Sets the `Model3DElement`'s position. Altitude is ignored in certain modes and thus optional. **HTML attribute:** - `` - `` |
| `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:** - `` - `` |
| `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:** - `` |
| ### 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters). 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). |
| `removeEventListener` | `removeEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A string which specifies the type of event for which to remove an event listener. - `listener`: `EventListener|EventListenerObject` The event listener of the event handler to remove from the event target. - `options`: `boolean|EventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#parameters). **Return Value:** `void` Removes an event listener previously registered with addEventListener from the target. See [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). |
## [Model3DElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#Model3DElementOptions)
interface
`google.maps.maps3d.Model3DElementOptions`
interface
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:** `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/3.63/3d-map-draw.md.txt#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](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.
Custom element:
``
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](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).
| ### Constructor ||
|---|---|
| `Model3DInteractiveElement` | `Model3DInteractiveElement([options])` **Parameters:** - `options`: `Model3DElementOptions optional` Creates a `Model3DInteractiveElement` with the options specified. |
| ### Properties ||
|---|---|
| ### 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters). 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). |
| `removeEventListener` | `removeEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A string which specifies the type of event for which to remove an event listener. - `listener`: `EventListener|EventListenerObject` The event listener of the event handler to remove from the event target. - `options`: `boolean|EventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#parameters). **Return Value:** `void` Removes an event listener previously registered with addEventListener from the target. See [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). |
| ### Events ||
|---|---|
| `gmp-click` | `function(clickEvent)` **Arguments:** - `clickEvent`: `LocationClickEvent` This event is fired when the `Model3DInteractiveElement` element is clicked. |
## [Model3DInteractiveElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#Model3DInteractiveElementOptions)
interface
`google.maps.maps3d.Model3DInteractiveElementOptions`
interface
Model3DInteractiveElementOptions object used to define the properties that can be set on a Model3DInteractiveElement.
This interface extends
`Model3DElementOptions`.
| ### Properties ||
|---|---|
## [Polyline3DElement](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#Polyline3DElement)
class
`google.maps.maps3d.Polyline3DElement`
class
A 3D polyline is a linear overlay of connected line segments on a 3D map.
Custom element:
``
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](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).
| ### Constructor ||
|---|---|
| `Polyline3DElement` | `Polyline3DElement([options])` **Parameters:** - `options`: `Polyline3DElementOptions optional` Creates an `Polyline3DElement` with the options specified. |
| ### Properties ||
|---|---|
| `altitudeMode` | **Type:** `AltitudeMode optional` **Default:** `AltitudeMode.CLAMP_TO_GROUND` Specifies how altitude components in the coordinates are interpreted. **HTML attribute:** - `` - `` - `` - `` |
| `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:** - `` |
| `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:** - `` |
| `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:** - `` |
| `outerColor` | **Type:** `string optional` The outer color. All CSS3 colors are supported. **HTML attribute:** - `` |
| `outerWidth` | **Type:** `number optional` The outer width is between `0.0` and `1.0`. This is a percentage of the `strokeWidth`. **HTML attribute:** - `` |
| `path` | **Type:** `Iterable optional` The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional. **HTML attribute:** - `` |
| `strokeColor` | **Type:** `string optional` The stroke color. All CSS3 colors are supported. **HTML attribute:** - `` |
| `strokeWidth` | **Type:** `number optional` The stroke width in pixels. **HTML attribute:** - `` |
| `zIndex` | **Type:** `number optional` The zIndex compared to other polys. **HTML attribute:** - `` |
| `[coordinates](https://developers.google.com/maps/documentation/javascript/reference/3.63/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 ||
|---|---|
| `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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters). 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). |
| `removeEventListener` | `removeEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A string which specifies the type of event for which to remove an event listener. - `listener`: `EventListener|EventListenerObject` The event listener of the event handler to remove from the event target. - `options`: `boolean|EventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#parameters). **Return Value:** `void` Removes an event listener previously registered with addEventListener from the target. See [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). |
## [Polyline3DElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#Polyline3DElementOptions)
interface
`google.maps.maps3d.Polyline3DElementOptions`
interface
Polyline3DElementOptions object used to define the properties that can be set on a Polyline3DElement.
| ### Properties ||
|---|---|
| `altitudeMode optional` | **Type:** `AltitudeMode optional` See `Polyline3DElement.altitudeMode`. |
| `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`. |
| `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/3.63/3d-map-draw.md.txt#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:
``
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](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).
| ### Constructor ||
|---|---|
| `Polyline3DInteractiveElement` | `Polyline3DInteractiveElement([options])` **Parameters:** - `options`: `Polyline3DElementOptions optional` Creates a `Polyline3DInteractiveElement` with the options specified. |
| ### Properties ||
|---|---|
| ### 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters). 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). |
| `removeEventListener` | `removeEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A string which specifies the type of event for which to remove an event listener. - `listener`: `EventListener|EventListenerObject` The event listener of the event handler to remove from the event target. - `options`: `boolean|EventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#parameters). **Return Value:** `void` Removes an event listener previously registered with addEventListener from the target. See [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/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. |
## [Polyline3DInteractiveElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#Polyline3DInteractiveElementOptions)
interface
`google.maps.maps3d.Polyline3DInteractiveElementOptions`
interface
Polyline3DInteractiveElementOptions object used to define the properties that can be set on a Polyline3DInteractiveElement.
This interface extends
`Polyline3DElementOptions`.
| ### Properties ||
|---|---|
## [Polygon3DElement](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#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:
``
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](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).
| ### Constructor ||
|---|---|
| `Polygon3DElement` | `Polygon3DElement([options])` **Parameters:** - `options`: `Polygon3DElementOptions optional` Creates an `Polygon3DElement` with the options specified. |
| ### Properties ||
|---|---|
| `altitudeMode` | **Type:** `AltitudeMode optional` **Default:** `AltitudeMode.CLAMP_TO_GROUND` Specifies how altitude components in the coordinates are interpreted. **HTML attribute:** - `` - `` - `` - `` |
| `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:** - `` |
| `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:** - `` |
| `fillColor` | **Type:** `string optional` The fill color. All CSS3 colors are supported. **HTML attribute:** - `` |
| `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:** - `` |
| `innerPaths` | **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. |
| `path` | **Type:** `Iterable optional` The ordered sequence of coordinates that designates a closed loop. Altitude is ignored in certain modes and thus optional. **HTML attribute:** - `` |
| `strokeColor` | **Type:** `string optional` The stroke color. All CSS3 colors are supported. **HTML attribute:** - `` |
| `strokeWidth` | **Type:** `number optional` The stroke width in pixels. **HTML attribute:** - `` |
| `zIndex` | **Type:** `number optional` The zIndex compared to other polys. **HTML attribute:** - `` |
| `[outerCoordinates](https://developers.google.com/maps/documentation/javascript/reference/3.63/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/3.63/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 ||
|---|---|
| `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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters). 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). |
| `removeEventListener` | `removeEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A string which specifies the type of event for which to remove an event listener. - `listener`: `EventListener|EventListenerObject` The event listener of the event handler to remove from the event target. - `options`: `boolean|EventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#parameters). **Return Value:** `void` Removes an event listener previously registered with addEventListener from the target. See [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). |
## [Polygon3DElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#Polygon3DElementOptions)
interface
`google.maps.maps3d.Polygon3DElementOptions`
interface
Polygon3DElementOptions object used to define the properties that can be set on a Polygon3DElement.
| ### Properties ||
|---|---|
| `altitudeMode optional` | **Type:** `AltitudeMode optional` See `Polygon3DElement.altitudeMode`. |
| `drawsOccludedSegments optional` | **Type:** `boolean optional` See `Polygon3DElement.drawsOccludedSegments`. |
| `extruded optional` | **Type:** `boolean optional` See `Polygon3DElement.extruded`. |
| `fillColor optional` | **Type:** `string optional` See `Polygon3DElement.fillColor`. |
| `geodesic optional` | **Type:** `boolean optional` See `Polygon3DElement.geodesic`. |
| `innerCoordinates optional` | **Type:** `Iterable|Iterable> optional` See `Polygon3DElement.innerCoordinates`. |
| `outerCoordinates optional` | **Type:** `Iterable optional` See `Polygon3DElement.outerCoordinates`. |
| `strokeColor optional` | **Type:** `string optional` See `Polygon3DElement.strokeColor`. |
| `strokeWidth optional` | **Type:** `number optional` See `Polygon3DElement.strokeWidth`. |
| `zIndex optional` | **Type:** `number optional` See `Polygon3DElement.zIndex`. |
## [Polygon3DInteractiveElement](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#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:
``
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](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).
| ### Constructor ||
|---|---|
| `Polygon3DInteractiveElement` | `Polygon3DInteractiveElement([options])` **Parameters:** - `options`: `Polygon3DElementOptions optional` Creates a `Polygon3DInteractiveElement` with the options specified. |
| ### Properties ||
|---|---|
| ### 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters). 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). |
| `removeEventListener` | `removeEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A string which specifies the type of event for which to remove an event listener. - `listener`: `EventListener|EventListenerObject` The event listener of the event handler to remove from the event target. - `options`: `boolean|EventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#parameters). **Return Value:** `void` Removes an event listener previously registered with addEventListener from the target. See [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/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. |
## [Polygon3DInteractiveElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#Polygon3DInteractiveElementOptions)
interface
`google.maps.maps3d.Polygon3DInteractiveElementOptions`
interface
Polygon3DInteractiveElementOptions object used to define the properties that can be set on a Polygon3DInteractiveElement.
This interface extends
`Polygon3DElementOptions`.
| ### Properties ||
|---|---|
## [PopoverElement](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#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:
``
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](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).
| ### Constructor ||
|---|---|
| `PopoverElement` | `PopoverElement([options])` **Parameters:** - `options`: `PopoverElementOptions optional` |
| ### Properties ||
|---|---|
| `altitudeMode` | **Type:** `AltitudeMode optional` **Default:** `AltitudeMode.CLAMP_TO_GROUND` Specifies how the altitude component of the position is interpreted. **HTML attribute:** - `` - `` - `` - `` |
| `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:** - `` |
| `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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover). **HTML attribute:** - `` |
| `open` | **Type:** `boolean optional` **Default:** `false` Specifies whether this popover should be open or not. **HTML attribute:** - `` |
| `positionAnchor` | **Type:** `LatLngLiteral|LatLngAltitudeLiteral|Marker3DInteractiveElement|string 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:** - `` - `` - `` |
| ### 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 ||
|---|---|
| `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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters). 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). |
| `removeEventListener` | `removeEventListener(type, listener[, options])` **Parameters:** - `type`: `string` A string which specifies the type of event for which to remove an event listener. - `listener`: `EventListener|EventListenerObject` The event listener of the event handler to remove from the event target. - `options`: `boolean|EventListenerOptions optional` See [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#parameters). **Return Value:** `void` Removes an event listener previously registered with addEventListener from the target. See [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). |
## [PopoverElementOptions](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#PopoverElementOptions)
interface
`google.maps.maps3d.PopoverElementOptions`
interface
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:** `LatLngLiteral|LatLngAltitudeLiteral|string|Marker3DInteractiveElement optional` See `PopoverElement.positionAnchor`. |
## [AltitudeMode](https://developers.google.com/maps/documentation/javascript/reference/3.63/3d-map-draw.md.txt#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](https://developers.google.com/maps/documentation/javascript/libraries.md.txt).
| ### 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). |