Get Started Contact sales

    Draw on the map

    Marker3DElement class

    google.maps.maps3d . Marker3DElement class

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

    Custom element: <gmp-marker-3d altitude-mode="absolute" collision-behavior="required" 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 .

    Marker3DElement
    Marker3DElement([options])
    Parameters:
    Creates an Marker3DElement with the options specified.
    altitudeMode
    Type: AltitudeMode optional
    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: CollisionBehavior optional
    Default: CollisionBehavior.REQUIRED
    An enumeration specifying how a Marker3DElement should behave when it collides with another Marker3DElement or with the basemap labels.
    HTML attribute:
    • <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: boolean optional
    Default: false
    Specifies whether this marker should be drawn or not when it's occluded. The marker can be occluded by map geometry (e.g. buildings).
    HTML attribute:
    • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
    extruded
    Type: boolean optional
    Default: false
    Specifies whether to connect the marker to the ground. To extrude a marker, the altitudeMode must be either RELATIVE_TO_GROUND or ABSOLUTE .
    HTML attribute:
    • <gmp-marker-3d extruded></gmp-marker-3d>
    label
    Type: string optional
    Text to be displayed by this marker.
    HTML attribute:
    • <gmp-marker-3d label="string"></gmp-marker-3d>
    position
    The location of the tip of the marker. Altitude is ignored in certain modes and thus optional.
    HTML attribute:
    • <gmp-marker-3d position="lat,lng"></gmp-marker-3d>
    • <gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>
    sizePreserved
    Type: boolean optional
    Default: false
    Specifies whether this marker should preserve its size or not regardless of distance from camera. By default, the marker is scaled based on distance from camera/tilt.
    HTML attribute:
    • <gmp-marker-3d size-preserved></gmp-marker-3d>
    zIndex
    Type: number optional
    The zIndex compared to other markers.
    HTML attribute:
    • <gmp-marker-3d z-index="number"></gmp-marker-3d>
    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.
    addEventListener
    addEventListener(type, listener[, options])
    Parameters:
    • type :  string A case-sensitive string representing the event type to listen for.
    • listener :  EventListener | EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
    • options :  boolean| AddEventListenerOptions optional See options . Custom events only support capture and passive .
    Return Value: void
    Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener .
    removeEventListener
    removeEventListener(type, listener[, options])
    Parameters:
    Return Value: void
    Removes an event listener previously registered with addEventListener from the target. See removeEventListener .

    Marker3DElementOptions interface

    google.maps.maps3d . Marker3DElementOptions interface

    Marker3DElementOptions object used to define the properties that can be set on a Marker3DElement.
    altitudeMode optional
    Type: AltitudeMode optional
    See Marker3DElement.altitudeMode .
    collisionBehavior optional
    Type: CollisionBehavior optional
    See Marker3DElement.collisionBehavior .
    drawsWhenOccluded optional
    Type: boolean optional
    See Marker3DElement.drawsWhenOccluded .
    extruded optional
    Type: boolean optional
    See Marker3DElement.extruded .
    label optional
    Type: string optional
    See Marker3DElement.label .
    position optional
    See Marker3DElement.position .
    sizePreserved optional
    Type: boolean optional
    See Marker3DElement.sizePreserved .
    zIndex optional
    Type: number optional
    See Marker3DElement.zIndex .

    Marker3DInteractiveElement class

    google.maps.maps3d . Marker3DInteractiveElement class

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

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

    This class extends Marker3DElement .

    This class implements Marker3DInteractiveElementOptions .

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

    Marker3DInteractiveElement
    Marker3DInteractiveElement([options])
    Parameters:
    Creates an Marker3DInteractiveElement with the options specified.
    gmpPopoverTargetElement
    Type: PopoverElement optional
    When set, the popover element will be open on this marker's click.
    HTML attribute:
    • <gmp-marker-3d-interactive gmp-popover-target="popover-id"></gmp-marker-3d-interactive>
    title
    Type: string
    Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the Marker3DInteractiveElement with the provided value.
    HTML attribute:
    • <gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>
    Inherited: altitudeMode , collisionBehavior , drawsWhenOccluded , extruded , label , position , sizePreserved , zIndex
    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.
    addEventListener
    addEventListener(type, listener[, options])
    Parameters:
    • type :  string A case-sensitive string representing the event type to listen for.
    • listener :  EventListener | EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
    • options :  boolean| AddEventListenerOptions optional See options . Custom events only support capture and passive .
    Return Value: void
    Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener .
    removeEventListener
    removeEventListener(type, listener[, options])
    Parameters:
    Return Value: void
    Removes an event listener previously registered with addEventListener from the target. See removeEventListener .
    gmp-click
    function(clickEvent)
    Arguments:
    This event is fired when the Marker3DInteractiveElement element is clicked.

    Marker3DInteractiveElementOptions interface

    google.maps.maps3d . Marker3DInteractiveElementOptions interface

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

    This interface extends Marker3DElementOptions .
    gmpPopoverTargetElement optional
    Type: PopoverElement optional
    See Marker3DInteractiveElement.gmpPopoverTargetElement .
    title optional
    Type: string optional
    See Marker3DInteractiveElement.title .
    Inherited: altitudeMode , collisionBehavior , drawsWhenOccluded , extruded , label , position , sizePreserved , zIndex

    Model3DElement class

    google.maps.maps3d . Model3DElement class

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

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

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

    This class extends HTMLElement .

    This class implements Model3DElementOptions .

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

    Model3DElement
    Model3DElement([options])
    Parameters:
    Creates an Model3DElement with the options specified.
    altitudeMode
    Type: AltitudeMode optional
    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
    Describes rotation of a 3D model's coordinate system to position the model on the 3D Map.

    Rotations are applied to the model in the following order: roll, tilt and then heading.
    HTML attribute:
    • <gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>
    position
    Sets the Model3DElement 's position. Altitude is ignored in certain modes and thus optional.
    HTML attribute:
    • <gmp-model-3d position="lat,lng"></gmp-model-3d>
    • <gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>
    scale
    Type: number| Vector3D | Vector3DLiteral optional
    Default: 1
    Scales the model along the x, y, and z axes in the model's coordinate space.
    HTML attribute:
    • <gmp-model-3d scale="number"></gmp-model-3d>
    • <gmp-model-3d scale="x,y,z"></gmp-model-3d>
    src
    Type: string| URL optional
    Specifies the url of the 3D model. At this time, only models in the .glb format are supported.

    Any relative HTTP urls will be resolved to their corresponding absolute ones.

    Please note that If you're hosting your .glb model files on a different website or server than your main application, make sure to set up the correct CORS HTTP headers. This allows your application to securely access the model files from the other domain.
    HTML attribute:
    • <gmp-model-3d src="url"></gmp-model-3d>
    addEventListener
    addEventListener(type, listener[, options])
    Parameters:
    • type :  string A case-sensitive string representing the event type to listen for.
    • listener :  EventListener | EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
    • options :  boolean| AddEventListenerOptions optional See options . Custom events only support capture and passive .
    Return Value: void
    Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener .
    removeEventListener
    removeEventListener(type, listener[, options])
    Parameters:
    Return Value: void
    Removes an event listener previously registered with addEventListener from the target. See removeEventListener .

    Model3DElementOptions interface

    google.maps.maps3d . Model3DElementOptions interface

    Model3DElementOptions object used to define the properties that can be set on a Model3DElement.
    altitudeMode optional
    Type: AltitudeMode optional
    See Model3DElement.altitudeMode .
    orientation optional
    See Model3DElement.orientation .
    position optional
    See Model3DElement.position .
    scale optional
    Type: number| Vector3D | Vector3DLiteral optional
    See Model3DElement.scale .
    src optional
    Type: string| URL optional
    See Model3DElement.src .

    Model3DInteractiveElement class

    google.maps.maps3d . Model3DInteractiveElement class

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

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

    Unlike Model3DElement , Model3DInteractiveElement receives a gmp-click event.

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

    This class extends Model3DElement .

    This class implements Model3DInteractiveElementOptions .

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

    Model3DInteractiveElement
    Model3DInteractiveElement([options])
    Parameters:
    Creates a Model3DInteractiveElement with the options specified.
    Inherited: altitudeMode , orientation , position , scale , src
    addEventListener
    addEventListener(type, listener[, options])
    Parameters:
    • type :  string A case-sensitive string representing the event type to listen for.
    • listener :  EventListener | EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
    • options :  boolean| AddEventListenerOptions optional See options . Custom events only support capture and passive .
    Return Value: void
    Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener .
    removeEventListener
    removeEventListener(type, listener[, options])
    Parameters:
    Return Value: void
    Removes an event listener previously registered with addEventListener from the target. See removeEventListener .
    gmp-click
    function(clickEvent)
    Arguments:
    This event is fired when the Model3DInteractiveElement element is clicked.

    Model3DInteractiveElementOptions interface

    google.maps.maps3d . Model3DInteractiveElementOptions interface

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

    This interface extends Model3DElementOptions .
    Inherited: altitudeMode , orientation , position , scale , src

    Polyline3DElement class

    google.maps.maps3d . Polyline3DElement class

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

    Custom element: <gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

    This class extends HTMLElement .

    This class implements Polyline3DElementOptions .

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

    Polyline3DElement
    Polyline3DElement([options])
    Parameters:
    Creates an Polyline3DElement with the options specified.
    altitudeMode
    Type: AltitudeMode optional
    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>
    drawsOccludedSegments
    Type: boolean optional
    Default: false
    Specifies whether parts of the polyline which could be occluded are drawn or not. Polylines can be occluded by map geometry (e.g. buildings).
    HTML attribute:
    • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
    extruded
    Type: boolean optional
    Default: false
    Specifies whether to connect the polyline to the ground. To extrude a polyline, the altitudeMode must be either RELATIVE_TO_GROUND or ABSOLUTE .
    HTML attribute:
    • <gmp-polyline-3d extruded></gmp-polyline-3d>
    geodesic
    Type: boolean optional
    Default: false
    When true , edges of the polyline are interpreted as geodesic and will follow the curvature of the Earth. When false , edges of the polyline are rendered as straight lines in screen space.
    HTML attribute:
    • <gmp-polyline-3d geodesic></gmp-polyline-3d>
    outerColor
    Type: string optional
    The outer color. All CSS3 colors are supported.
    HTML attribute:
    • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
    outerWidth
    Type: number optional
    The outer width is between 0.0 and 1.0 . This is a percentage of the strokeWidth .
    HTML attribute:
    • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
    path
    The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional.
    HTML attribute:
    • <gmp-polyline-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polyline-3d>
    strokeColor
    Type: string optional
    The stroke color. All CSS3 colors are supported.
    HTML attribute:
    • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
    strokeWidth
    Type: number optional
    The stroke width in pixels.
    HTML attribute:
    • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
    zIndex
    Type: number optional
    The zIndex compared to other polys.
    HTML attribute:
    • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
    coordinates
    The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional.
    addEventListener
    addEventListener(type, listener[, options])
    Parameters:
    • type :  string A case-sensitive string representing the event type to listen for.
    • listener :  EventListener | EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
    • options :  boolean| AddEventListenerOptions optional See options . Custom events only support capture and passive .
    Return Value: void
    Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener .
    removeEventListener
    removeEventListener(type, listener[, options])
    Parameters:
    Return Value: void
    Removes an event listener previously registered with addEventListener from the target. See removeEventListener .

    Polyline3DElementOptions interface

    google.maps.maps3d . Polyline3DElementOptions interface

    Polyline3DElementOptions object used to define the properties that can be set on a Polyline3DElement.
    altitudeMode optional
    Type: AltitudeMode optional
    See Polyline3DElement.altitudeMode .
    coordinates optional
    See Polyline3DElement.coordinates .
    drawsOccludedSegments optional
    Type: boolean optional
    See Polyline3DElement.drawsOccludedSegments .
    extruded optional
    Type: boolean optional
    See Polyline3DElement.extruded .
    geodesic optional
    Type: boolean optional
    See Polyline3DElement.geodesic .
    outerColor optional
    Type: string optional
    See Polyline3DElement.outerColor .
    outerWidth optional
    Type: number optional
    See Polyline3DElement.outerWidth .
    strokeColor optional
    Type: string optional
    See Polyline3DElement.strokeColor .
    strokeWidth optional
    Type: number optional
    See Polyline3DElement.strokeWidth .
    zIndex optional
    Type: number optional
    See Polyline3DElement.zIndex .

    Polyline3DInteractiveElement class

    google.maps.maps3d . Polyline3DInteractiveElement class

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

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

    This class extends Polyline3DElement .

    This class implements Polyline3DInteractiveElementOptions .

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

    Polyline3DInteractiveElement
    Polyline3DInteractiveElement([options])
    Parameters:
    Creates a Polyline3DInteractiveElement with the options specified.
    Inherited: altitudeMode , drawsOccludedSegments , extruded , geodesic , outerColor , outerWidth , path , strokeColor , strokeWidth , zIndex , coordinates
    addEventListener
    addEventListener(type, listener[, options])
    Parameters:
    • type :  string A case-sensitive string representing the event type to listen for.
    • listener :  EventListener | EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
    • options :  boolean| AddEventListenerOptions optional See options . Custom events only support capture and passive .
    Return Value: void
    Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener .
    removeEventListener
    removeEventListener(type, listener[, options])
    Parameters:
    Return Value: void
    Removes an event listener previously registered with addEventListener from the target. See removeEventListener .
    gmp-click
    function(clickEvent)
    Arguments:
    • clickEvent :  LocationClickEvent The event object will contain the lat-lng-altitude location of the click.
    This event is fired when the Polyline3DInteractiveElement element is clicked.

    Polyline3DInteractiveElementOptions interface

    google.maps.maps3d . Polyline3DInteractiveElementOptions interface

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

    This interface extends Polyline3DElementOptions .
    Inherited: altitudeMode , coordinates , drawsOccludedSegments , extruded , geodesic , outerColor , outerWidth , strokeColor , strokeWidth , zIndex

    Polygon3DElement class

    google.maps.maps3d . Polygon3DElement class

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

    Custom element: <gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

    This class extends HTMLElement .

    This class implements Polygon3DElementOptions .

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

    Polygon3DElement
    Polygon3DElement([options])
    Parameters:
    Creates an Polygon3DElement with the options specified.
    altitudeMode
    Type: AltitudeMode optional
    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: boolean optional
    Default: false
    Specifies whether parts of the polygon which could be occluded are drawn or not. Polygons can be occluded by map geometry (e.g. buildings).
    HTML attribute:
    • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
    extruded
    Type: boolean optional
    Default: false
    Specifies whether to connect the polygon to the ground. To extrude a polygon, the altitudeMode must be either RELATIVE_TO_GROUND or ABSOLUTE .
    HTML attribute:
    • <gmp-polygon-3d extruded></gmp-polygon-3d>
    fillColor
    Type: string optional
    The fill color. All CSS3 colors are supported.
    HTML attribute:
    • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
    geodesic
    Type: boolean optional
    Default: false
    When true , edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When false , edges of the polygon are rendered as straight lines in screen space.
    HTML attribute:
    • <gmp-polygon-3d geodesic></gmp-polygon-3d>
    innerPaths
    The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths, which create multiple cut-outs inside the polygon.
    path
    The ordered sequence of coordinates that designates a closed loop. Altitude is ignored in certain modes and thus optional.
    HTML attribute:
    • <gmp-polygon-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polygon-3d>
    strokeColor
    Type: string optional
    The stroke color. All CSS3 colors are supported.
    HTML attribute:
    • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
    strokeWidth
    Type: number optional
    The stroke width in pixels.
    HTML attribute:
    • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
    zIndex
    Type: number optional
    The zIndex compared to other polys.
    HTML attribute:
    • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
    outerCoordinates
    The ordered sequence of coordinates that designates a closed loop. Altitude is ignored in certain modes and thus optional.
    innerCoordinates
    The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths, which create multiple cut-outs inside the polygon.
    addEventListener
    addEventListener(type, listener[, options])
    Parameters:
    • type :  string A case-sensitive string representing the event type to listen for.
    • listener :  EventListener | EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
    • options :  boolean| AddEventListenerOptions optional See options . Custom events only support capture and passive .
    Return Value: void
    Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener .
    removeEventListener
    removeEventListener(type, listener[, options])
    Parameters:
    Return Value: void
    Removes an event listener previously registered with addEventListener from the target. See removeEventListener .

    Polygon3DElementOptions interface

    google.maps.maps3d . Polygon3DElementOptions interface

    Polygon3DElementOptions object used to define the properties that can be set on a Polygon3DElement.
    altitudeMode optional
    Type: AltitudeMode optional
    See Polygon3DElement.altitudeMode .
    drawsOccludedSegments optional
    Type: boolean optional
    See Polygon3DElement.drawsOccludedSegments .
    extruded optional
    Type: boolean optional
    See Polygon3DElement.extruded .
    fillColor optional
    Type: string optional
    See Polygon3DElement.fillColor .
    geodesic optional
    Type: boolean optional
    See Polygon3DElement.geodesic .
    innerCoordinates optional
    See Polygon3DElement.innerCoordinates .
    outerCoordinates optional
    See Polygon3DElement.outerCoordinates .
    strokeColor optional
    Type: string optional
    See Polygon3DElement.strokeColor .
    strokeWidth optional
    Type: number optional
    See Polygon3DElement.strokeWidth .
    zIndex optional
    Type: number optional
    See Polygon3DElement.zIndex .

    Polygon3DInteractiveElement class

    google.maps.maps3d . Polygon3DInteractiveElement class

    A 3D polygon (like a 3D polyline) defines a series of connected coordinates in an ordered sequence. Additionally, polygons form a closed loop and define a filled region. Unlike Polygon3DElement , Polygon3DInteractiveElement receives a gmp-click event.

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

    This class extends Polygon3DElement .

    This class implements Polygon3DInteractiveElementOptions .

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

    Polygon3DInteractiveElement
    Polygon3DInteractiveElement([options])
    Parameters:
    Creates a Polygon3DInteractiveElement with the options specified.
    Inherited: altitudeMode , drawsOccludedSegments , extruded , fillColor , geodesic , innerPaths , path , strokeColor , strokeWidth , zIndex , outerCoordinates , innerCoordinates
    addEventListener
    addEventListener(type, listener[, options])
    Parameters:
    • type :  string A case-sensitive string representing the event type to listen for.
    • listener :  EventListener | EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
    • options :  boolean| AddEventListenerOptions optional See options . Custom events only support capture and passive .
    Return Value: void
    Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener .
    removeEventListener
    removeEventListener(type, listener[, options])
    Parameters:
    Return Value: void
    Removes an event listener previously registered with addEventListener from the target. See removeEventListener .
    gmp-click
    function(clickEvent)
    Arguments:
    • clickEvent :  LocationClickEvent The event object will contain the lat-lng-altitude location of the click.
    This event is fired when the Polygon3DInteractiveElement element is clicked.

    Polygon3DInteractiveElementOptions interface

    google.maps.maps3d . Polygon3DInteractiveElementOptions interface

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

    This interface extends Polygon3DElementOptions .
    Inherited: altitudeMode , drawsOccludedSegments , extruded , fillColor , geodesic , innerCoordinates , outerCoordinates , strokeColor , strokeWidth , zIndex

    PopoverElement class

    google.maps.maps3d . PopoverElement class

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

    Custom element: <gmp-popover altitude-mode="absolute" 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 .

    PopoverElement
    PopoverElement([options])
    Parameters:
    altitudeMode
    Type: AltitudeMode optional
    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: boolean optional
    Default: false
    Specifies whether this popover should be "light dismissed" or not. The "light dismiss" behavior is similar to setting the popover="auto" attribute which is part of the browser Popover API .
    HTML attribute:
    • <gmp-popover light-dismiss-disabled></gmp-popover>
    open
    Type: boolean optional
    Default: false
    Specifies whether this popover should be open or not.
    HTML attribute:
    • <gmp-popover open></gmp-popover>
    positionAnchor
    The position at which to display this popover. If the popover is anchored to an interactive marker, the marker's position will be used instead.
    HTML attribute:
    • <gmp-popover position-anchor="lat,lng"></gmp-popover>
    • <gmp-popover position-anchor="lat,lng,altitude"></gmp-popover>
    • <gmp-popover position-anchor="marker-id"></gmp-popover>
    default
    Places the slotted content in the main section of the popover.
    header
    Places the slotted content in the heading section of the popover.
    --gmp-popover-max-width
    Maximum width of the popover, regardless of content's width.
    --gmp-popover-min-width
    Minimum width of the popover, regardless of content's width. When using this property, it is strongly recommended to set it to a value less than the width of the map (in pixels).
    --gmp-popover-pixel-offset-x
    The offset on the x-axis, in pixels, of the tip of the popover from the point on the map at whose geographical coordinates the popover is anchored.
    --gmp-popover-pixel-offset-y
    The offset on the y-axis, in pixels, of the tip of the popover from the point on the map at whose geographical coordinates the popover is anchored.
    background-color
    The background color of the popover. See background-color documentation for more details. Please note that default place popover is also affected by this property. Use targeted CSS classes or inline styles on custom popovers to avoid styling the default place popover.
    border-radius
    The border-radius of the popover. See border-radius documentation for more details. Please note that default place popover is also affected by this property. Use targeted CSS classes or inline styles on custom popovers to avoid styling the default place popover.
    box-shadow
    The box-shadow of the popover. See box-shadow documentation for more details. Please note that default place popover is also affected by this property. Use targeted CSS classes or inline styles on custom popovers to avoid styling the default place popover.
    color-scheme
    Indicates which color scheme this popover can be rendered in. See color-scheme documentation for more details. If not specified, it defaults to the user's color scheme preferences.
    padding
    The padding of the popover. See padding documentation for more details. Please note that default place popover is also affected by this property. Use targeted CSS classes or inline styles on custom popovers to avoid styling the default place popover.
    addEventListener
    addEventListener(type, listener[, options])
    Parameters:
    • type :  string A case-sensitive string representing the event type to listen for.
    • listener :  EventListener | EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
    • options :  boolean| AddEventListenerOptions optional See options . Custom events only support capture and passive .
    Return Value: void
    Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener .
    removeEventListener
    removeEventListener(type, listener[, options])
    Parameters:
    Return Value: void
    Removes an event listener previously registered with addEventListener from the target. See removeEventListener .

    PopoverElementOptions interface

    google.maps.maps3d . PopoverElementOptions interface

    PopoverElementOptions object used to define the properties that can be set on a PopoverElement.
    altitudeMode optional
    Type: AltitudeMode optional
    See PopoverElement.altitudeMode .
    lightDismissDisabled optional
    Type: boolean optional
    See PopoverElement.lightDismissDisabled .
    open optional
    Type: boolean optional
    See PopoverElement.open .
    positionAnchor optional
    See PopoverElement.positionAnchor .

    AltitudeMode constants

    google.maps.maps3d . AltitudeMode constants

    Specifies how altitude components in the coordinates are interpreted.

    Access by calling const {AltitudeMode} = await google.maps.importLibrary("maps3d") .See Libraries in the Maps JavaScript API .
    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).
    Design a Mobile Site
    View Site in Mobile | Classic
    Share by: