Introducing Places UI Kit: A ready-to-use, low-cost component library that lets you bring the familiar Google Maps UI for Places to any map of your choice. Try it out, andshare your input to help shape the future of GMP!

3D Maps

Map3DElementclass

google.maps.maps3d.Map3DElementclass

Notice: Available only in the v=beta channel.

Map3DElement is an HTML interface for the 3D Map view. Note that themode must be set for the 3D Map to start rendering.

Custom element:
<gmp-map-3d center="lat,lng,altitude" default-ui-disabled heading="number" internal-usage-attribution-ids="id1 id2" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" mode="hybrid" range="number" roll="number" tilt="number"></gmp-map-3d>

This class extendsHTMLElement.

This class implementsMap3DElementOptions.

Access by callingconst {Map3DElement} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Constructor
`Map3DElement`	`Map3DElement([options])` Parameters: `options`: `Map3DElementOptionsoptional`

Properties
`bounds`	Type: `LatLngBounds\|LatLngBoundsLiteraloptional` When set, restricts the position of the camera within the specified lat/lng bounds. Note that objects outside the bounds are still rendered. Bounds can restrict both longitude and latitude, or can restrict either latitude or longitude only. For latitude-only bounds use west and east longitudes of`-180` and`180`, respectively. For longitude-only bounds use north and south latitudes of`90` and`-90`, respectively.
`center`	Type: `LatLngAltitude\|LatLngAltitudeLiteraloptional` The center of the map given as a LatLngAltitude, where altitude is in meters above ground level. Note that this is not necessarily where the camera is located, as the`range` field affects the camera's distance from the map center. If not set, defaults to`{lat: 0, lng: 0, altitude: 63170000}`. 63170000 meters is a maximum allowed altitude (Earth radius multiplied by 10). HTML attribute: `<gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>`
`defaultUIDisabled`	Type: `booleanoptional` Default:`false` When`true`, all default UI buttons are disabled. Does not disable the keyboard and gesture controls. HTML attribute: `<gmp-map-3d default-ui-disabled></gmp-map-3d>`
`heading`	Type: `numberoptional` The compass heading of the map, in degrees, where due north is zero. When there is no tilt, any roll will be interpreted as heading. HTML attribute: `<gmp-map-3d heading="number"></gmp-map-3d>`
`internalUsageAttributionIds`	Type: `Iterable<string>optional` Adds a usage attribution ID to the initializer, which helps Google understand which libraries and samples are helpful to developers, such as usage of a marker clustering library. To opt out of sending the usage attribution ID, it is safe to delete this property. Only unique values will be sent. Changes to this value after instantiation may be ignored. HTML attribute: `<gmp-map-3d internal-usage-attribution-ids="id1 id2"></gmp-map-3d>`
`maxAltitude`	Type: `numberoptional` The maximum altitude above the ground which will be displayed on the map. A valid value is between`0` and`63170000` meters (Earth radius multiplied by 10). HTML attribute: `<gmp-map-3d max-altitude="number"></gmp-map-3d>`
`maxHeading`	Type: `numberoptional` The maximum angle of heading (rotation) of the map. A valid value is between`0` and`360` degrees.`minHeading` and`maxHeading` represent an interval of <=`360` degrees in which heading gestures will be allowed.`minHeading = 180` and`maxHeading = 90` will allow heading in`[0, 90]` and heading in`[180, 360]`.`minHeading = 90` and`maxHeading = 180` will allow heading in`[90, 180]`. HTML attribute: `<gmp-map-3d max-heading="number"></gmp-map-3d>`
`maxTilt`	Type: `numberoptional` The maximum angle of incidence of the map. A valid value is between`0` and`90` degrees. HTML attribute: `<gmp-map-3d max-tilt="number"></gmp-map-3d>`
`minAltitude`	Type: `numberoptional` The minimum altitude above the ground which will be displayed on the map. A valid value is between`0` and`63170000` meters (Earth radius multiplied by 10). HTML attribute: `<gmp-map-3d min-altitude="number"></gmp-map-3d>`
`minHeading`	Type: `numberoptional` The minimum angle of heading (rotation) of the map. A valid value is between`0` and`360` degrees.`minHeading` and`maxHeading` represent an interval of <=`360` degrees in which heading gestures will be allowed.`minHeading = 180` and`maxHeading = 90` will allow heading in`[0, 90]` and heading in`[180, 360]`.`minHeading = 90` and`maxHeading = 180` will allow heading in`[90, 180]`. HTML attribute: `<gmp-map-3d min-heading="number"></gmp-map-3d>`
`minTilt`	Type: `numberoptional` The minimum angle of incidence of the map. A valid value is between`0` and`90` degrees. HTML attribute: `<gmp-map-3d min-tilt="number"></gmp-map-3d>`
`mode`	Type: `MapModeoptional` Specifies a mode the map should be rendered in. If not set, the map won't be rendered. HTML attribute: `<gmp-map-3d mode="hybrid"></gmp-map-3d>` `<gmp-map-3d mode="satellite"></gmp-map-3d>`
`range`	Type: `numberoptional` The distance from camera to the center of the map, in meters. HTML attribute: `<gmp-map-3d range="number"></gmp-map-3d>`
`roll`	Type: `numberoptional` The roll of the camera around the view vector in degrees. To resolve ambiguities, when there is no tilt, any roll will be interpreted as heading. HTML attribute: `<gmp-map-3d roll="number"></gmp-map-3d>`
`tilt`	Type: `numberoptional` The tilt of the camera's view vector in degrees. A view vector looking directly down at the earth would have a tilt of zero degrees. A view vector pointing away from the earth would have a tilt of`180` degrees. HTML attribute: `<gmp-map-3d tilt="number"></gmp-map-3d>`

Methods
`addEventListener`	Notice: Available only in the v=beta channel. `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\|AddEventListenerOptionsoptional` Seeoptions. 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. SeeaddEventListener.
`flyCameraAround`	`flyCameraAround(options)` Parameters: `options`: `FlyAroundAnimationOptions` Return Value: None This method orbits the camera around a given location for a given duration, making the given number of rounds in that time. By default, the camera orbits clockwise. If given a negative number for rounds, the camera will orbit in a counter-clockwise direction instead. The method is asynchronous because animations can only start after the map has loaded a minimum amount. The method returns once the animation has been started. If the number of rounds is zero, no spin will occur, and the animation will complete immediately after it starts.
`flyCameraTo`	`flyCameraTo(options)` Parameters: `options`: `FlyToAnimationOptions` Return Value: None This method moves the camera parabolically from the current location to a given end location over a given duration. The method is asynchronous because animations can only start after the map has loaded a minimum amount. The method returns once the animation has been started.
`removeEventListener`	Notice: Available only in the v=beta channel. `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\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.
`stopCameraAnimation`	`stopCameraAnimation()` Parameters: None Return Value: None This method stops any fly animation that might happen to be running. The camera stays wherever it is mid-animation; it does not teleport to the end point. The method is asynchronous because animations can only start or stop after the map has loaded a minimum amount. The method returns once the animation has stopped.

Events
`gmp-animationend`	`function(animationEndEvent)` Arguments: `animationEndEvent`: `Event` This event is fired when the fly animation ends. This event bubbles up through the DOM tree.
`gmp-centerchange`	`function(centerChangeEvent)` Arguments: `centerChangeEvent`: `Event` This event is fired when the Map3DElement's center property changes.
`gmp-click`	`function(clickEvent)` Arguments: `clickEvent`: `LocationClickEvent\|PlaceClickEvent` This event is fired when the`Map3DElement` element is clicked.
`gmp-headingchange`	`function(headingChangeEvent)` Arguments: `headingChangeEvent`: `Event` This event is fired when the Map3DElement's heading property changes.
`gmp-rangechange`	`function(rangeChangeEvent)` Arguments: `rangeChangeEvent`: `Event` This event is fired when the Map3DElement's range property changes.
`gmp-rollchange`	`function(rollChangeEvent)` Arguments: `rollChangeEvent`: `Event` This event is fired when the Map3DElement's roll property changes.
`gmp-steadychange`	`function(steadyChangeEvent)` Arguments: `steadyChangeEvent`: `SteadyChangeEvent` This event is fired when the steady state of`Map3DElement` changes.
`gmp-tiltchange`	`function(tiltChangeEvent)` Arguments: `tiltChangeEvent`: `Event` This event is fired when the Map3DElement's tilt property changes.

Map3DElementOptionsinterface

google.maps.maps3d.Map3DElementOptionsinterface

Notice: Available only in the v=beta channel.

Map3DElementOptions object used to define the properties that can be set on a Map3DElement.

Properties
`boundsoptional`	Type: `LatLngBounds\|LatLngBoundsLiteraloptional` See`Map3DElement.bounds`.
`centeroptional`	Type: `LatLngAltitude\|LatLngAltitudeLiteraloptional` See`Map3DElement.center`.
`defaultUIDisabledoptional`	Type: `booleanoptional` See`Map3DElement.defaultUIDisabled`.
`headingoptional`	Type: `numberoptional` See`Map3DElement.heading`.
`internalUsageAttributionIdsoptional`	Type: `Iterable<string>optional` See`Map3DElement.internalUsageAttributionIds`.
`maxAltitudeoptional`	Type: `numberoptional` See`Map3DElement.maxAltitude`.
`maxHeadingoptional`	Type: `numberoptional` See`Map3DElement.maxHeading`.
`maxTiltoptional`	Type: `numberoptional` See`Map3DElement.maxTilt`.
`minAltitudeoptional`	Type: `numberoptional` See`Map3DElement.minAltitude`.
`minHeadingoptional`	Type: `numberoptional` See`Map3DElement.minHeading`.
`minTiltoptional`	Type: `numberoptional` See`Map3DElement.minTilt`.
`modeoptional`	Type: `MapModeoptional` See`Map3DElement.mode`.
`rangeoptional`	Type: `numberoptional` See`Map3DElement.range`.
`rolloptional`	Type: `numberoptional` See`Map3DElement.roll`.
`tiltoptional`	Type: `numberoptional` See`Map3DElement.tilt`.

MapModeconstants

google.maps.maps3d.MapModeconstants

Notice: Available only in the v=beta channel.

Specifies a mode the map should be rendered in.

Access by callingconst {MapMode} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Constants
`HYBRID`	This map mode displays a transparent layer of major streets on satellite, or photorealistic imagery.
`SATELLITE`	This map mode displays satellite, or photorealistic imagery where available.

FlyAroundAnimationOptionsinterface

google.maps.maps3d.FlyAroundAnimationOptionsinterface

Notice: Available only in the v=beta channel.

Customization options for the FlyCameraAround Animation.

Properties
`camera`	Type: `CameraOptions` The central point at which the camera should look at during the orbit animation. Note that the map heading will change as the camera orbits around this center point.
`durationMillisoptional`	Type: `numberoptional` The duration of the animation in milliseconds. This is the total duration of the animation, not the duration of a single rotation.
`roundsoptional`	Type: `numberoptional` The number of rounds to rotate around the center in the given duration. This controls the overall speed of rotation. Passing a negative number to rounds will cause the camera to rotate in a counter-clockwise direction instead of the default clockwise direction.

FlyToAnimationOptionsinterface

google.maps.maps3d.FlyToAnimationOptionsinterface

Notice: Available only in the v=beta channel.

Customization options for the FlyCameraTo Animation.

Properties
`endCamera`	Type: `CameraOptions` The location at which the camera should point at the end of the animation.
`durationMillisoptional`	Type: `numberoptional` The duration of the animation in milliseconds. A duration of 0 will teleport the camera straight to the end position.

CameraOptionsinterface

google.maps.maps3d.CameraOptionsinterface

Notice: Available only in the v=beta channel.

CameraOptions object used to define the properties that can be set on a camera object. The camera object can be anything that has a camera position, e.g. a current map state, or a future requested animation state.

Properties
`centeroptional`	Type: `LatLngAltitude\|LatLngAltitudeLiteraloptional` See`Map3DElement.center`.
`headingoptional`	Type: `numberoptional` See`Map3DElement.heading`.
`rangeoptional`	Type: `numberoptional` See`Map3DElement.range`.
`rolloptional`	Type: `numberoptional` See`Map3DElement.roll`.
`tiltoptional`	Type: `numberoptional` See`Map3DElement.tilt`.

SteadyChangeEventclass

google.maps.maps3d.SteadyChangeEventclass

Notice: Available only in the v=beta channel.

This event is created from monitoring a steady state ofMap3DElement. This event bubbles up through the DOM tree.

This class extendsEvent.

Access by callingconst {SteadyChangeEvent} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Properties
`isSteady`	Type: `boolean` Indicates whether Map3DElement is steady (i.e. all rendering for the current scene has completed) or not.

LocationClickEventclass

google.maps.maps3d.LocationClickEventclass

Notice: Available only in the v=beta channel.

This event is created from clicking a Map3DElement.

This class extendsEvent.

Access by callingconst {LocationClickEvent} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Properties
`position`	Type: `LatLngAltitudeoptional` The latitude/longitude/altitude that was below the cursor when the event occurred. Please note, that at coarser levels, less accurate data will be returned. Also, sea floor elevation may be returned for the altitude value when clicking at the water surface from higher camera positions. This event bubbles up through the DOM tree.

PlaceClickEventclass

google.maps.maps3d.PlaceClickEventclass

Notice: Available only in the v=beta channel.

This event is created from clicking on a place icon on aMap3DElement. To prevent the default popover from showing up, call thepreventDefault() method on this event to prevent it being handled by theMap3DElement.

This class extendsLocationClickEvent.

Access by callingconst {PlaceClickEvent} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Properties
`placeId`	Type: `string` The place id of the map feature.
Inherited:`position`

Methods
`fetchPlace`	`fetchPlace()` Parameters: None Return Value: `Promise<Place>` Fetches a`Place` for this place id. In the resulting`Place` object, the id property will be populated. Additional fields can be subsequently requested via`Place.fetchFields()` subject to normal Places API enablement and billing. The promise is rejected if there was an error fetching the`Place`.

Marker3DElementclass

google.maps.maps3d.Marker3DElementclass

Notice: Available only in the v=beta channel.

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

Custom element:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"></gmp-marker-3d>

This class extendsHTMLElement.

This class implementsMarker3DElementOptions.

Access by callingconst {Marker3DElement} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Constructor
`Marker3DElement`	`Marker3DElement([options])` Parameters: `options`: `Marker3DElementOptionsoptional` Creates an`Marker3DElement` with the options specified.

Properties
`altitudeMode`	Type: `AltitudeModeoptional` Default:`AltitudeMode.CLAMP_TO_GROUND` Specifies how the altitude component of the position is interpreted. HTML attribute: `<gmp-marker-3d altitude-mode="absolute"></gmp-marker-3d>` `<gmp-marker-3d altitude-mode="clamp-to-ground"></gmp-marker-3d>` `<gmp-marker-3d altitude-mode="relative-to-ground"></gmp-marker-3d>` `<gmp-marker-3d altitude-mode="relative-to-mesh"></gmp-marker-3d>`
`collisionBehavior`	Type: `CollisionBehavioroptional` Default:`CollisionBehavior.REQUIRED` An enumeration specifying how a Marker3DElement should behave when it collides with another Marker3DElement or with the basemap labels. HTML attribute: `<gmp-marker-3d collision-behavior="required"></gmp-marker-3d>` `<gmp-marker-3d collision-behavior="required-and-hides-optional"></gmp-marker-3d>` `<gmp-marker-3d collision-behavior="optional-and-hides-lower-priority"></gmp-marker-3d>`
`drawsWhenOccluded`	Type: `booleanoptional` Default:`false` Specifies whether this marker should be drawn or not when it's occluded. The marker can be occluded by map geometry (e.g. buildings). HTML attribute: `<gmp-marker-3d draws-when-occluded></gmp-marker-3d>`
`extruded`	Type: `booleanoptional` Default:`false` Specifies whether to connect the marker to the ground. To extrude a marker, the`altitudeMode` must be either`RELATIVE_TO_GROUND` or`ABSOLUTE`. HTML attribute: `<gmp-marker-3d extruded></gmp-marker-3d>`
`label`	Type: `stringoptional` Text to be displayed by this marker. HTML attribute: `<gmp-marker-3d label="string"></gmp-marker-3d>`
`position`	Type: `LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteraloptional` The location of the tip of the marker. Altitude is ignored in certain modes and thus optional. HTML attribute: `<gmp-marker-3d position="lat,lng"></gmp-marker-3d>` `<gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>`
`sizePreserved`	Type: `booleanoptional` Default:`false` Specifies whether this marker should preserve its size or not regardless of distance from camera. By default, the marker is scaled based on distance from camera/tilt. HTML attribute: `<gmp-marker-3d size-preserved></gmp-marker-3d>`
`zIndex`	Type: `numberoptional` The zIndex compared to other markers. HTML attribute: `<gmp-marker-3d z-index="number"></gmp-marker-3d>`

Slots
`default`	Any custom elements directly added to the`Marker3DElement` will be slotted, however only elements of`HTMLImageElement`,`SVGElement` and`PinElement` types will be used for drawing markers, other elements will be ignored. `HTMLImageElement` and`SVGElement` must be wrapped in`<template>` element before assigning to the`Marker3DElement`'s default slot. Images and SVGs are currently rasterized before they are rendered in the 3D scene, so custom HTML embedded into SVG or CSS classes added to images won't be applied and might not be reflected when markers are displayed on the screen.

Slots

default

Any custom elements directly added to theMarker3DElement will be slotted, however only elements ofHTMLImageElement,SVGElement andPinElement types will be used for drawing markers, other elements will be ignored.
HTMLImageElement andSVGElement must be wrapped in<template> element before assigning to theMarker3DElement'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

Notice: Available only in the v=beta channel.

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|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

Notice: Available only in the v=beta channel.

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|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Marker3DElementOptionsinterface

google.maps.maps3d.Marker3DElementOptionsinterface

Notice: Available only in the v=beta channel.

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

Properties
`altitudeModeoptional`	Type: `AltitudeModeoptional` See`Marker3DElement.altitudeMode`.
`collisionBehavioroptional`	Type: `CollisionBehavioroptional` See`Marker3DElement.collisionBehavior`.
`drawsWhenOccludedoptional`	Type: `booleanoptional` See`Marker3DElement.drawsWhenOccluded`.
`extrudedoptional`	Type: `booleanoptional` See`Marker3DElement.extruded`.
`labeloptional`	Type: `stringoptional` See`Marker3DElement.label`.
`positionoptional`	Type: `LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteraloptional` See`Marker3DElement.position`.
`sizePreservedoptional`	Type: `booleanoptional` See`Marker3DElement.sizePreserved`.
`zIndexoptional`	Type: `numberoptional` See`Marker3DElement.zIndex`.

Marker3DInteractiveElementclass

google.maps.maps3d.Marker3DInteractiveElementclass

Notice: Available only in the v=beta channel.

Shows a position on a 3D map. Note that theposition must be set for theMarker3DInteractiveElement to display. UnlikeMarker3DElement,Marker3DInteractiveElement receives agmp-click event.

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

This class extendsMarker3DElement.

This class implementsMarker3DInteractiveElementOptions.

Access by callingconst {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Constructor
`Marker3DInteractiveElement`	`Marker3DInteractiveElement([options])` Parameters: `options`: `Marker3DInteractiveElementOptionsoptional` Creates an`Marker3DInteractiveElement` with the options specified.

Properties
`gmpPopoverTargetElement`	Type: `PopoverElementoptional` When set, the popover element will be open on this marker's click. HTML attribute: `<gmp-marker-3d-interactive gmp-popover-target="popover-id"></gmp-marker-3d-interactive>`
`title`	Type: `string` Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the`Marker3DInteractiveElement` with the provided value. HTML attribute: `<gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>`
Inherited:`altitudeMode`,`collisionBehavior`,`drawsWhenOccluded`,`extruded`,`label`,`position`,`sizePreserved`,`zIndex`

Slots
`default`	Any custom elements directly added to the`Marker3DInteractiveElement` will be slotted, however only elements of`PinElement`'s type will be used for drawing markers, other elements will be ignored.

Methods

addEventListener

Notice: Available only in the v=beta channel.

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|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

Notice: Available only in the v=beta channel.

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|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Events
`gmp-click`	`function(clickEvent)` Arguments: `clickEvent`: `LocationClickEvent` This event is fired when the`Marker3DInteractiveElement` element is clicked.

Marker3DInteractiveElementOptionsinterface

google.maps.maps3d.Marker3DInteractiveElementOptionsinterface

Notice: Available only in the v=beta channel.

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

This interface extendsMarker3DElementOptions.

Properties
`gmpPopoverTargetElementoptional`	Type: `PopoverElementoptional` See`Marker3DInteractiveElement.gmpPopoverTargetElement`.
`titleoptional`	Type: `stringoptional` See`Marker3DInteractiveElement.title`.
Inherited:`altitudeMode`,`collisionBehavior`,`drawsWhenOccluded`,`extruded`,`label`,`position`,`sizePreserved`,`zIndex`

Model3DElementclass

google.maps.maps3d.Model3DElementclass

Notice: Available only in the v=beta channel.

A 3D model which allows the rendering of gLTF models. Note that theposition and thesrc must be set for theModel3DElement to display.

Core properties of thegLTF PBR should be supported. No extensions or extension properties are currently supported.

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

This class extendsHTMLElement.

This class implementsModel3DElementOptions.

Access by callingconst {Model3DElement} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Constructor
`Model3DElement`	`Model3DElement([options])` Parameters: `options`: `Model3DElementOptionsoptional` Creates an`Model3DElement` with the options specified.

Properties
`altitudeMode`	Type: `AltitudeModeoptional` Default:`AltitudeMode.CLAMP_TO_GROUND` Specifies how altitude in the position is interpreted. HTML attribute: `<gmp-model-3d altitude-mode="absolute"></gmp-model-3d>` `<gmp-model-3d altitude-mode="clamp-to-ground"></gmp-model-3d>` `<gmp-model-3d altitude-mode="relative-to-ground"></gmp-model-3d>` `<gmp-model-3d altitude-mode="relative-to-mesh"></gmp-model-3d>`
`orientation`	Type: `Orientation3D\|Orientation3DLiteraloptional` Describes rotation of a 3D model's coordinate system to position the model on the 3D Map. Rotations are applied to the model in the following order: roll, tilt and then heading. HTML attribute: `<gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>`
`position`	Type: `LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteraloptional` Sets the`Model3DElement`'s position. Altitude is ignored in certain modes and thus optional. HTML attribute: `<gmp-model-3d position="lat,lng"></gmp-model-3d>` `<gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>`
`scale`	Type: `number\|Vector3D\|Vector3DLiteraloptional` Default:`1` Scales the model along the x, y, and z axes in the model's coordinate space. HTML attribute: `<gmp-model-3d scale="number"></gmp-model-3d>` `<gmp-model-3d scale="x,y,z"></gmp-model-3d>`
`src`	Type: `string\|URLoptional` Specifies the url of the 3D model. At this time, only models in the`.glb` format are supported. Any relative HTTP urls will be resolved to their corresponding absolute ones. Please note that If you're hosting your`.glb` model files on a different website or server than your main application, make sure to set up the correct CORS HTTP headers. This allows your application to securely access the model files from the other domain. HTML attribute: `<gmp-model-3d src="url"></gmp-model-3d>`

Methods

addEventListener

Notice: Available only in the v=beta channel.

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|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

Notice: Available only in the v=beta channel.

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|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Model3DElementOptionsinterface

google.maps.maps3d.Model3DElementOptionsinterface

Notice: Available only in the v=beta channel.

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

Properties
`altitudeModeoptional`	Type: `AltitudeModeoptional` See`Model3DElement.altitudeMode`.
`orientationoptional`	Type: `Orientation3D\|Orientation3DLiteraloptional` See`Model3DElement.orientation`.
`positionoptional`	Type: `LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteraloptional` See`Model3DElement.position`.
`scaleoptional`	Type: `number\|Vector3D\|Vector3DLiteraloptional` See`Model3DElement.scale`.
`srcoptional`	Type: `string\|URLoptional` See`Model3DElement.src`.

Model3DInteractiveElementclass

google.maps.maps3d.Model3DInteractiveElementclass

Notice: Available only in the v=beta channel.

Custom element:
<gmp-model-3d-interactive></gmp-model-3d-interactive>

This class extendsModel3DElement.

This class implementsModel3DInteractiveElementOptions.

Access by callingconst {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Constructor
`Model3DInteractiveElement`	`Model3DInteractiveElement([options])` Parameters: `options`: `Model3DElementOptionsoptional` Creates a`Model3DInteractiveElement` with the options specified.

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

Methods

addEventListener

Notice: Available only in the v=beta channel.

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|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

Notice: Available only in the v=beta channel.

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|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Events
`gmp-click`	`function(clickEvent)` Arguments: `clickEvent`: `LocationClickEvent` This event is fired when the`Model3DInteractiveElement` element is clicked.

Model3DInteractiveElementOptionsinterface

google.maps.maps3d.Model3DInteractiveElementOptionsinterface

Notice: Available only in the v=beta channel.

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

This interface extendsModel3DElementOptions.

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

Polyline3DElementclass

google.maps.maps3d.Polyline3DElementclass

Notice: Available only in the v=beta channel.

A 3D polyline is a linear overlay of connected line segments on a 3D map.

Custom element:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

This class extendsHTMLElement.

This class implementsPolyline3DElementOptions.

Access by callingconst {Polyline3DElement} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Constructor
`Polyline3DElement`	`Polyline3DElement([options])` Parameters: `options`: `Polyline3DElementOptionsoptional` Creates an`Polyline3DElement` with the options specified.

Properties
`altitudeMode`	Type: `AltitudeModeoptional` Default:`AltitudeMode.CLAMP_TO_GROUND` Specifies how altitude components in the coordinates are interpreted. HTML attribute: `<gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>` `<gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>` `<gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>` `<gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>`
`coordinates`	Type: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral>optional` The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional.
`drawsOccludedSegments`	Type: `booleanoptional` Default:`false` Specifies whether parts of the polyline which could be occluded are drawn or not. Polylines can be occluded by map geometry (e.g. buildings). HTML attribute: `<gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>`
`extruded`	Type: `booleanoptional` Default:`false` Specifies whether to connect the polyline to the ground. To extrude a polyline, the`altitudeMode` must be either`RELATIVE_TO_GROUND` or`ABSOLUTE`. HTML attribute: `<gmp-polyline-3d extruded></gmp-polyline-3d>`
`geodesic`	Type: `booleanoptional` Default:`false` When`true`, edges of the polyline are interpreted as geodesic and will follow the curvature of the Earth. When`false`, edges of the polyline are rendered as straight lines in screen space. HTML attribute: `<gmp-polyline-3d geodesic></gmp-polyline-3d>`
`outerColor`	Type: `stringoptional` The outer color. All CSS3 colors are supported. HTML attribute: `<gmp-polyline-3d outer-color="string"></gmp-polyline-3d>`
`outerWidth`	Type: `numberoptional` The outer width is between`0.0` and`1.0`. This is a percentage of the`strokeWidth`. HTML attribute: `<gmp-polyline-3d outer-width="number"></gmp-polyline-3d>`
`strokeColor`	Type: `stringoptional` The stroke color. All CSS3 colors are supported. HTML attribute: `<gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>`
`strokeWidth`	Type: `numberoptional` The stroke width in pixels. HTML attribute: `<gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>`
`zIndex`	Type: `numberoptional` The zIndex compared to other polys. HTML attribute: `<gmp-polyline-3d z-index="number"></gmp-polyline-3d>`

Methods

addEventListener

Notice: Available only in the v=beta channel.

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|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

Notice: Available only in the v=beta channel.

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|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Polyline3DElementOptionsinterface

google.maps.maps3d.Polyline3DElementOptionsinterface

Notice: Available only in the v=beta channel.

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

Properties
`altitudeModeoptional`	Type: `AltitudeModeoptional` See`Polyline3DElement.altitudeMode`.
`coordinatesoptional`	Type: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral>optional` See`Polyline3DElement.coordinates`.
`drawsOccludedSegmentsoptional`	Type: `booleanoptional` See`Polyline3DElement.drawsOccludedSegments`.
`extrudedoptional`	Type: `booleanoptional` See`Polyline3DElement.extruded`.
`geodesicoptional`	Type: `booleanoptional` See`Polyline3DElement.geodesic`.
`outerColoroptional`	Type: `stringoptional` See`Polyline3DElement.outerColor`.
`outerWidthoptional`	Type: `numberoptional` See`Polyline3DElement.outerWidth`.
`strokeColoroptional`	Type: `stringoptional` See`Polyline3DElement.strokeColor`.
`strokeWidthoptional`	Type: `numberoptional` See`Polyline3DElement.strokeWidth`.
`zIndexoptional`	Type: `numberoptional` See`Polyline3DElement.zIndex`.

Polyline3DInteractiveElementclass

google.maps.maps3d.Polyline3DInteractiveElementclass

Notice: Available only in the v=beta channel.

A 3D polyline is a linear overlay of connected line segments on a 3D map. UnlikePolyline3DElement,Polyline3DInteractiveElement receives agmp-click event.

Custom element:
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

This class extendsPolyline3DElement.

This class implementsPolyline3DInteractiveElementOptions.

Access by callingconst {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Constructor
`Polyline3DInteractiveElement`	`Polyline3DInteractiveElement([options])` Parameters: `options`: `Polyline3DElementOptionsoptional` Creates a`Polyline3DInteractiveElement` with the options specified.

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

Methods

addEventListener

Notice: Available only in the v=beta channel.

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|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

Notice: Available only in the v=beta channel.

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|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

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.

Polyline3DInteractiveElementOptionsinterface

google.maps.maps3d.Polyline3DInteractiveElementOptionsinterface

Notice: Available only in the v=beta channel.

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

This interface extendsPolyline3DElementOptions.

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

Polygon3DElementclass

google.maps.maps3d.Polygon3DElementclass

Notice: Available only in the v=beta channel.

A 3D polygon (like a 3D polyline) defines a series of connected coordinates in an ordered sequence. Additionally, polygons form a closed loop and define a filled region.

Custom element:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

This class extendsHTMLElement.

This class implementsPolygon3DElementOptions.

Access by callingconst {Polygon3DElement} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Constructor
`Polygon3DElement`	`Polygon3DElement([options])` Parameters: `options`: `Polygon3DElementOptionsoptional` Creates an`Polygon3DElement` with the options specified.

Properties
`altitudeMode`	Type: `AltitudeModeoptional` Default:`AltitudeMode.CLAMP_TO_GROUND` Specifies how altitude components in the coordinates are interpreted. HTML attribute: `<gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>` `<gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>` `<gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>` `<gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>`
`drawsOccludedSegments`	Type: `booleanoptional` Default:`false` Specifies whether parts of the polygon which could be occluded are drawn or not. Polygons can be occluded by map geometry (e.g. buildings). HTML attribute: `<gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>`
`extruded`	Type: `booleanoptional` Default:`false` Specifies whether to connect the polygon to the ground. To extrude a polygon, the`altitudeMode` must be either`RELATIVE_TO_GROUND` or`ABSOLUTE`. HTML attribute: `<gmp-polygon-3d extruded></gmp-polygon-3d>`
`fillColor`	Type: `stringoptional` The fill color. All CSS3 colors are supported. HTML attribute: `<gmp-polygon-3d fill-color="string"></gmp-polygon-3d>`
`geodesic`	Type: `booleanoptional` Default:`false` When`true`, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When`false`, edges of the polygon are rendered as straight lines in screen space. HTML attribute: `<gmp-polygon-3d geodesic></gmp-polygon-3d>`
`innerCoordinates`	Type: `Iterable<Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral>>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.
`outerCoordinates`	Type: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral>optional` The ordered sequence of coordinates that designates a closed loop. Altitude is ignored in certain modes and thus optional.
`strokeColor`	Type: `stringoptional` The stroke color. All CSS3 colors are supported. HTML attribute: `<gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>`
`strokeWidth`	Type: `numberoptional` The stroke width in pixels. HTML attribute: `<gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>`
`zIndex`	Type: `numberoptional` The zIndex compared to other polys. HTML attribute: `<gmp-polygon-3d z-index="number"></gmp-polygon-3d>`

Methods

addEventListener

Notice: Available only in the v=beta channel.

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|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

Notice: Available only in the v=beta channel.

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|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Polygon3DElementOptionsinterface

google.maps.maps3d.Polygon3DElementOptionsinterface

Notice: Available only in the v=beta channel.

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

Properties
`altitudeModeoptional`	Type: `AltitudeModeoptional` See`Polygon3DElement.altitudeMode`.
`drawsOccludedSegmentsoptional`	Type: `booleanoptional` See`Polygon3DElement.drawsOccludedSegments`.
`extrudedoptional`	Type: `booleanoptional` See`Polygon3DElement.extruded`.
`fillColoroptional`	Type: `stringoptional` See`Polygon3DElement.fillColor`.
`geodesicoptional`	Type: `booleanoptional` See`Polygon3DElement.geodesic`.
`innerCoordinatesoptional`	Type: `Iterable<Iterable<LatLngAltitude\|LatLngAltitudeLiteral>\|Iterable<LatLngLiteral>>optional` See`Polygon3DElement.innerCoordinates`.
`outerCoordinatesoptional`	Type: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral>optional` See`Polygon3DElement.outerCoordinates`.
`strokeColoroptional`	Type: `stringoptional` See`Polygon3DElement.strokeColor`.
`strokeWidthoptional`	Type: `numberoptional` See`Polygon3DElement.strokeWidth`.
`zIndexoptional`	Type: `numberoptional` See`Polygon3DElement.zIndex`.

Polygon3DInteractiveElementclass

google.maps.maps3d.Polygon3DInteractiveElementclass

Notice: Available only in the v=beta channel.

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. UnlikePolygon3DElement,Polygon3DInteractiveElement receives agmp-click event.

Custom element:
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

This class extendsPolygon3DElement.

This class implementsPolygon3DInteractiveElementOptions.

Access by callingconst {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Constructor
`Polygon3DInteractiveElement`	`Polygon3DInteractiveElement([options])` Parameters: `options`: `Polygon3DElementOptionsoptional` Creates a`Polygon3DInteractiveElement` with the options specified.

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

Methods

addEventListener

Notice: Available only in the v=beta channel.

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|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

Notice: Available only in the v=beta channel.

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|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

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.

Polygon3DInteractiveElementOptionsinterface

google.maps.maps3d.Polygon3DInteractiveElementOptionsinterface

Notice: Available only in the v=beta channel.

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

This interface extendsPolygon3DElementOptions.

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

PopoverElementclass

google.maps.maps3d.PopoverElementclass

Notice: Available only in the v=beta channel.

A custom HTML element that renders a popover. It looks like a bubble and is often connected to a marker.

Custom element:
<gmp-popover altitude-mode="absolute" light-dismiss-disabled open position-anchor="lat,lng"></gmp-popover>

This class extendsHTMLElement.

This class implementsPopoverElementOptions.

Access by callingconst {PopoverElement} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Constructor
`PopoverElement`	`PopoverElement([options])` Parameters: `options`: `PopoverElementOptionsoptional`

Properties
`altitudeMode`	Type: `AltitudeModeoptional` Default:`AltitudeMode.CLAMP_TO_GROUND` Specifies how the altitude component of the position is interpreted. HTML attribute: `<gmp-popover altitude-mode="absolute"></gmp-popover>` `<gmp-popover altitude-mode="clamp-to-ground"></gmp-popover>` `<gmp-popover altitude-mode="relative-to-ground"></gmp-popover>` `<gmp-popover altitude-mode="relative-to-mesh"></gmp-popover>`
`lightDismissDisabled`	Type: `booleanoptional` 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 browserPopover API. HTML attribute: `<gmp-popover light-dismiss-disabled></gmp-popover>`
`open`	Type: `booleanoptional` Default:`false` Specifies whether this popover should be open or not. HTML attribute: `<gmp-popover open></gmp-popover>`
`positionAnchor`	Type: `LatLngLiteral\|LatLngAltitudeLiteral\|Marker3DInteractiveElement\|stringoptional` The position at which to display this popover. If the popover is anchored to an interactive marker, the marker's position will be used instead. HTML attribute: `<gmp-popover position-anchor="lat,lng"></gmp-popover>` `<gmp-popover position-anchor="lat,lng,altitude"></gmp-popover>` `<gmp-popover position-anchor="marker-id"></gmp-popover>`

Slots
`default`	Places the slotted content in the main section of the popover.
`header`	Places the slotted content in the heading section of the popover.

CSS Properties
`--gmp-popover-max-width`	Maximum width of the popover, regardless of content's width.
`--gmp-popover-min-width`	Minimum width of the popover, regardless of content's width. When using this property, it is strongly recommended to set it to a value less than the width of the map (in pixels).
`--gmp-popover-pixel-offset-x`	The offset on the x-axis, in pixels, of the tip of the popover from the point on the map at whose geographical coordinates the popover is anchored.
`--gmp-popover-pixel-offset-y`	The offset on the y-axis, in pixels, of the tip of the popover from the point on the map at whose geographical coordinates the popover is anchored.
`color-scheme`	Indicates which color scheme this popover can be rendered in. See`color-scheme`documentation for more details. If not specified, it defaults to the user's color scheme preferences.

Methods

addEventListener

Notice: Available only in the v=beta channel.

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|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

Notice: Available only in the v=beta channel.

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|EventListenerOptionsoptional Seeoptions.

Return Value: void

Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

PopoverElementOptionsinterface

google.maps.maps3d.PopoverElementOptionsinterface

Notice: Available only in the v=beta channel.

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

Properties
`altitudeModeoptional`	Type: `AltitudeModeoptional` See`PopoverElement.altitudeMode`.
`lightDismissDisabledoptional`	Type: `booleanoptional` See`PopoverElement.lightDismissDisabled`.
`openoptional`	Type: `booleanoptional` See`PopoverElement.open`.
`positionAnchoroptional`	Type: `LatLngLiteral\|LatLngAltitudeLiteral\|string\|Marker3DInteractiveElementoptional` See`PopoverElement.positionAnchor`.

AltitudeModeconstants

google.maps.maps3d.AltitudeModeconstants

Notice: Available only in the v=beta channel.

Specifies how altitude components in the coordinates are interpreted.

Access by callingconst {AltitudeMode} = await google.maps.importLibrary("maps3d").
SeeLibraries in the Maps JavaScript API.

Constants
`ABSOLUTE`	Allows to express objects relative to the average mean sea level. That also means that if the terrain level of detail changes underneath the object, its absolute position will remain the same.
`CLAMP_TO_GROUND`	Allows to express objects placed on the ground. They will remain at ground level following the terrain regardless of what altitude is provided. If the object is positioned over a major body of water, it will be placed at sea level.
`RELATIVE_TO_GROUND`	Allows to express objects relative to the ground surface. If the terrain level of detail changes, the position of the object will remain constant relative to the ground. When over water, the altitude will be interpreted as a value in meters above sea level.
`RELATIVE_TO_MESH`	Allows to express objects relative to the highest of ground+building+water surface. When over water, this will be water surface; when over terrain, this will be the building surface (if present) or ground surface (if no buildings).

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

Last updated 2025-07-18 UTC.

Movatterモバイル変換

3D Maps Stay organized with collections Save and categorize content based on your preferences.

Map3DElementclass

Constructor

Properties

Methods

Events

Map3DElementOptionsinterface

Properties

MapModeconstants

Constants

FlyAroundAnimationOptionsinterface

Properties

FlyToAnimationOptionsinterface

Properties

CameraOptionsinterface

Properties

SteadyChangeEventclass

Properties

LocationClickEventclass

Properties

PlaceClickEventclass

Properties

Methods

Marker3DElementclass

Constructor

Properties

Slots

Methods

Marker3DElementOptionsinterface

Properties

Marker3DInteractiveElementclass

Constructor

Properties

Slots

Methods

Events

Marker3DInteractiveElementOptionsinterface

Properties

Model3DElementclass

Constructor

Properties

Methods

Model3DElementOptionsinterface

Properties

Model3DInteractiveElementclass

Constructor

Properties

Methods

Events

Model3DInteractiveElementOptionsinterface

Properties

Polyline3DElementclass

Constructor

Properties

Methods

Polyline3DElementOptionsinterface

Properties

Polyline3DInteractiveElementclass

Constructor

Properties

Methods

Events

Polyline3DInteractiveElementOptionsinterface

Properties

Polygon3DElementclass

Constructor

Properties

Methods

Polygon3DElementOptionsinterface

Properties

Polygon3DInteractiveElementclass

Constructor

Properties

Methods

Events

Polygon3DInteractiveElementOptionsinterface

Properties

PopoverElementclass

Constructor

3D Maps