Draw on the map

Clase MarkerElement

clase google.maps.maps3d.MarkerElement extiende HTMLElement implementa MarkerElementOptions
extendida por MarkerInteractiveElement
biblioteca "maps3d"

Muestra una posición en un mapa en 3D. Ten en cuenta que se debe establecer el position para que se muestre el MarkerElement.

MarkerElement admite un alto nivel de personalización a través de elementos HTML personalizados, pero tiene un rendimiento de interacción más bajo que Marker3DElement, en especial cuando se manejan más de 1,000 marcadores en un mapa.

<gmp-marker
  altitude-mode="value-name"
  anchor-left="string"
  anchor-top="string"
  autofits-camera
  collision-behavior="value-name"
  collision-priority="number"
  position="lat,lng"
  title="string">
</gmp-marker>
const {MarkerElement} = await google.maps.importLibrary("maps3d");
MarkerElement
MarkerElement([options])
Parámetros:
Crea un MarkerElement con las opciones especificadas.
altitudeMode
attr: altitude-mode
Tipo de entrada: AltitudeMode optional
Tipo de salida: AltitudeMode
La configuración predeterminada es AltitudeMode.CLAMP_TO_GROUND.
Especifica cómo se interpreta el componente de altitud de la posición.
Atributo HTML: altitude-mode="value-name"
anchorLeft
attr: anchor-left
Tipo de entrada: string optional
Tipo de salida: string
Predeterminado: -50%
Es un valor de porcentaje de longitud de CSS que se usa para desplazar el punto de anclaje desde la esquina superior izquierda del marcador. Esto es útil cuando se usa un elemento visual que tiene un punto de anclaje diferente del punto central inferior típico del marcador predeterminado.
Atributo HTML: anchor-left="string"
anchorTop
attr: anchor-top
Tipo de entrada: string optional
Tipo de salida: string
Predeterminado: -100%
Es un valor de porcentaje de longitud de CSS que se usa para desplazar el punto de anclaje desde la esquina superior izquierda del marcador. Esto es útil cuando se usa un elemento visual que tiene un punto de anclaje diferente del punto central inferior típico del marcador predeterminado.
Atributo HTML: anchor-top="string"
AlphaautofitsCamera
attr: autofits-camera
Tipo: boolean optional
La configuración predeterminada es false.
Si se proporciona, el marcador especificado se hará visible en el viewport del mapa, junto con cualquier otro elemento que se haya habilitado.
Atributo HTML: autofits-camera
collisionBehavior
attr: collision-behavior
Tipo de entrada: CollisionBehavior optional
Tipo de salida: CollisionBehavior
La configuración predeterminada es CollisionBehavior.REQUIRED.
Es una enumeración que especifica cómo debe comportarse un MarkerElement cuando colisiona con otro MarkerElement, Marker3DElement o con las etiquetas del mapa base.
Atributo HTML: collision-behavior="value-name"
collisionPriority
attr: collision-priority
Tipo de entrada: number optional
Tipo de salida: number optional
Es un número que se usa para ayudar a determinar la prioridad relativa entre los marcadores CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY (incluido Marker3DElement). Un valor collisionPriority más alto indica una prioridad más alta.
Atributo HTML: collision-priority="number"
position
attr: position
Tipo de entrada: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Tipo de salida: LatLngAltitude optional
Es la ubicación de la punta del marcador. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
Atributo HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
title
attr: title
Tipo: string
texto de sustitución. Si se proporciona, se agregará un texto de accesibilidad (p.ej., para usar con lectores de pantalla) al MarkerElement con el valor proporcionado.
Atributo HTML: title="string"
default
Cualquier elemento personalizado que se agregue directamente al MarkerElement se asignará a un espacio.
z-index
Es el índice z de este marcador. Consulta la documentación de z-index para obtener más detalles. Los marcadores superpuestos con un índice z más alto cubren a aquellos con un índice más bajo. De forma predeterminada, los marcadores se muestran según su posición en el DOM, de modo que los marcadores que se agregan más tarde en el DOM aparecen delante de los que se agregaron antes.
Heredado: addEventListener, removeEventListener

Interfaz MarkerElementOptions

interfaz google.maps.maps3d.MarkerElementOptions
extendida por MarkerInteractiveElementOptions
implementada por MarkerElement, MarkerInteractiveElement

Es el objeto MarkerElementOptions que se usa para definir las propiedades que se pueden establecer en un MarkerElement.

altitudeMode
opcional
Tipo: AltitudeMode optional
anchorLeft
opcional
Tipo: string optional
anchorTop
opcional
Tipo: string optional
AlphaautofitsCamera
opcional
Tipo: boolean optional
collisionBehavior
opcional
Tipo: CollisionBehavior optional
collisionPriority
opcional
Tipo: number optional
position
opcional
title
opcional
Tipo: string optional
Consulta los MarkerElement.title.

Clase MarkerInteractiveElement

class google.maps.maps3d.MarkerInteractiveElement extends MarkerElement, HTMLElement implements MarkerElementOptions, MarkerInteractiveElementOptions
library "maps3d"

