Get Started Contact sales

    Draw on the map

    MarkerElement class

    google.maps.maps3d . MarkerElement class
    extends HTMLElement
    implements MarkerElementOptions

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

    <gmp-marker
  altitude-mode=" value-name 
"
  anchor-left=" string 
"
  anchor-top=" string 
"
  collision-behavior=" value-name 
"
  collision-priority=" number 
"
  position=" lat,lng 
"
  title=" string 
">
</gmp-marker>
     
     const 
  
 { 
 MarkerElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    MarkerElement
    MarkerElement([options])
    Parameters:
    Creates an MarkerElement 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: altitude-mode="value-name"
    anchorLeft
    Type: string optional
    Default:-50%
    A CSS length-percentage value which is used to offset the anchor point from the top left corner of the marker. This is useful when using a visual which has an anchor point that is different from the typical bottom center point of the default marker.
    HTML attribute: anchor-left="string"
    anchorTop
    Type: string optional
    Default:-100%
    A CSS length-percentage value which is used to offset the anchor point from the top left corner of the marker. This is useful when using a visual which has an anchor point that is different from the typical bottom center point of the default marker.
    HTML attribute: anchor-top="string"
    collisionBehavior
    Type: CollisionBehavior optional
    Default: CollisionBehavior.REQUIRED
    An enumeration specifying how a MarkerElement should behave when it collides with another MarkerElement , Marker3DElement , or with the basemap labels.
    HTML attribute: collision-behavior="value-name"
    collisionPriority
    Type: number optional
    A number which is used to help determine relative priority between CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY markers (including Marker3DElement ). A higher collisionPriority value indicates higher priority.
    HTML attribute: collision-priority="number"
    position
    The location of the tip of the marker. Altitude is ignored in certain modes and thus optional.
    HTML attribute:
    • position="lat,lng"
    • position="lat,lng,altitude"
    title
    Type: string
    Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the MarkerElement with the provided value.
    HTML attribute: title="string"
    default
    Any custom elements directly added to the MarkerElement will be slotted.
    z-index
    The z-index of this marker. See z-index documentation for more details. Overlapping markers with a larger z-index cover those with a smaller one. By default, markers are displayed according to their DOM position, with markers added later in the DOM appearing in front of markers added to the DOM earlier.
    Inherited: addEventListener , removeEventListener

    MarkerElementOptions interface

    google.maps.maps3d . MarkerElementOptions interface

    MarkerElementOptions object used to define the properties that can be set on a MarkerElement.
    altitudeMode optional
    Type: AltitudeMode optional
    See MarkerElement.altitudeMode .
    anchorLeft optional
    Type: string optional
    See MarkerElement.anchorLeft .
    anchorTop optional
    Type: string optional
    See MarkerElement.anchorTop .
    collisionBehavior optional
    Type: CollisionBehavior optional
    See MarkerElement.collisionBehavior .
    collisionPriority optional
    Type: number optional
    See MarkerElement.collisionPriority .
    position optional
    See MarkerElement.position .
    title optional
    Type: string optional
    See MarkerElement.title .

    MarkerInteractiveElement class

    google.maps.maps3d . MarkerInteractiveElement class
    extends MarkerElement
    implements MarkerInteractiveElementOptions

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

    <gmp-marker-interactive
  gmp-popover-target-element=" popover-id 
">
</gmp-marker-interactive>
     
     const 
  
 { 
 MarkerInteractiveElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    MarkerInteractiveElement
    MarkerInteractiveElement([options])
    Parameters:
    Creates a MarkerInteractiveElement with the options specified.
    gmpPopoverTargetElement
    Type: PopoverElement optional
    When set, the popover element will be open on this marker's click.
    HTML attribute: gmp-popover-target-element="popover-id"
    Inherited: altitudeMode (attr: altitude-mode ), anchorLeft (attr: anchor-left ), anchorTop (attr: anchor-top ), collisionBehavior (attr: collision-behavior ), collisionPriority (attr: collision-priority ), position (attr: position ), title (attr: title )
    Inherited: default
    Inherited: z-index
    Inherited: addEventListener , removeEventListener
    gmp-click
    function(clickEvent)
    Arguments:
    This event is fired when the MarkerInteractiveElement element is clicked.

    MarkerInteractiveElementOptions interface

    google.maps.maps3d . MarkerInteractiveElementOptions interface
    extends MarkerElementOptions

    MarkerInteractiveElementOptions object used to define the properties that can be set on a MarkerInteractiveElement.
    gmpPopoverTargetElement optional
    Type: PopoverElement optional
    See MarkerInteractiveElement.gmpPopoverTargetElement .
    Inherited: altitudeMode , anchorLeft , anchorTop , collisionBehavior , collisionPriority , position , title

    Marker3DElement class

    google.maps.maps3d . Marker3DElement class
    extends HTMLElement
    implements Marker3DElementOptions

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

    <gmp-marker-3d
  altitude-mode=" value-name 
"
  autofits-camera
  collision-behavior=" value-name 
"
  collision-priority=" number 
"
  draws-when-occluded
  extruded
  label=" string 
"
  position=" lat,lng 
"
  size-preserved
  z-index=" number 
">
</gmp-marker-3d>
     
     const 
  
 { 
 Marker3DElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    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: altitude-mode="value-name"
    Alpha autofitsCamera
    Type: boolean optional
    Default: false
    If provided, the specified marker will be made visible within the map viewport, alongside any other elements that have opted in.
    HTML attribute: autofits-camera
    collisionBehavior
    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: collision-behavior="value-name"
    collisionPriority
    Type: number optional
    The collision priority used for collision detection.
    HTML attribute: collision-priority="number"
    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: draws-when-occluded
    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: extruded
    label
    Type: string optional
    Text to be displayed by this marker.
    HTML attribute: label="string"
    position
    The location of the tip of the marker. Altitude is ignored in certain modes and thus optional.
    HTML attribute:
    • position="lat,lng"
    • position="lat,lng,altitude"
    sizePreserved
    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: size-preserved
    zIndex
    Type: number optional
    The zIndex compared to other markers.
    HTML attribute: z-index="number"
    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.
    Inherited: addEventListener , 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 .
    collisionPriority optional
    Type: number optional
    See Marker3DElement.collisionPriority .
    drawsWhenOccluded optional
    Type: boolean optional
    See Marker3DElement.drawsWhenOccluded .
    extruded optional
    Type: boolean optional
    See Marker3DElement.extruded .
    label optional
    Type: string optional
    See Marker3DElement.label .
    position optional
    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
    extends Marker3DElement
    implements Marker3DInteractiveElementOptions

    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.

    <gmp-marker-3d-interactive
  gmp-popover-target-element=" popover-id 
"
  title=" string 
">
</gmp-marker-3d-interactive>
     
     const 
  
 { 
 Marker3DInteractiveElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    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-popover-target-element="popover-id"
    title
    Type: string
    Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the Marker3DInteractiveElement with the provided value.
    HTML attribute: title="string"
    Inherited: altitudeMode (attr: altitude-mode ), AlphaautofitsCamera (attr: autofits-camera ), collisionBehavior (attr: collision-behavior ), collisionPriority (attr: collision-priority ), drawsWhenOccluded (attr: draws-when-occluded ), extruded (attr: extruded ), label (attr: label ), position (attr: position ), sizePreserved (attr: size-preserved ), zIndex (attr: z-index )
    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.
    Inherited: addEventListener , removeEventListener
    gmp-click
    function(clickEvent)
    Arguments:
    This event is fired when the Marker3DInteractiveElement element is clicked.

    Marker3DInteractiveElementOptions interface

    google.maps.maps3d . Marker3DInteractiveElementOptions interface
    extends Marker3DElementOptions

    Marker3DInteractiveElementOptions object used to define the properties that can be set on a Marker3DInteractiveElement.
    gmpPopoverTargetElement optional
    Type: PopoverElement optional
    See Marker3DInteractiveElement.gmpPopoverTargetElement .
    title optional
    Type: string optional
    See Marker3DInteractiveElement.title .
    Inherited: altitudeMode , collisionBehavior , collisionPriority , drawsWhenOccluded , extruded , label , position , sizePreserved , zIndex

    Model3DElement class

    google.maps.maps3d . Model3DElement class
    extends HTMLElement
    implements Model3DElementOptions

    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.

    <gmp-model-3d
  altitude-mode=" value-name 
"
  orientation=" heading,tilt,roll 
"
  position=" lat,lng 
"
  scale=" number 
"
  src=" url 
">
</gmp-model-3d>
     
     const 
  
 { 
 Model3DElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    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: altitude-mode="value-name"
    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: orientation="heading,tilt,roll"
    position
    Sets the Model3DElement 's position. Altitude is ignored in certain modes and thus optional.
    HTML attribute:
    • position="lat,lng"
    • position="lat,lng,altitude"
    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:
    • scale="number"
    • scale="x,y,z"
    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: src="url"
    Inherited: addEventListener , 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
    extends Model3DElement
    implements Model3DInteractiveElementOptions

    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.

    <gmp-model-3d-interactive></gmp-model-3d-interactive>
     
     const 
  
 { 
 Model3DInteractiveElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    Model3DInteractiveElement
    Model3DInteractiveElement([options])
    Parameters:
    Creates a Model3DInteractiveElement with the options specified.
    Inherited: altitudeMode (attr: altitude-mode ), orientation (attr: orientation ), position (attr: position ), scale (attr: scale ), src (attr: src )
    Inherited: addEventListener , removeEventListener
    gmp-click
    function(clickEvent)
    Arguments:
    This event is fired when the Model3DInteractiveElement element is clicked.

    Model3DInteractiveElementOptions interface

    google.maps.maps3d . Model3DInteractiveElementOptions interface
    extends Model3DElementOptions

    Model3DInteractiveElementOptions object used to define the properties that can be set on a Model3DInteractiveElement.
    Inherited: altitudeMode , orientation , position , scale , src

    Polyline3DElement class

    google.maps.maps3d . Polyline3DElement class
    extends HTMLElement
    implements Polyline3DElementOptions

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

    <gmp-polyline-3d
  altitude-mode=" value-name 
"
  autofits-camera
  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>
     
     const 
  
 { 
 Polyline3DElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    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: altitude-mode="value-name"
    Alpha autofitsCamera
    Type: boolean optional
    Default: false
    If provided, the specified polyline will be made visible within the map viewport, alongside any other elements that have opted in.
    HTML attribute: autofits-camera
    drawsOccludedSegments
    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: draws-occluded-segments
    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: extruded
    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: geodesic
    outerColor
    Type: string optional
    The outer color. All CSS3 colors are supported.
    HTML attribute: outer-color="string"
    outerWidth
    Type: number optional
    The outer width is between 0.0 and 1.0 . This is a percentage of the strokeWidth .
    HTML attribute: outer-width="number"
    path
    The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional.
    HTML attribute: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
    strokeColor
    Type: string optional
    The stroke color. All CSS3 colors are supported.
    HTML attribute: stroke-color="string"
    strokeWidth
    Type: number optional
    The stroke width in pixels.
    HTML attribute: stroke-width="number"
    zIndex
    Type: number optional
    The zIndex compared to other polys.
    HTML attribute: z-index="number"
    coordinates
    The ordered sequence of coordinates of the Polyline. Altitude is ignored in certain modes and thus optional.
    Inherited: addEventListener , 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
    extends Polyline3DElement
    implements Polyline3DInteractiveElementOptions

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

    <gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>
     
     const 
  
 { 
 Polyline3DInteractiveElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    Polyline3DInteractiveElement
    Polyline3DInteractiveElement([options])
    Parameters:
    Creates a Polyline3DInteractiveElement with the options specified.
    Inherited: altitudeMode (attr: altitude-mode ), AlphaautofitsCamera (attr: autofits-camera ), drawsOccludedSegments (attr: draws-occluded-segments ), extruded (attr: extruded ), geodesic (attr: geodesic ), outerColor (attr: outer-color ), outerWidth (attr: outer-width ), path (attr: path ), strokeColor (attr: stroke-color ), strokeWidth (attr: stroke-width ), zIndex (attr: z-index ), coordinates
    Inherited: addEventListener , removeEventListener
    gmp-click
    function(clickEvent)
    Arguments:
    • clickEvent :  LocationClickEvent optional The event object will contain the lat-lng-altitude location of the click.
    This event is fired when the Polyline3DInteractiveElement element is clicked.

    Polyline3DInteractiveElementOptions interface

    google.maps.maps3d . Polyline3DInteractiveElementOptions interface
    extends Polyline3DElementOptions

    Polyline3DInteractiveElementOptions object used to define the properties that can be set on a Polyline3DInteractiveElement.
    Inherited: altitudeMode , coordinates , drawsOccludedSegments , extruded , geodesic , outerColor , outerWidth , strokeColor , strokeWidth , zIndex

    Polygon3DElement class

    google.maps.maps3d . Polygon3DElement class
    extends HTMLElement
    implements Polygon3DElementOptions

    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.

    <gmp-polygon-3d
  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>
     
     const 
  
 { 
 Polygon3DElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    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.
    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: draws-occluded-segments
    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: extruded
    fillColor
    Type: string optional
    The fill color. All CSS3 colors are supported.
    HTML attribute: fill-color="string"
    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: geodesic
    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: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
    strokeColor
    Type: string optional
    The stroke color. All CSS3 colors are supported.
    HTML attribute: stroke-color="string"
    strokeWidth
    Type: number optional
    The stroke width in pixels.
    HTML attribute: stroke-width="number"
    zIndex
    Type: number optional
    The zIndex compared to other polys.
    HTML attribute: z-index="number"
    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.
    Inherited: addEventListener , 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
    extends Polygon3DElement
    implements Polygon3DInteractiveElementOptions

    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.

    <gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>
     
     const 
  
 { 
 Polygon3DInteractiveElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    Polygon3DInteractiveElement
    Polygon3DInteractiveElement([options])
    Parameters:
    Creates a Polygon3DInteractiveElement with the options specified.
    Inherited: altitudeMode , drawsOccludedSegments (attr: draws-occluded-segments ), extruded (attr: extruded ), fillColor (attr: fill-color ), geodesic (attr: geodesic ), innerPaths , path (attr: path ), strokeColor (attr: stroke-color ), strokeWidth (attr: stroke-width ), zIndex (attr: z-index ), outerCoordinates , innerCoordinates
    Inherited: addEventListener , removeEventListener
    gmp-click
    function(clickEvent)
    Arguments:
    • clickEvent :  LocationClickEvent optional The event object will contain the lat-lng-altitude location of the click.
    This event is fired when the Polygon3DInteractiveElement element is clicked.

    Polygon3DInteractiveElementOptions interface

    google.maps.maps3d . Polygon3DInteractiveElementOptions interface
    extends Polygon3DElementOptions

    Polygon3DInteractiveElementOptions object used to define the properties that can be set on a Polygon3DInteractiveElement.
    Inherited: altitudeMode , drawsOccludedSegments , extruded , fillColor , geodesic , innerCoordinates , outerCoordinates , strokeColor , strokeWidth , zIndex

    FlattenerElement class

    google.maps.maps3d . FlattenerElement class
    extends HTMLElement
    implements FlattenerElementOptions

    A flattener element is used to flatten a specified area on the map.

    <gmp-flattener
  path=" lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ... 
">
</gmp-flattener>
     
     const 
  
 { 
 FlattenerElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    FlattenerElement
    FlattenerElement([options])
    Parameters:
    innerPaths
    The ordered sequence of coordinates that designates a closed loop. These paths define Exclusion Holes within the polygon's main path, which is the Flattening Zone. Areas within an innerPath are exempt from flattening.
    path
    The ordered sequence of coordinates that designates a closed loop. This loop defines the Flattening Zone.
    HTML attribute: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
    Inherited: addEventListener , removeEventListener

    FlattenerElementOptions interface

    google.maps.maps3d . FlattenerElementOptions interface

    FlattenerElementOptions object used to define the properties that can be set on a FlattenerElement.
    innerPaths optional
    See FlattenerElement.innerPaths .
    path optional
    See FlattenerElement.path .

    PopoverElement class

    google.maps.maps3d . PopoverElement class
    extends HTMLElement
    implements PopoverElementOptions

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

    <gmp-popover
  auto-pan-disabled
  light-dismiss-disabled
  open
  position-anchor=" lat,lng 
">
</gmp-popover>
     
     const 
  
 { 
 PopoverElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    PopoverElement
    PopoverElement([options])
    Parameters:
    altitudeMode
    Type: AltitudeMode optional
    Default: AltitudeMode.CLAMP_TO_GROUND
    Specifies how the altitude component of the position is interpreted.
    autoPanDisabled
    Type: boolean optional
    Default: false
    If set to true, disables panning the map to make the popover fully visible when it opens.
    HTML attribute: auto-pan-disabled
    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: light-dismiss-disabled
    open
    Type: boolean optional
    Default: false
    Specifies whether this popover should be open or not.
    HTML attribute: open
    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:
    • position-anchor="lat,lng"
    • position-anchor="lat,lng,altitude"
    • position-anchor="marker-id"
    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.
    Inherited: addEventListener , 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 .
    autoPanDisabled optional
    Type: boolean optional
    See PopoverElement.autoPanDisabled .
    lightDismissDisabled optional
    Type: boolean optional
    See PopoverElement.lightDismissDisabled .
    open optional
    Type: boolean optional
    See PopoverElement.open .
    positionAnchor optional
    See PopoverElement.positionAnchor .

    AltitudeMode constants

    google.maps.maps3d . AltitudeMode constants

    Specifies how altitude components in the coordinates are interpreted.

    These constants are also usable as strings. In TypeScript, the string literals are defined by the AltitudeModeString type.

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

    CirclePathElement class

    google.maps.maps3d . CirclePathElement class
    extends HTMLElement
    implements CirclePathElementOptions

    A 3D circle overlay on a 3D map.

    <gmp-circle-path
  center=" lat,lng,altitude 
"
  radius=" number 
">
</gmp-circle-path>
     
     const 
  
 { 
 CirclePathElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 );
    CirclePathElement
    CirclePathElement([options])
    Parameters:
    Creates a CirclePathElement with the options specified.
    center
    The center of the circle.
    HTML attribute: center="lat,lng,altitude"
    radius
    Type: number optional
    The radius of the circle in meters.
    HTML attribute: radius="number"
    Inherited: addEventListener , removeEventListener

    CirclePathElementOptions interface

    google.maps.maps3d . CirclePathElementOptions interface

    CirclePathElementOptions object used to define the properties that can be set on a CirclePathElement.
    center optional
    See CirclePathElement.center .
    radius optional
    Type: number optional
    See CirclePathElement.radius .
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: