Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.google.com/maps/documentation/javascript/reference/3d-map below:

3D Maps | Maps JavaScript API

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

google.maps.maps3d.Map3DElement class

Notice: Available only in the v=beta channel.

Map3DElement is an HTML interface for the 3D Map view. Note that the mode 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 extends HTMLElement.

This class implements Map3DElementOptions.

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

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.

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

• <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>

Type:  boolean optional

Default: false

When true, all default UI buttons are disabled. Does not disable the keyboard and gesture controls.

• <gmp-map-3d default-ui-disabled></gmp-map-3d>

Type:  number optional

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.

• <gmp-map-3d heading="number"></gmp-map-3d>

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.

• <gmp-map-3d internal-usage-attribution-ids="id1 id2"></gmp-map-3d>

Type:  number optional

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

• <gmp-map-3d max-altitude="number"></gmp-map-3d>

Type:  number optional

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

• <gmp-map-3d max-heading="number"></gmp-map-3d>

Type:  number optional

The maximum angle of incidence of the map. A valid value is between 0 and 90 degrees.

• <gmp-map-3d max-tilt="number"></gmp-map-3d>

Type:  number optional

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

• <gmp-map-3d min-altitude="number"></gmp-map-3d>

Type:  number optional

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

• <gmp-map-3d min-heading="number"></gmp-map-3d>

Type:  number optional

The minimum angle of incidence of the map. A valid value is between 0 and 90 degrees.

• <gmp-map-3d min-tilt="number"></gmp-map-3d>

Specifies a mode the map should be rendered in. If not set, the map won't be rendered.

• <gmp-map-3d mode="hybrid"></gmp-map-3d>
• <gmp-map-3d mode="satellite"></gmp-map-3d>

Type:  number optional

The distance from camera to the center of the map, in meters.

• <gmp-map-3d range="number"></gmp-map-3d>

Type:  number optional

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.

• <gmp-map-3d roll="number"></gmp-map-3d>

Type:  number optional

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.

• <gmp-map-3d tilt="number"></gmp-map-3d>

Notice: Available only in the v=beta channel.

addEventListener(type, listener[, options])

• type:  string A case-sensitive string representing the event type to listen for.
• listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
• options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value:  void

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

.

flyCameraAround(options)

• 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(options)

• options:  FlyToAnimationOptions

Return Value:  None

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.

Notice: Available only in the v=beta channel.

removeEventListener(type, listener[, options])

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

Return Value:  void

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

.

stopCameraAnimation()

Parameters:  None

Return Value:  None

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.

function(animationEndEvent)

• animationEndEvent:  Event

This event is fired when the fly animation ends. This event bubbles up through the DOM tree.

function(centerChangeEvent)

• centerChangeEvent:  Event

This event is fired when the Map3DElement's center property changes.

function(clickEvent)

• clickEvent:  LocationClickEvent|PlaceClickEvent

This event is fired when the

element is clicked.

function(headingChangeEvent)

• headingChangeEvent:  Event

This event is fired when the Map3DElement's heading property changes.

function(rangeChangeEvent)

• rangeChangeEvent:  Event

This event is fired when the Map3DElement's range property changes.

function(rollChangeEvent)

• rollChangeEvent:  Event

This event is fired when the Map3DElement's roll property changes.

function(steadyChangeEvent)

• steadyChangeEvent:  SteadyChangeEvent

This event is fired when the steady state of Map3DElement changes.

function(tiltChangeEvent)

• tiltChangeEvent:  Event

This event is fired when the Map3DElement's tilt property changes.

google.maps.maps3d.Map3DElementOptions interface

Notice: Available only in the v=beta channel.

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

google.maps.maps3d.MapMode constants

Notice: Available only in the v=beta channel.

Specifies a mode the map should be rendered in.

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

google.maps.maps3d.FlyAroundAnimationOptions interface

Notice: Available only in the v=beta channel.

Customization options for the FlyCameraAround Animation.

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.

Type:  number optional

The duration of the animation in milliseconds. This is the total duration of the animation, not the duration of a single rotation.

Type:  number optional

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.

google.maps.maps3d.FlyToAnimationOptions interface

Notice: Available only in the v=beta channel.

Customization options for the FlyCameraTo Animation.

The location at which the camera should point at the end of the animation.

Type:  number optional

The duration of the animation in milliseconds. A duration of 0 will teleport the camera straight to the end position.

google.maps.maps3d.CameraOptions interface

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.

google.maps.maps3d.SteadyChangeEvent class

Notice: Available only in the v=beta channel.

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

This class extends Event.

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