Muestra una posición en un mapa en 3D. Ten en cuenta que se debe establecer el position para que se muestre el MarkerInteractiveElement. A diferencia de MarkerElement, MarkerInteractiveElement recibe un evento gmp-click.

<gmp-marker-interactive
  gmp-popover-target-element="popover-id">
</gmp-marker-interactive>
const {MarkerInteractiveElement} = await google.maps.importLibrary("maps3d");
MarkerInteractiveElement
MarkerInteractiveElement([options])
Parámetros:
Crea un MarkerInteractiveElement con las opciones especificadas.
gmpPopoverTargetElement
attr: gmp-popover-target-element
Tipo de entrada: PopoverElement optional
Tipo de salida: PopoverElement optional
Cuando se establece, el elemento emergente se abrirá al hacer clic en este marcador.
Atributo HTML: gmp-popover-target-element="popover-id"
Heredado: altitudeMode (attr: altitude-mode), anchorLeft (attr: anchor-left), anchorTop (attr: anchor-top), AlphaautofitsCamera (attr: autofits-camera), collisionBehavior (attr: collision-behavior), collisionPriority (attr: collision-priority), position (attr: position), title (attr: title)
Heredado: default
Heredado: z-index
Heredado: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumentos:
Este evento se activa cuando se hace clic en el elemento MarkerInteractiveElement.

Interfaz MarkerInteractiveElementOptions

interfaz google.maps.maps3d.MarkerInteractiveElementOptions extiende MarkerElementOptions
implementada por MarkerInteractiveElement

Es el objeto MarkerInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un MarkerInteractiveElement.

gmpPopoverTargetElement
opcional
Tipo: PopoverElement optional
Heredados: altitudeMode, anchorLeft, anchorTop, AlphaautofitsCamera, collisionBehavior, collisionPriority, position, title

Clase Marker3DElement

clase google.maps.maps3d.Marker3DElement extiende HTMLElement implementa Marker3DElementOptions
extendida por Marker3DInteractiveElement
biblioteca "maps3d"

Muestra una posición en un mapa en 3D. Ten en cuenta que se debe establecer el position para que se muestre el Marker3DElement.

<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])
Parámetros:
Crea un Marker3DElement con las opciones especificadas.
altitudeMode
attr: altitude-mode
Tipo de entrada: AltitudeMode optional
Tipo de salida: AltitudeMode
La configuración predeterminada es AltitudeMode.CLAMP_TO_GROUND.
Especifica cómo se interpreta el componente de altitud de la posición.
Atributo HTML: altitude-mode="value-name"
AlphaautofitsCamera
attr: autofits-camera
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Si se proporciona, el marcador especificado se hará visible en el viewport del mapa, junto con cualquier otro elemento que se haya habilitado.
Atributo HTML: autofits-camera
collisionBehavior
attr: collision-behavior
Tipo de entrada: CollisionBehavior optional
Tipo de salida: CollisionBehavior
La configuración predeterminada es CollisionBehavior.REQUIRED.
Es una enumeración que especifica cómo debe comportarse un Marker3DElement cuando colisiona con otro Marker3DElement o con las etiquetas del mapa base.
Atributo HTML: collision-behavior="value-name"
collisionPriority
attr: collision-priority
Tipo de entrada: number optional
Tipo de salida: number optional
Es la prioridad de colisión que se usa para la detección de colisiones.
Atributo HTML: collision-priority="number"
drawsWhenOccluded
attr: draws-when-occluded
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Especifica si este marcador se debe dibujar o no cuando está oculto. La geometría del mapa (p.ej., edificios) puede ocultar el marcador.
Atributo HTML: draws-when-occluded
extruded
attr: extruded
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Especifica si se debe conectar el marcador al suelo. Para extruir un marcador, el altitudeMode debe ser RELATIVE_TO_GROUND o ABSOLUTE.
Atributo HTML: extruded
label
attr: label
Tipo de entrada: string optional
Tipo de salida: string optional
Es el texto que mostrará este marcador.
Atributo HTML: label="string"
position
attr: position
Tipo de entrada: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Tipo de salida: LatLngAltitude optional
Es la ubicación de la punta del marcador. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
Atributo HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
sizePreserved
attr: size-preserved
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Especifica si este marcador debe conservar su tamaño o no, independientemente de la distancia de la cámara. De forma predeterminada, el marcador se escala según la distancia desde la cámara o la inclinación.
Atributo HTML: size-preserved
zIndex
attr: z-index
Tipo de entrada: number optional
Tipo de salida: number optional
El zIndex en comparación con otros marcadores.
Atributo HTML: z-index="number"
default
Cualquier elemento personalizado que se agregue directamente a Marker3DElement se insertará en un espacio. Sin embargo, solo se usarán los elementos de los tipos HTMLImageElement, SVGElement y PinElement para dibujar marcadores, y se ignorarán los demás elementos.
HTMLImageElement y SVGElement deben estar encerrados en el elemento <template> antes de asignarse al espacio predeterminado de Marker3DElement.

Actualmente, las imágenes y los SVG se rasterizan antes de renderizarse en la escena en 3D, por lo que el HTML personalizado incorporado en las clases de SVG o CSS que se agreguen a las imágenes no se aplicará y es posible que no se refleje cuando se muestren los marcadores en la pantalla.
Heredado: addEventListener, removeEventListener

Interfaz Marker3DElementOptions

interfaz google.maps.maps3d.Marker3DElementOptions
extendida por Marker3DInteractiveElementOptions
implementada por Marker3DElement, Marker3DInteractiveElement

Es el objeto Marker3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Marker3DElement.

altitudeMode
opcional
Tipo: AltitudeMode optional
AlphaautofitsCamera
opcional
Tipo: boolean optional
collisionBehavior
opcional
Tipo: CollisionBehavior optional
collisionPriority
opcional
Tipo: number optional
drawsWhenOccluded
opcional
Tipo: boolean optional
extruded
opcional
Tipo: boolean optional
label
opcional
Tipo: string optional
Consulta los Marker3DElement.label.
position
opcional
sizePreserved
opcional
Tipo: boolean optional
zIndex
opcional
Tipo: number optional

Clase Marker3DInteractiveElement

class google.maps.maps3d.Marker3DInteractiveElement extends Marker3DElement, HTMLElement implements Marker3DElementOptions, Marker3DInteractiveElementOptions
library "maps3d"

Muestra una posición en un mapa en 3D. Ten en cuenta que se debe establecer el position para que se muestre el Marker3DInteractiveElement. A diferencia de Marker3DElement, Marker3DInteractiveElement recibe un evento gmp-click.

<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])
Parámetros:
Crea un Marker3DInteractiveElement con las opciones especificadas.
gmpPopoverTargetElement
attr: gmp-popover-target-element
Tipo de entrada: PopoverElement optional
Tipo de salida: PopoverElement optional
Cuando se establece, el elemento emergente se abrirá al hacer clic en este marcador.
Atributo HTML: gmp-popover-target-element="popover-id"
title
attr: title
Tipo: string
texto de sustitución. Si se proporciona, se agregará un texto de accesibilidad (p.ej., para usar con lectores de pantalla) al Marker3DInteractiveElement con el valor proporcionado.
Atributo HTML: title="string"
Heredados: 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
Cualquier elemento personalizado que se agregue directamente a Marker3DInteractiveElement se insertará en un espacio, pero solo se usarán los elementos del tipo PinElement para dibujar marcadores; se ignorarán los demás elementos.
Heredado: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumentos:
Este evento se activa cuando se hace clic en el elemento Marker3DInteractiveElement.
gmp-pointermove
function(pointerMoveEvent)
Argumentos:
Este evento se activa cuando el puntero se mueve dentro del elemento Marker3DInteractiveElement.
gmp-pointerout
function(pointerOutEvent)
Argumentos:
Este evento se activa cuando el puntero sale del elemento Marker3DInteractiveElement.
gmp-pointerover
function(pointerOverEvent)
Argumentos:
Este evento se activa cuando el puntero ingresa al elemento Marker3DInteractiveElement.

Interfaz Marker3DInteractiveElementOptions

interfaz google.maps.maps3d.Marker3DInteractiveElementOptions extiende Marker3DElementOptions
implementada por Marker3DInteractiveElement

Es el objeto Marker3DInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un Marker3DInteractiveElement.

gmpPopoverTargetElement
opcional
Tipo: PopoverElement optional
title
opcional
Tipo: string optional
Heredados: altitudeMode, AlphaautofitsCamera, collisionBehavior, collisionPriority, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Clase Model3DElement

clase google.maps.maps3d.Model3DElement extiende HTMLElement implementa Model3DElementOptions
extendida por Model3DInteractiveElement
biblioteca "maps3d"

Un modelo 3D que permite renderizar modelos de gLTF Ten en cuenta que se deben configurar position y src para que se muestre Model3DElement.

Se deben admitir las propiedades principales de gLTF PBR. Por el momento, no se admiten extensiones ni propiedades de extensión.

<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])
Parámetros:
Crea un Model3DElement con las opciones especificadas.
altitudeMode
attr: altitude-mode
Tipo de entrada: AltitudeMode optional
Tipo de salida: AltitudeMode
La configuración predeterminada es AltitudeMode.CLAMP_TO_GROUND.
Especifica cómo se interpreta la altitud en la posición.
Atributo HTML: altitude-mode="value-name"
orientation
attr: orientation
Tipo de entrada: Orientation3D|Orientation3DLiteral optional
Tipo de salida: Orientation3D optional
Describe la rotación del sistema de coordenadas de un modelo 3D para posicionarlo en el mapa en 3D.

Las rotaciones se aplican al modelo en el siguiente orden: balanceo, inclinación y, luego, rumbo.
Atributo HTML: orientation="heading,tilt,roll"
position
attr: position
Tipo de entrada: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Tipo de salida: LatLngAltitude optional
Establece la posición del Model3DElement. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
Atributo HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
scale
attr: scale
Tipo de entrada: number|Vector3D|Vector3DLiteral optional
Tipo de salida: Vector3D optional
La configuración predeterminada es 1.
Ajusta la escala del modelo a lo largo de los ejes x, y, y z en el espacio de coordenadas del modelo.
Atributo HTML:
  • scale="number"
  • scale="x,y,z"
src
attr: src
Tipo de entrada: string|URL optional
Tipo de salida: URL optional
Especifica la URL del modelo 3D. Por el momento, solo se admiten modelos en formato .glb.

Las URLs HTTP relativas se resolverán en sus correspondientes URLs absolutas.

Ten en cuenta que, si alojas tus archivos de modelo de .glb en un sitio web o servidor diferente al de tu aplicación principal, debes configurar los encabezados HTTP de CORS correctos. Esto permite que tu aplicación acceda de forma segura a los archivos del modelo desde el otro dominio.
Atributo HTML: src="url"
Heredado: addEventListener, removeEventListener

Interfaz Model3DElementOptions

interfaz google.maps.maps3d.Model3DElementOptions
extendida por Model3DInteractiveElementOptions
implementada por Model3DElement, Model3DInteractiveElement

Es el objeto Model3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Model3DElement.

altitudeMode
opcional
Tipo: AltitudeMode optional
orientation
opcional
position
opcional
scale
opcional
Tipo: number|Vector3D|Vector3DLiteral optional
Consulta los Model3DElement.scale.
src
opcional
Tipo: string|URL optional
Consulta los Model3DElement.src.

Clase Model3DInteractiveElement

class google.maps.maps3d.Model3DInteractiveElement extends Model3DElement, HTMLElement implements Model3DElementOptions, Model3DInteractiveElementOptions
library "maps3d"

Un modelo 3D que permite renderizar modelos de gLTF Ten en cuenta que se deben configurar position y src para que se muestre Model3DElement.

Se deben admitir las propiedades principales de gLTF PBR. Por el momento, no se admiten extensiones ni propiedades de extensión.

A diferencia de Model3DElement, Model3DInteractiveElement recibe un evento gmp-click.

<gmp-model-3d-interactive></gmp-model-3d-interactive>
const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Model3DInteractiveElement
Model3DInteractiveElement([options])
Parámetros:
Crea un Model3DInteractiveElement con las opciones especificadas.
Heredados: altitudeMode (attr: altitude-mode), orientation (attr: orientation), position (attr: position), scale (attr: scale), src (attr: src)
Heredado: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumentos:
Este evento se activa cuando se hace clic en el elemento Model3DInteractiveElement.
gmp-pointermove
function(pointerMoveEvent)
Argumentos:
Este evento se activa cuando el puntero se mueve dentro del elemento Model3DInteractiveElement.
gmp-pointerout
function(pointerOutEvent)
Argumentos:
Este evento se activa cuando el puntero sale del elemento Model3DInteractiveElement.
gmp-pointerover
function(pointerOverEvent)
Argumentos:
Este evento se activa cuando el puntero ingresa al elemento Model3DInteractiveElement.

Interfaz Model3DInteractiveElementOptions

interfaz google.maps.maps3d.Model3DInteractiveElementOptions extiende Model3DElementOptions
implementada por Model3DInteractiveElement

Es el objeto Model3DInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un Model3DInteractiveElement.

Heredados: altitudeMode, orientation, position, scale, src

Clase Polyline3DElement

clase google.maps.maps3d.Polyline3DElement extiende HTMLElement implementa Polyline3DElementOptions
extendida por Polyline3DInteractiveElement
biblioteca "maps3d"

Una polilínea 3D es una superposición lineal de segmentos de líneas conectados en un mapa 3D.

<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])
Parámetros:
Crea un Polyline3DElement con las opciones especificadas.
altitudeMode
attr: altitude-mode
Tipo de entrada: AltitudeMode optional
Tipo de salida: AltitudeMode
La configuración predeterminada es AltitudeMode.CLAMP_TO_GROUND.
Especifica cómo se interpretan los componentes de altitud en las coordenadas.
Atributo HTML: altitude-mode="value-name"
AlphaautofitsCamera
attr: autofits-camera
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Si se proporciona, la polilínea especificada se hará visible dentro de la vista del mapa, junto con cualquier otro elemento que se haya habilitado.
Atributo HTML: autofits-camera
drawsOccludedSegments
attr: draws-occluded-segments
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Especifica si se dibujan o no las partes de la polilínea que podrían estar ocultas. La geometría del mapa (p.ej., los edificios) puede ocultar las polilíneas.
Atributo HTML: draws-occluded-segments
extruded
attr: extruded
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Especifica si se debe conectar la polilínea al suelo. Para extruir una polilínea, el altitudeMode debe ser RELATIVE_TO_GROUND o ABSOLUTE.
Atributo HTML: extruded
geodesic
attr: geodesic
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Cuando es true, los bordes de la polilínea se interpretan como geodésicos y seguirán la curvatura de la Tierra. Cuando es false, los bordes de la polilínea se renderizan como líneas rectas en el espacio de la pantalla.
Atributo HTML: geodesic
outerColor
attr: outer-color
Tipo de entrada: string optional
Tipo de salida: string optional
Es el color exterior. Se admiten todos los colores CSS3.
Atributo HTML: outer-color="string"
outerWidth
attr: outer-width
Tipo de entrada: number optional
Tipo de salida: number optional
El ancho exterior está entre 0.0 y 1.0. Este es un porcentaje de la strokeWidth.
Atributo HTML: outer-width="number"
path
attr: path
Tipo de entrada: Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLng|LatLngLiteral> optional
Tipo de salida: Array<LatLngAltitude> optional
Es la secuencia ordenada de coordenadas de la polilínea. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
Atributo HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
strokeColor
attr: stroke-color
Tipo de entrada: string optional
Tipo de salida: string optional
color del trazo. Se admiten todos los colores CSS3.
Atributo HTML: stroke-color="string"
strokeWidth
attr: stroke-width
Tipo de entrada: number optional
Tipo de salida: number optional
ancho de trazo en píxeles.
Atributo HTML: stroke-width="number"
zIndex
attr: z-index
Tipo de entrada: number optional
Tipo de salida: number optional
Es el zIndex en comparación con otros polígonos.
Atributo HTML: z-index="number"
coordinates
Es la secuencia ordenada de coordenadas de la polilínea. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
Heredado: addEventListener, removeEventListener

Interfaz Polyline3DElementOptions

interfaz google.maps.maps3d.Polyline3DElementOptions
extendida por Polyline3DInteractiveElementOptions
implementada por Polyline3DElement, Polyline3DInteractiveElement

Es el objeto Polyline3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Polyline3DElement.

altitudeMode
opcional
Tipo: AltitudeMode optional
AlphaautofitsCamera
opcional
Tipo: boolean optional
coordinates
opcional
drawsOccludedSegments
opcional
Tipo: boolean optional
extruded
opcional
Tipo: boolean optional
geodesic
opcional
Tipo: boolean optional
outerColor
opcional
Tipo: string optional
outerWidth
opcional
Tipo: number optional
path
opcional
strokeColor
opcional
Tipo: string optional
strokeWidth
opcional
Tipo: number optional
zIndex
opcional
Tipo: number optional

Clase Polyline3DInteractiveElement

class google.maps.maps3d.Polyline3DInteractiveElement extends Polyline3DElement, HTMLElement implements Polyline3DElementOptions, Polyline3DInteractiveElementOptions
library "maps3d"

Una polilínea 3D es una superposición lineal de segmentos de líneas conectados en un mapa 3D. A diferencia de Polyline3DElement, Polyline3DInteractiveElement recibe un evento gmp-click.

<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>
const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Parámetros:
Crea un Polyline3DInteractiveElement con las opciones especificadas.
Heredados: 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
Heredado: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumentos:
  • clickEvent: LocationClickEvent optional El objeto de evento contendrá la ubicación de latitud, longitud y altitud del clic.
Este evento se activa cuando se hace clic en el elemento Polyline3DInteractiveElement.
gmp-pointermove
function(pointerMoveEvent)
Argumentos:
Este evento se activa cuando el puntero se mueve dentro del elemento Polyline3DInteractiveElement.
gmp-pointerout
function(pointerOutEvent)
Argumentos:
Este evento se activa cuando el puntero sale del elemento Polyline3DInteractiveElement.
gmp-pointerover
function(pointerOverEvent)
Argumentos:
Este evento se activa cuando el puntero ingresa al elemento Polyline3DInteractiveElement.

Interfaz Polyline3DInteractiveElementOptions

interfaz google.maps.maps3d.Polyline3DInteractiveElementOptions extiende Polyline3DElementOptions
implementada por Polyline3DInteractiveElement

Es el objeto Polyline3DInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un Polyline3DInteractiveElement.

Heredados: altitudeMode, AlphaautofitsCamera, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, strokeColor, strokeWidth, zIndex

Clase Polygon3DElement

clase google.maps.maps3d.Polygon3DElement extiende HTMLElement implementa Polygon3DElementOptions
extendida por Polygon3DInteractiveElement
biblioteca "maps3d"

Un polígono 3D (como una polilínea 3D) define una serie de coordenadas conectadas en una secuencia ordenada. Además, los polígonos forman un bucle cerrado y definen una región rellena.

<gmp-polygon-3d
  autofits-camera
  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])
Parámetros:
Crea un Polygon3DElement con las opciones especificadas.
altitudeMode
Tipo de entrada: AltitudeMode optional
Tipo de salida: AltitudeMode
La configuración predeterminada es AltitudeMode.CLAMP_TO_GROUND.
Especifica cómo se interpretan los componentes de altitud en las coordenadas.
AlphaautofitsCamera
attr: autofits-camera
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Si se proporciona, el polígono especificado se hará visible dentro del viewport del mapa, junto con cualquier otro elemento que se haya habilitado.
Atributo HTML: autofits-camera
drawsOccludedSegments
attr: draws-occluded-segments
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Especifica si se dibujan o no las partes del polígono que podrían estar ocultas. La geometría del mapa (p.ej., edificios) puede ocultar los polígonos.
Atributo HTML: draws-occluded-segments
extruded
attr: extruded
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Especifica si se debe conectar el polígono al suelo. Para extruir un polígono, el altitudeMode debe ser RELATIVE_TO_GROUND o ABSOLUTE.
Atributo HTML: extruded
fillColor
attr: fill-color
Tipo de entrada: string optional
Tipo de salida: string optional
color de relleno. Se admiten todos los colores CSS3.
Atributo HTML: fill-color="string"
geodesic
attr: geodesic
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Cuando es true, los bordes del polígono se interpretan como geodésicos y seguirán la curvatura de la Tierra. Cuando es false, los bordes del polígono se renderizan como líneas rectas en el espacio de la pantalla.
Atributo HTML: geodesic
innerPaths
Tipo de entrada: Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLng|LatLngLiteral>> optional
Tipo de salida: Array<Array<LatLngAltitude>> optional
Es la secuencia ordenada de coordenadas que designa un bucle cerrado. A diferencia de las polilíneas, un polígono puede constar de una o más rutas, que crean varios recortes dentro del polígono.
path
attr: path
Tipo de entrada: Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLng|LatLngLiteral> optional
Tipo de salida: Array<LatLngAltitude> optional
Es la secuencia ordenada de coordenadas que designa un bucle cerrado. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
Atributo HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
strokeColor
attr: stroke-color
Tipo de entrada: string optional
Tipo de salida: string optional
color del trazo. Se admiten todos los colores CSS3.
Atributo HTML: stroke-color="string"
strokeWidth
attr: stroke-width
Tipo de entrada: number optional
Tipo de salida: number optional
ancho de trazo en píxeles.
Atributo HTML: stroke-width="number"
zIndex
attr: z-index
Tipo de entrada: number optional
Tipo de salida: number optional
Es el zIndex en comparación con otros polígonos.
Atributo HTML: z-index="number"
outerCoordinates
Es la secuencia ordenada de coordenadas que designa un bucle cerrado. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
innerCoordinates
Es la secuencia ordenada de coordenadas que designa un bucle cerrado. A diferencia de las polilíneas, un polígono puede constar de una o más rutas, que crean varios recortes dentro del polígono.
Heredado: addEventListener, removeEventListener

Interfaz Polygon3DElementOptions

interfaz google.maps.maps3d.Polygon3DElementOptions
extendida por Polygon3DInteractiveElementOptions
implementada por Polygon3DElement, Polygon3DInteractiveElement

Es el objeto Polygon3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Polygon3DElement.

altitudeMode
opcional
Tipo: AltitudeMode optional
AlphaautofitsCamera
opcional
Tipo: boolean optional
drawsOccludedSegments
opcional
Tipo: boolean optional
extruded
opcional
Tipo: boolean optional
fillColor
opcional
Tipo: string optional
geodesic
opcional
Tipo: boolean optional
innerCoordinates
opcional
innerPaths
opcional
outerCoordinates
opcional
path
opcional
Consulta los Polygon3DElement.path.
strokeColor
opcional
Tipo: string optional
strokeWidth
opcional
Tipo: number optional
zIndex
opcional
Tipo: number optional

Clase Polygon3DInteractiveElement

class google.maps.maps3d.Polygon3DInteractiveElement extends Polygon3DElement, HTMLElement implements Polygon3DElementOptions, Polygon3DInteractiveElementOptions
library "maps3d"

Un polígono 3D (como una polilínea 3D) define una serie de coordenadas conectadas en una secuencia ordenada. Además, los polígonos forman un bucle cerrado y definen una región rellena. A diferencia de Polygon3DElement, Polygon3DInteractiveElement recibe un evento gmp-click.

<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>
const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Parámetros:
Crea un Polygon3DInteractiveElement con las opciones especificadas.
Heredados: altitudeMode, AlphaautofitsCamera (attr: autofits-camera), 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
Heredado: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumentos:
  • clickEvent: LocationClickEvent optional El objeto de evento contendrá la ubicación de latitud, longitud y altitud del clic.
Este evento se activa cuando se hace clic en el elemento Polygon3DInteractiveElement.
gmp-pointermove
function(pointerMoveEvent)
Argumentos:
Este evento se activa cuando el puntero se mueve dentro del elemento Polygon3DInteractiveElement.
gmp-pointerout
function(pointerOutEvent)
Argumentos:
Este evento se activa cuando el puntero sale del elemento Polygon3DInteractiveElement.
gmp-pointerover
function(pointerOverEvent)
Argumentos:
Este evento se activa cuando el puntero ingresa al elemento Polygon3DInteractiveElement.

Interfaz Polygon3DInteractiveElementOptions

interfaz google.maps.maps3d.Polygon3DInteractiveElementOptions extiende Polygon3DElementOptions
implementada por Polygon3DInteractiveElement

Es el objeto Polygon3DInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un Polygon3DInteractiveElement.

Heredados: altitudeMode, AlphaautofitsCamera, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, innerPaths, outerCoordinates, path, strokeColor, strokeWidth, zIndex

Clase FlattenerElement

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

Se usa un elemento de aplanamiento para aplanar un área específica en el mapa.