Type:  boolean

Indicates whether Map3DElement is steady (i.e. all rendering for the current scene has completed) or not.

google.maps.maps3d.LocationClickEvent class

Notice: Available only in the v=beta channel.

This event is created from clicking a Map3DElement.

This class extends Event.

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

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.

google.maps.maps3d.PlaceClickEvent class

Notice: Available only in the v=beta channel.

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

This class extends LocationClickEvent.

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

Type:  string

The place id of the map feature.

fetchPlace()

Parameters:  None

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.

google.maps.maps3d.Marker3DElement class

Notice: Available only in the v=beta channel.

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

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

This class extends HTMLElement.

This class implements Marker3DElementOptions.

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

Specifies how the altitude component of the position is interpreted.

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

An enumeration specifying how a Marker3DElement should behave when it collides with another Marker3DElement or with the basemap labels.

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

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

• <gmp-marker-3d draws-when-occluded></gmp-marker-3d>

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.

• <gmp-marker-3d extruded></gmp-marker-3d>

Type:  string optional

Text to be displayed by this marker.

• <gmp-marker-3d label="string"></gmp-marker-3d>

The location of the tip of the marker. Altitude is ignored in certain modes and thus optional.

• <gmp-marker-3d position="lat,lng"></gmp-marker-3d>
• <gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>

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.

• <gmp-marker-3d size-preserved></gmp-marker-3d>

Type:  number optional

The zIndex compared to other markers.

• <gmp-marker-3d z-index="number"></gmp-marker-3d>

Any custom elements directly added to the

will be slotted, however only elements of

,

and

types will be used for drawing markers, other elements will be ignored.

and

must be wrapped in

element before assigning to the

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

Notice: Available only in the v=beta channel.

addEventListener(type, listener[, options])

• type:  string A case-sensitive string representing the event type to listen for.
• listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
• options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value:  void

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

.

Notice: Available only in the v=beta channel.

removeEventListener(type, listener[, options])

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

Return Value:  void

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

.

google.maps.maps3d.Marker3DElementOptions interface

Notice: Available only in the v=beta channel.

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

google.maps.maps3d.Marker3DInteractiveElement class

Notice: Available only in the v=beta channel.

Shows a position on a 3D map. Note that the position must be set for the Marker3DInteractiveElement to display. Unlike Marker3DElement, Marker3DInteractiveElement receives a gmp-click event.

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

This class extends Marker3DElement.

This class implements Marker3DInteractiveElementOptions.

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

Notice: Available only in the v=beta channel.

addEventListener(type, listener[, options])

• type:  string A case-sensitive string representing the event type to listen for.
• listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
• options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value:  void

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

.

Notice: Available only in the v=beta channel.

removeEventListener(type, listener[, options])

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

Return Value:  void

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

.

google.maps.maps3d.Model3DElement class

Notice: Available only in the v=beta channel.

A 3D model which allows the rendering of gLTF models. Note that the position and the src must be set for the Model3DElement to display.

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

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

This class extends HTMLElement.

This class implements Model3DElementOptions.

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

Specifies how altitude in the position is interpreted.

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

Rotations are applied to the model in the following order: roll, tilt and then heading.

• <gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>

Sets the Model3DElement's position. Altitude is ignored in certain modes and thus optional.

• <gmp-model-3d position="lat,lng"></gmp-model-3d>
• <gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>

Default: 1

Scales the model along the x, y, and z axes in the model's coordinate space.

• <gmp-model-3d scale="number"></gmp-model-3d>
• <gmp-model-3d scale="x,y,z"></gmp-model-3d>

Specifies the url of the 3D model. At this time, only models in the

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.

• <gmp-model-3d src="url"></gmp-model-3d>

Notice: Available only in the v=beta channel.

addEventListener(type, listener[, options])

• type:  string A case-sensitive string representing the event type to listen for.
• listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
• options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value:  void

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

.

Notice: Available only in the v=beta channel.

removeEventListener(type, listener[, options])

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

Return Value:  void

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

.

google.maps.maps3d.Model3DElementOptions interface

Notice: Available only in the v=beta channel.

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

google.maps.maps3d.Model3DInteractiveElement class

Notice: Available only in the v=beta channel.

A 3D model which allows the rendering of gLTF models. Note that the position and the src must be set for the Model3DElement to display.

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

Unlike Model3DElement, Model3DInteractiveElement receives a gmp-click event.

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

This class extends Model3DElement.

This class implements Model3DInteractiveElementOptions.

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

Notice: Available only in the v=beta channel.

addEventListener(type, listener[, options])