<gmp-flattener
  path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ...">
</gmp-flattener>
const {FlattenerElement} = await google.maps.importLibrary("maps3d");
FlattenerElement
FlattenerElement([options])
Parámetros:
innerPaths
Tipo de entrada: Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLng|LatLngLiteral>> optional
Tipo de salida: Array<Array<LatLngAltitude>> optional
Es la secuencia ordenada de coordenadas que designa un bucle cerrado. Estas rutas definen los agujeros de exclusión dentro de la ruta principal del polígono, que es la zona de aplanamiento. Las áreas dentro de un innerPath están exentas de la nivelación.
path
attr: path
Tipo de entrada: Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLng|LatLngLiteral> optional
Tipo de salida: Array<LatLngAltitude> optional
Es la secuencia ordenada de coordenadas que designa un bucle cerrado. Este bucle define la zona de aplanamiento.
Atributo HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
Heredado: addEventListener, removeEventListener

Interfaz FlattenerElementOptions

interfaz google.maps.maps3d.FlattenerElementOptions
implementada por FlattenerElement

Es el objeto FlattenerElementOptions que se usa para definir las propiedades que se pueden establecer en un FlattenerElement.

innerPaths
opcional
path
opcional
Consulta los FlattenerElement.path.

Clase Label3DElement

class google.maps.maps3d.Label3DElement extends HTMLElement implements Label3DElementOptions
library "maps3d"

Representa una etiqueta de texto asociada con un marcador 3D en un mapa, lo que permite configurar de forma independiente propiedades como el comportamiento de colisión.

<gmp-label-3d
  collision-behavior="value-name"
  for="marker-id">
</gmp-label-3d>
const {Label3DElement} = await google.maps.importLibrary("maps3d");
Label3DElement
Label3DElement([options])
Parámetros:
Crea un Label3DElement con las opciones especificadas.
collisionBehavior
attr: collision-behavior
Tipo de entrada: CollisionBehavior optional
Tipo de salida: CollisionBehavior optional
La configuración predeterminada es CollisionBehavior.REQUIRED.
Es una enumeración que especifica cómo debe comportarse la etiqueta de un Marker3DElement cuando se superpone con otro elemento.
Atributo HTML: collision-behavior="value-name"
for
attr: for
Tipo de entrada: string|HTMLElement optional
Tipo de salida: string|HTMLElement optional
Es el Marker3DElement al que se aplica esta etiqueta.
Atributo HTML: for="marker-id"
Heredado: addEventListener, removeEventListener

Interfaz Label3DElementOptions

interfaz google.maps.maps3d.Label3DElementOptions
implementada por Label3DElement

Es el objeto Label3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Label3DElement.

collisionBehavior
opcional
Tipo: CollisionBehavior optional
Es una enumeración que especifica cómo debe comportarse la etiqueta de un Marker3DElement cuando se superpone con otro elemento.
for
opcional
Tipo: string|HTMLElement optional
Es el Marker3DElement al que se aplica esta etiqueta.

Clase PopoverElement

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

Es un elemento HTML personalizado que renderiza un cuadro emergente. Parece un cuadro de diálogo y, a menudo, está conectada a un marcador.

<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])
Parámetros:
altitudeMode
Tipo de entrada: AltitudeMode optional
Tipo de salida: AltitudeMode
La configuración predeterminada es AltitudeMode.CLAMP_TO_GROUND.
Especifica cómo se interpreta el componente de altitud de la posición.
autoPanDisabled
attr: auto-pan-disabled
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Si se establece como verdadero, se inhabilita el desplazamiento del mapa para que el cuadro emergente sea completamente visible cuando se abra.
Atributo HTML: auto-pan-disabled
lightDismissDisabled
attr: light-dismiss-disabled
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Especifica si este cuadro emergente debe cerrarse con un clic fuera de él o no. El comportamiento de "descarte ligero" es similar a configurar el atributo popover="auto", que forma parte de la API de Popover del navegador.
Atributo HTML: light-dismiss-disabled
open
attr: open
Tipo de entrada: boolean optional
Tipo de salida: boolean
La configuración predeterminada es false.
Especifica si este cuadro emergente debe estar abierto o no.
Atributo HTML: open
positionAnchor
attr: position-anchor
Es la posición en la que se mostrará este cuadro emergente. Si el cuadro emergente está fijado a un marcador interactivo, se usará la posición del marcador.
Atributo HTML:
  • position-anchor="lat,lng"
  • position-anchor="lat,lng,altitude"
  • position-anchor="marker-id"
default
Coloca el contenido con ranuras en la sección principal del cuadro emergente.
header
Coloca el contenido con ranuras en la sección de encabezado del cuadro emergente.
--gmp-popover-max-width
Es el ancho máximo del cuadro emergente, independientemente del ancho del contenido.
--gmp-popover-min-width
Es el ancho mínimo del cuadro emergente, independientemente del ancho del contenido. Cuando uses esta propiedad, te recomendamos que la configures con un valor inferior al ancho del mapa (en píxeles).
--gmp-popover-pixel-offset-x
Es el desplazamiento en el eje X, en píxeles, de la punta de la ventana emergente desde el punto del mapa en cuyas coordenadas geográficas está anclada la ventana emergente.
--gmp-popover-pixel-offset-y
Es el desplazamiento en el eje Y, en píxeles, de la punta del cuadro emergente desde el punto del mapa en cuyas coordenadas geográficas está anclado el cuadro emergente.
background-color
Es el color de fondo del cuadro emergente. Consulta la documentación de background-color para obtener más detalles. Ten en cuenta que la ventana emergente predeterminada del lugar también se ve afectada por esta propiedad. Usa clases de CSS específicas o estilos intercalados en los popovers personalizados para evitar que se aplique el estilo del popover de lugar predeterminado.
border-radius
Es el radio del borde de la ventana emergente. Consulta la documentación de border-radius para obtener más detalles. Ten en cuenta que la ventana emergente predeterminada del lugar también se ve afectada por esta propiedad. Usa clases de CSS específicas o estilos intercalados en los popovers personalizados para evitar que se aplique el estilo del popover de lugar predeterminado.
box-shadow
La sombra difuminada del cuadro emergente. Consulta la documentación de box-shadow para obtener más detalles. Ten en cuenta que la ventana emergente predeterminada del lugar también se ve afectada por esta propiedad. Usa clases de CSS específicas o estilos intercalados en los popovers personalizados para evitar que se aplique el estilo del popover de lugar predeterminado.
color-scheme
Indica en qué esquema de colores se puede renderizar este cuadro emergente. Consulta la documentación de color-scheme para obtener más detalles. Si no se especifica, se usa de forma predeterminada el esquema de colores que prefiere el usuario.
padding
Es el padding del cuadro emergente. Consulta la documentación de padding para obtener más detalles. Ten en cuenta que la ventana emergente predeterminada del lugar también se ve afectada por esta propiedad. Usa clases de CSS específicas o estilos intercalados en los popovers personalizados para evitar que se aplique el estilo del popover de lugar predeterminado.
Heredado: addEventListener, removeEventListener

Interfaz PopoverElementOptions

interfaz google.maps.maps3d.PopoverElementOptions
implementada por PopoverElement

Objeto PopoverElementOptions que se usa para definir las propiedades que se pueden establecer en un PopoverElement.

altitudeMode
opcional
Tipo: AltitudeMode optional
autoPanDisabled
opcional
Tipo: boolean optional
lightDismissDisabled
opcional
Tipo: boolean optional
open
opcional
Tipo: boolean optional
Consulta los PopoverElement.open.
positionAnchor
opcional

Constantes de AltitudeMode

constantes google.maps.maps3d.AltitudeMode
biblioteca "maps3d"

Especifica cómo se interpretan los componentes de altitud en las coordenadas.

Estas constantes también se pueden usar como cadenas. En TypeScript, los literales de cadena se definen con el tipo AltitudeModeString.

const {AltitudeMode} = await google.maps.importLibrary("maps3d");
ABSOLUTE Permite expresar objetos en relación con el nivel medio del mar. Esto también significa que, si cambia el nivel de detalle del terreno debajo del objeto, su posición absoluta seguirá siendo la misma.
CLAMP_TO_GROUND Permite expresar objetos colocados en el suelo. Permanecerán a nivel del suelo siguiendo el terreno, independientemente de la altitud que se proporcione. Si el objeto se coloca sobre un cuerpo de agua importante, se ubicará al nivel del mar.
RELATIVE_TO_GROUND Permite expresar objetos en relación con la superficie del suelo. Si cambia el nivel de detalle del terreno, la posición del objeto permanecerá constante con respecto al suelo. Cuando se encuentre sobre el agua, la altitud se interpretará como un valor en metros sobre el nivel del mar.
RELATIVE_TO_MESH Permite expresar objetos en relación con el punto más alto del suelo, el edificio o la superficie del agua. Cuando se encuentre sobre el agua, será la superficie del agua; cuando se encuentre sobre el terreno, será la superficie del edificio (si hay alguno) o la superficie del suelo (si no hay edificios).

Clase CirclePathElement

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

Una superposición de círculo en 3D en un mapa en 3D.

<gmp-circle-path
  center="lat,lng,altitude"
  radius="number">
</gmp-circle-path>
const {CirclePathElement} = await google.maps.importLibrary("maps3d");
CirclePathElement
CirclePathElement([options])
Parámetros:
Crea un CirclePathElement con las opciones especificadas.
center
attr: center
Tipo de entrada: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Tipo de salida: LatLngAltitude optional
El centro del círculo.
Atributo HTML: center="lat,lng,altitude"
radius
attr: radius
Tipo de entrada: number optional
Tipo de salida: number optional
Es el radio del círculo en metros.
Atributo HTML: radius="number"
Heredado: addEventListener, removeEventListener

Interfaz CirclePathElementOptions

interfaz google.maps.maps3d.CirclePathElementOptions
implementada por CirclePathElement

Es el objeto CirclePathElementOptions que se usa para definir las propiedades que se pueden establecer en un CirclePathElement.

center
opcional
radius
opcional
Tipo: number optional