• type:  string A case-sensitive string representing the event type to listen for.
• listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
• options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value:  void

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

.

Notice: Available only in the v=beta channel.

removeEventListener(type, listener[, options])

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

Return Value:  void

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

.

google.maps.maps3d.Polyline3DElement class

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 extends HTMLElement.

This class implements Polyline3DElementOptions.

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

Specifies how altitude components in the coordinates are interpreted.

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

The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional.

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

• <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>

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.

• <gmp-polyline-3d extruded></gmp-polyline-3d>

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.

• <gmp-polyline-3d geodesic></gmp-polyline-3d>

Type:  string optional

The outer color. All CSS3 colors are supported.

• <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>

Type:  number optional

The outer width is between 0.0 and 1.0. This is a percentage of the strokeWidth.

• <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>

Type:  string optional

The stroke color. All CSS3 colors are supported.

• <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>

Type:  number optional

The stroke width in pixels.

• <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>

Type:  number optional

The zIndex compared to other polys.

• <gmp-polyline-3d z-index="number"></gmp-polyline-3d>

Notice: Available only in the v=beta channel.

addEventListener(type, listener[, options])

• type:  string A case-sensitive string representing the event type to listen for.
• listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
• options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value:  void

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

.

Notice: Available only in the v=beta channel.

removeEventListener(type, listener[, options])

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

Return Value:  void

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

.

google.maps.maps3d.Polyline3DElementOptions interface

Notice: Available only in the v=beta channel.

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

google.maps.maps3d.Polygon3DElement class

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 extends HTMLElement.

This class implements Polygon3DElementOptions.

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

Specifies how altitude components in the coordinates are interpreted.

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

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

• <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>

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.

• <gmp-polygon-3d extruded></gmp-polygon-3d>

Type:  string optional

The fill color. All CSS3 colors are supported.

• <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>

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.

• <gmp-polygon-3d geodesic></gmp-polygon-3d>

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.

The ordered sequence of coordinates that designates a closed loop. Altitude is ignored in certain modes and thus optional.

Type:  string optional

The stroke color. All CSS3 colors are supported.

• <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>

Type:  number optional

The stroke width in pixels.

• <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>

Type:  number optional

The zIndex compared to other polys.

• <gmp-polygon-3d z-index="number"></gmp-polygon-3d>

Notice: Available only in the v=beta channel.

addEventListener(type, listener[, options])

• type:  string A case-sensitive string representing the event type to listen for.
• listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
• options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value:  void

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

.

Notice: Available only in the v=beta channel.

removeEventListener(type, listener[, options])

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

Return Value:  void

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

.

google.maps.maps3d.Polygon3DElementOptions interface

Notice: Available only in the v=beta channel.

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

google.maps.maps3d.Polygon3DInteractiveElement class

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. Unlike Polygon3DElement, Polygon3DInteractiveElement receives a gmp-click event.

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

This class extends Polygon3DElement.

This class implements Polygon3DInteractiveElementOptions.

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

Notice: Available only in the v=beta channel.

addEventListener(type, listener[, options])

• type:  string A case-sensitive string representing the event type to listen for.
• listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
• options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value:  void

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

.

Notice: Available only in the v=beta channel.

removeEventListener(type, listener[, options])

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

Return Value:  void

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

.

google.maps.maps3d.PopoverElement class

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 extends HTMLElement.

This class implements PopoverElementOptions.

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

Specifies how the altitude component of the position is interpreted.

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

Type:  boolean optional

Default: false

Specifies whether this popover should be "light dismissed" or not. The "light dismiss" behavior is similar to setting the

attribute which is part of the browser

.

• <gmp-popover light-dismiss-disabled></gmp-popover>

Type:  boolean optional

Default: false

Specifies whether this popover should be open or not.

• <gmp-popover open></gmp-popover>

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.

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

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

Maximum width of the popover, regardless of content's 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).

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.

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.

Indicates which color scheme this popover can be rendered in. See

for more details. If not specified, it defaults to the user's color scheme preferences.

Notice: Available only in the v=beta channel.

addEventListener(type, listener[, options])

• type:  string A case-sensitive string representing the event type to listen for.
• listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
• options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.

Return Value:  void

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

.

Notice: Available only in the v=beta channel.

removeEventListener(type, listener[, options])

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

Return Value:  void

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

.

google.maps.maps3d.PopoverElementOptions interface

Notice: Available only in the v=beta channel.

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

google.maps.maps3d.AltitudeMode constants

Notice: Available only in the v=beta channel.

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.

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

Last updated 2025-07-10 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-10 UTC."],[],[]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4