3D Maps

Clase Map3DElement

Clase google.maps.maps3d.Map3DElement

Map3DElement es una interfaz HTML para la vista de mapa en 3D. Ten en cuenta que se debe configurar el parámetro mode para que el mapa en 3D comience a renderizarse.

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

Esta clase extiende HTMLElement.

Esta clase implementa Map3DElementOptions.

Llama al const {Map3DElement} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Map3DElement
Map3DElement([options])
Parámetros: 
bounds
Cuando se establece, restringe la posición de la cámara dentro de los límites de latitud y longitud especificados. Ten en cuenta que los objetos fuera de los límites se renderizan de todas formas. Los límites pueden restringir la longitud y la latitud, o bien solo la latitud o la longitud. Para los límites solo de latitud, usa las longitudes oeste y este de -180 y 180, respectivamente. Para los límites que solo incluyen la longitud, usa las latitudes norte y sur de 90 y -90, respectivamente.
center
Es el centro del mapa, que se proporciona como un objeto LatLngAltitude, en el que la altitud se expresa en metros sobre el nivel del suelo. Ten en cuenta que no necesariamente es la ubicación de la cámara, ya que el campo range afecta la distancia de la cámara desde el centro del mapa. Si no se establece, el valor predeterminado es {lat: 0, lng: 0, altitude: 63170000}. 63170000 metros es la altitud máxima permitida (radio de la Tierra multiplicado por 10).
Atributo HTML:
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultUIDisabled
Tipo:  boolean optional
Predeterminado: false
Cuando es true, se inhabilitan todos los botones de la IU predeterminada. No inhabilita el teclado ni los controles por gestos.
Atributo HTML:
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
heading
Tipo:  number optional
Orientación de la brújula del mapa, en grados, donde el norte geográfico es cero. Cuando no hay inclinación, cualquier giro se interpretará como rumbo.
Atributo HTML:
  • <gmp-map-3d heading="number"></gmp-map-3d>
internalUsageAttributionIds
Tipo:  Iterable<string> optional
Agrega un ID de atribución de uso al inicializador, lo que ayuda a Google a comprender qué bibliotecas y muestras son útiles para los desarrolladores, como el uso de una biblioteca de agrupamiento de marcadores. Para inhabilitar el envío del ID de atribución de uso, puedes borrar esta propiedad sin problemas. Solo se enviarán los valores únicos. Es posible que se ignoren los cambios en este valor después de la creación de instancias.
Atributo HTML:
  • <gmp-map-3d internal-usage-attribution-ids="id1 id2"></gmp-map-3d>
maxAltitude
Tipo:  number optional
Es la altitud máxima sobre el nivel del suelo que se mostrará en el mapa. Un valor válido está entre 0 y 63170000 metros (el radio de la Tierra multiplicado por 10).
Atributo HTML:
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
Tipo:  number optional
Es el ángulo máximo de orientación (rotación) del mapa. Un valor válido está entre 0 y 360 grados. minHeading y maxHeading representan un intervalo de <= 360 grados en el que se permitirán los gestos de rumbo. minHeading = 180 y maxHeading = 90 permitirán el encabezado en [0, 90] y el encabezado en [180, 360]. minHeading = 90 y maxHeading = 180 permitirán el encabezado en [90, 180].
Atributo HTML:
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
Tipo:  number optional
Es el ángulo de incidencia máximo del mapa. Un valor válido está entre 0 y 90 grados.
Atributo HTML:
  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude
Tipo:  number optional
Es la altitud mínima sobre el nivel del suelo que se mostrará en el mapa. Un valor válido está entre 0 y 63170000 metros (el radio de la Tierra multiplicado por 10).
Atributo HTML:
  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading
Tipo:  number optional
Es el ángulo mínimo de orientación (rotación) del mapa. Un valor válido está entre 0 y 360 grados. minHeading y maxHeading representan un intervalo de <= 360 grados en el que se permitirán los gestos de rumbo. minHeading = 180 y maxHeading = 90 permitirán el encabezado en [0, 90] y el encabezado en [180, 360]. minHeading = 90 y maxHeading = 180 permitirán el encabezado en [90, 180].
Atributo HTML:
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
Tipo:  number optional
Es el ángulo de incidencia mínimo del mapa. Un valor válido está entre 0 y 90 grados.
Atributo HTML:
  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
mode
Tipo:  MapMode optional
Especifica un modo en el que se debe renderizar el mapa. Si no se configura, no se renderizará el mapa.
Atributo HTML:
  • <gmp-map-3d mode="hybrid"></gmp-map-3d>
  • <gmp-map-3d mode="satellite"></gmp-map-3d>
range
Tipo:  number optional
Es la distancia desde la cámara hasta el centro del mapa, en metros.
Atributo HTML:
  • <gmp-map-3d range="number"></gmp-map-3d>
roll
Tipo:  number optional
Es el ángulo de la cámara alrededor del vector de visualización en grados. Para resolver ambigüedades, cuando no hay inclinación, cualquier giro se interpretará como rumbo.
Atributo HTML:
  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt
Tipo:  number optional
Es la inclinación del vector de vista de la cámara en grados. Un vector de vista que mira directamente hacia la Tierra tendría una inclinación de cero grados. Un vector de vista que apunta en dirección opuesta a la Tierra tendría una inclinación de 180 grados.
Atributo HTML:
  • <gmp-map-3d tilt="number"></gmp-map-3d>
addEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que distingue mayúsculas de minúsculas y que representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor de devolución:  void
Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
flyCameraAround
flyCameraAround(options)
Parámetros: 
Valor de retorno: Ninguno
Este método hace que la cámara orbite alrededor de una ubicación determinada durante un período específico, y que realice la cantidad de vueltas indicada en ese tiempo.

De forma predeterminada, la cámara orbita en sentido horario. Si se proporciona un número negativo para las órbitas, la cámara orbitará en sentido contrario a las agujas del reloj.

El método es asíncrono porque las animaciones solo pueden comenzar después de que el mapa se haya cargado en una cantidad mínima. El método se devuelve una vez que se inicia la animación.

Si la cantidad de giros es cero, no se producirá ningún giro y la animación se completará inmediatamente después de que comience.
flyCameraTo
flyCameraTo(options)
Parámetros: 
Valor de retorno: Ninguno
Este método mueve la cámara de forma parabólica desde la ubicación actual hasta una ubicación final determinada durante un período determinado.

El método es asíncrono porque las animaciones solo pueden comenzar después de que el mapa se haya cargado en una cantidad mínima. El método se devuelve una vez que se inicia la animación.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor de devolución:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener.
stopCameraAnimation
stopCameraAnimation()
Parámetros: Ninguno
Valor de retorno: Ninguno
Este método detiene cualquier animación de vuelo que se esté ejecutando. La cámara permanece donde está a mitad de la animación; no se teletransporta al punto final.

El método es asíncrono porque las animaciones solo pueden iniciarse o detenerse después de que el mapa haya cargado una cantidad mínima. El método se devuelve una vez que se detiene la animación.
gmp-animationend
function(animationEndEvent)
Argumentos: 
  • animationEndEvent:  Event
Este evento se activa cuando finaliza la animación de vuelo. Este evento se propaga hacia arriba a través del árbol del DOM.
gmp-centerchange
function(centerChangeEvent)
Argumentos: 
  • centerChangeEvent:  Event
Este evento se activa cuando cambia la propiedad center del objeto Map3DElement.
gmp-click
function(clickEvent)
Argumentos: 
Este evento se activa cuando se hace clic en el elemento Map3DElement.
gmp-error
function(mapInitializationErrorEvent)
Argumentos: 
  • mapInitializationErrorEvent:  Event
Este evento se activa cuando no se puede inicializar el mapa.
gmp-headingchange
function(headingChangeEvent)
Argumentos: 
  • headingChangeEvent:  Event
Este evento se activa cuando cambia la propiedad de encabezado de Map3DElement.
gmp-rangechange
function(rangeChangeEvent)
Argumentos: 
  • rangeChangeEvent:  Event
Este evento se activa cuando cambia la propiedad range de Map3DElement.
gmp-rollchange
function(rollChangeEvent)
Argumentos: 
  • rollChangeEvent:  Event
Este evento se activa cuando cambia la propiedad de rotación de Map3DElement.
gmp-steadychange
function(steadyChangeEvent)
Argumentos: 
Este evento se activa cuando cambia el estado estable de Map3DElement.
gmp-tiltchange
function(tiltChangeEvent)
Argumentos: 
  • tiltChangeEvent:  Event
Este evento se activa cuando cambia la propiedad de inclinación de Map3DElement.

Interfaz de Map3DElementOptions

Interfaz de google.maps.maps3d.Map3DElementOptions

Objeto Map3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Map3DElement.
bounds optional
Consulta los Map3DElement.bounds.
center optional
Consulta los Map3DElement.center.
defaultUIDisabled optional
Tipo:  boolean optional
Consulta los Map3DElement.defaultUIDisabled.
heading optional
Tipo:  number optional
Consulta los Map3DElement.heading.
internalUsageAttributionIds optional
Tipo:  Iterable<string> optional
Consulta los Map3DElement.internalUsageAttributionIds.
maxAltitude optional
Tipo:  number optional
Consulta los Map3DElement.maxAltitude.
maxHeading optional
Tipo:  number optional
Consulta los Map3DElement.maxHeading.
maxTilt optional
Tipo:  number optional
Consulta los Map3DElement.maxTilt.
minAltitude optional
Tipo:  number optional
Consulta los Map3DElement.minAltitude.
minHeading optional
Tipo:  number optional
Consulta los Map3DElement.minHeading.
minTilt optional
Tipo:  number optional
Consulta los Map3DElement.minTilt.
mode optional
Tipo:  MapMode optional
Consulta los Map3DElement.mode.
range optional
Tipo:  number optional
Consulta los Map3DElement.range.
roll optional
Tipo:  number optional
Consulta los Map3DElement.roll.
tilt optional
Tipo:  number optional
Consulta los Map3DElement.tilt.

Constantes de MapMode

Constantes de google.maps.maps3d.MapMode

Especifica un modo en el que se debe renderizar el mapa.

Llama al const {MapMode} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
HYBRID En este modo de mapa, se muestra una capa transparente de las calles principales sobre imágenes satelitales o fotorrealistas.
SATELLITE En este modo de mapa, se muestran imágenes satelitales o fotorrealistas cuando están disponibles.

Interfaz FlyAroundAnimationOptions

Interfaz de google.maps.maps3d.FlyAroundAnimationOptions

Son las opciones de personalización de la animación FlyCameraAround.
camera
Es el punto central al que debe mirar la cámara durante la animación de órbita. Ten en cuenta que la orientación del mapa cambiará a medida que la cámara orbite alrededor de este punto central.
durationMillis optional
Tipo:  number optional
Es la duración de la animación, expresada en milisegundos. Esta es la duración total de la animación, no la duración de una sola rotación.
rounds optional
Tipo:  number optional
Es la cantidad de giros alrededor del centro en la duración determinada. Esto controla la velocidad general de rotación. Si pasas un número negativo a la función de redondeo, la cámara rotará en el sentido contrario a las manecillas del reloj en lugar de en el sentido predeterminado.

Interfaz FlyToAnimationOptions

Interfaz de google.maps.maps3d.FlyToAnimationOptions

Son las opciones de personalización de la animación FlyCameraTo.
endCamera
Es la ubicación a la que debe apuntar la cámara al final de la animación.
durationMillis optional
Tipo:  number optional
Es la duración de la animación, expresada en milisegundos. Una duración de 0 teletransportará la cámara directamente a la posición final.

Interfaz CameraOptions

Interfaz de google.maps.maps3d.CameraOptions

Objeto CameraOptions que se usa para definir las propiedades que se pueden establecer en un objeto de cámara. El objeto de cámara puede ser cualquier elemento que tenga una posición de cámara, p.ej., el estado actual del mapa o un estado de animación solicitado en el futuro.
center optional
Consulta los Map3DElement.center.
heading optional
Tipo:  number optional
Consulta los Map3DElement.heading.
range optional
Tipo:  number optional
Consulta los Map3DElement.range.
roll optional
Tipo:  number optional
Consulta los Map3DElement.roll.
tilt optional
Tipo:  number optional
Consulta los Map3DElement.tilt.

Clase SteadyChangeEvent

Clase google.maps.maps3d.SteadyChangeEvent

Este evento se crea a partir de la supervisión de un estado estable de Map3DElement. Este evento se propaga hacia arriba a través del árbol del DOM.

Esta clase extiende Event.

Llama al const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
isSteady
Tipo:  boolean
Indica si Map3DElement está estable (es decir, si se completó toda la renderización de la escena actual) o no.

Clase LocationClickEvent

Clase google.maps.maps3d.LocationClickEvent

Este evento se crea cuando se hace clic en un Map3DElement.

Esta clase extiende Event.

Llama al const {LocationClickEvent} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
position
Tipo:  LatLngAltitude optional
Latitud, longitud y altitud que se encontraban debajo del cursor cuando ocurrió el evento. Ten en cuenta que, en los niveles más generales, se devolverán datos menos precisos. Además, es posible que se muestre la elevación del fondo marino como valor de altitud cuando se hace clic en la superficie del agua desde posiciones de cámara más altas. Este evento se propaga hacia arriba a través del árbol del DOM.

Clase PlaceClickEvent

Clase google.maps.maps3d.PlaceClickEvent

Este evento se crea cuando se hace clic en el ícono de un lugar en un Map3DElement. Para evitar que aparezca el elemento emergente predeterminado, llama al método preventDefault() en este evento para evitar que lo controle el Map3DElement.

Esta clase extiende LocationClickEvent.

Llama al const {PlaceClickEvent} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
placeId
Tipo:  string
Es el ID de lugar de la función del mapa.
Heredado: position
fetchPlace
fetchPlace()
Parámetros: Ninguno
Valor de devolución:  Promise<Place>
Recupera un objeto Place para este ID de lugar. En el objeto Place resultante, se propagará la propiedad id. Posteriormente, se pueden solicitar campos adicionales a través de Place.fetchFields(), sujeto a la habilitación y facturación normales de la API de Places. La promesa se rechaza si se produjo un error al recuperar el Place.

Clase Marker3DElement

Clase google.maps.maps3d.Marker3DElement

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

Elemento personalizado:
<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>

Esta clase extiende HTMLElement.

Esta clase implementa Marker3DElementOptions.

Llama al const {Marker3DElement} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Marker3DElement
Marker3DElement([options])
Parámetros: 
Crea un Marker3DElement con las opciones especificadas.
altitudeMode
Tipo:  AltitudeMode optional
Predeterminado: AltitudeMode.CLAMP_TO_GROUND
Especifica cómo se interpreta el componente de altitud de la posición.
Atributo HTML:
  • <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
Tipo:  CollisionBehavior optional
Predeterminado: 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:
  • <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
Tipo:  boolean optional
Predeterminado: false
Especifica si este marcador se debe dibujar o no cuando está obstruido. El marcador puede estar obstruido por la geometría del mapa (p.ej., edificios).
Atributo HTML:
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
Tipo:  boolean optional
Predeterminado: false
Especifica si se debe conectar el marcador al suelo. Para extruir un marcador, altitudeMode debe ser RELATIVE_TO_GROUND o ABSOLUTE.
Atributo HTML:
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
Tipo:  string optional
Es el texto que mostrará este marcador.
Atributo HTML:
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
Ubicación de la punta del marcador. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
Atributo HTML:
  • <gmp-marker-3d position="lat,lng"></gmp-marker-3d>
  • <gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>
sizePreserved
Tipo:  boolean optional
Predeterminado: 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 ajusta según la distancia de la cámara o la inclinación.
Atributo HTML:
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
Tipo:  number optional
Es el índice Z en comparación con otros marcadores.
Atributo HTML:
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
Se insertarán todos los elementos personalizados que se agreguen directamente a Marker3DElement. Sin embargo, solo se usarán los elementos de los tipos HTMLImageElement, SVGElement y PinElement para dibujar marcadores. Se ignorarán los demás elementos.
, HTMLImageElement y SVGElement deben estar envueltos en el elemento <template> antes de asignarse a la ranura predeterminada de Marker3DElement.

Actualmente, las imágenes y los SVG se rasterizan antes de renderizarse en la escena 3D, por lo que no se aplicará el código HTML personalizado incorporado en SVG ni las clases CSS agregadas a las imágenes, y es posible que no se reflejen cuando se muestren marcadores en la pantalla.
addEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que distingue mayúsculas de minúsculas y que representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor de devolución:  void
Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor de devolución:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener.

Interfaz Marker3DElementOptions

Interfaz de google.maps.maps3d.Marker3DElementOptions

Objeto Marker3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Marker3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Consulta los Marker3DElement.altitudeMode.
collisionBehavior optional
Tipo:  CollisionBehavior optional
Consulta los Marker3DElement.collisionBehavior.
drawsWhenOccluded optional
Tipo:  boolean optional
Consulta los Marker3DElement.drawsWhenOccluded.
extruded optional
Tipo:  boolean optional
Consulta los Marker3DElement.extruded.
label optional
Tipo:  string optional
Consulta los Marker3DElement.label.
position optional
Consulta los Marker3DElement.position.
sizePreserved optional
Tipo:  boolean optional
Consulta los Marker3DElement.sizePreserved.
zIndex optional
Tipo:  number optional
Consulta los Marker3DElement.zIndex.

Clase Marker3DInteractiveElement

Clase google.maps.maps3d.Marker3DInteractiveElement

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

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

Esta clase extiende Marker3DElement.

Esta clase implementa Marker3DInteractiveElementOptions.

Llama al const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
Parámetros: 
Crea un Marker3DInteractiveElement con las opciones especificadas.
gmpPopoverTargetElement
Tipo:  PopoverElement optional
Cuando se establece, el elemento emergente se abrirá al hacer clic en este marcador.
Atributo HTML:
  • <gmp-marker-3d-interactive gmp-popover-target="popover-id"></gmp-marker-3d-interactive>
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 elemento Marker3DInteractiveElement con el valor proporcionado.
Atributo HTML:
  • <gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>
Heredado: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex
default
Cualquier elemento personalizado que se agregue directamente a Marker3DInteractiveElement se insertará, pero solo se usarán los elementos del tipo de PinElement para dibujar marcadores. Los demás elementos se ignorarán.
addEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que distingue mayúsculas de minúsculas y que representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor de devolución:  void
Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor de devolución:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener.
gmp-click
function(clickEvent)
Argumentos: 
Este evento se activa cuando se hace clic en el elemento Marker3DInteractiveElement.

Interfaz Marker3DInteractiveElementOptions

Interfaz de google.maps.maps3d.Marker3DInteractiveElementOptions

Objeto Marker3DInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un Marker3DInteractiveElement.

Esta interfaz extiende Marker3DElementOptions.

gmpPopoverTargetElement optional
Tipo:  PopoverElement optional
Consulta los Marker3DInteractiveElement.gmpPopoverTargetElement.
title optional
Tipo:  string optional
Consulta los Marker3DInteractiveElement.title.
Heredado: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Clase Model3DElement

Clase google.maps.maps3d.Model3DElement

Un modelo 3D que permite la renderización de modelos glTF Ten en cuenta que se deben establecer position y src para que se muestre Model3DElement.

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

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

Esta clase extiende HTMLElement.

Esta clase implementa Model3DElementOptions.

Llama al const {Model3DElement} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Model3DElement
Model3DElement([options])
Parámetros: 
Crea un Model3DElement con las opciones especificadas.
altitudeMode
Tipo:  AltitudeMode optional
Predeterminado: AltitudeMode.CLAMP_TO_GROUND
Especifica cómo se interpreta la altitud en la posición.
Atributo HTML:
  • <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
Describe la rotación del sistema de coordenadas de un modelo 3D para posicionarlo en el mapa 3D.

Las rotaciones se aplican al modelo en el siguiente orden: balanceo, inclinación y, luego, rumbo.
Atributo HTML:
  • <gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>
position
Establece la posición del Model3DElement. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
Atributo HTML:
  • <gmp-model-3d position="lat,lng"></gmp-model-3d>
  • <gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>
scale
Tipo:  number|Vector3D|Vector3DLiteral optional
Predeterminado: 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:
  • <gmp-model-3d scale="number"></gmp-model-3d>
  • <gmp-model-3d scale="x,y,z"></gmp-model-3d>
src
Tipo:  string|URL optional
Especifica la URL del modelo 3D. Por el momento, solo se admiten modelos en formato .glb.

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

Ten en cuenta que, si alojas los archivos de tu modelo .glb en un sitio web o servidor diferente al de tu aplicación principal, asegúrate de 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:
  • <gmp-model-3d src="url"></gmp-model-3d>
addEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que distingue mayúsculas de minúsculas y que representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor de devolución:  void
Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor de devolución:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener.

Interfaz Model3DElementOptions

Interfaz de google.maps.maps3d.Model3DElementOptions

Objeto Model3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Model3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Consulta los Model3DElement.altitudeMode.
orientation optional
Consulta los Model3DElement.orientation.
position optional
Consulta los Model3DElement.position.
scale optional
Tipo:  number|Vector3D|Vector3DLiteral optional
Consulta los Model3DElement.scale.
src optional
Tipo:  string|URL optional
Consulta los Model3DElement.src.

Clase Model3DInteractiveElement

Clase google.maps.maps3d.Model3DInteractiveElement

Un modelo 3D que permite la renderización de modelos glTF Ten en cuenta que se deben establecer position y src para que se muestre Model3DElement.

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

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

Elemento personalizado:
<gmp-model-3d-interactive></gmp-model-3d-interactive>

Esta clase extiende Model3DElement.

Esta clase implementa Model3DInteractiveElementOptions.

Llama al const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Model3DInteractiveElement
Model3DInteractiveElement([options])
Parámetros: 
Crea un Model3DInteractiveElement con las opciones especificadas.
Heredado: altitudeMode, orientation, position, scale, src
addEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que distingue mayúsculas de minúsculas y que representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor de devolución:  void
Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor de devolución:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener.
gmp-click
function(clickEvent)
Argumentos: 
Este evento se activa cuando se hace clic en el elemento Model3DInteractiveElement.

Interfaz de Model3DInteractiveElementOptions

Interfaz de google.maps.maps3d.Model3DInteractiveElementOptions

Objeto Model3DInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un Model3DInteractiveElement.

Esta interfaz extiende Model3DElementOptions.

Heredado: altitudeMode, orientation, position, scale, src

Clase Polyline3DElement

Clase google.maps.maps3d.Polyline3DElement

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

Elemento personalizado:
<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>

Esta clase extiende HTMLElement.

Esta clase implementa Polyline3DElementOptions.

Llama al const {Polyline3DElement} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Polyline3DElement
Polyline3DElement([options])
Parámetros: 
Crea un Polyline3DElement con las opciones especificadas.
altitudeMode
Tipo:  AltitudeMode optional
Predeterminado: AltitudeMode.CLAMP_TO_GROUND
Especifica cómo se interpretan los componentes de altitud en las coordenadas.
Atributo HTML:
  • <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
Tipo:  boolean optional
Predeterminado: false
Especifica si se dibujan o no las partes de la polilínea que podrían estar obstruidas. La geometría del mapa (p.ej., edificios) puede ocultar las polilíneas.
Atributo HTML:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
Tipo:  boolean optional
Predeterminado: false
Especifica si se debe conectar la polilínea al suelo. Para extrudir una polilínea, altitudeMode debe ser RELATIVE_TO_GROUND o ABSOLUTE.
Atributo HTML:
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
Tipo:  boolean optional
Predeterminado: 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:
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
Tipo:  string optional
Es el color exterior. Se admiten todos los colores CSS3.
Atributo HTML:
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerWidth
Tipo:  number optional
El ancho exterior está entre 0.0 y 1.0. Es un porcentaje del strokeWidth.
Atributo HTML:
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
path
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:
  • <gmp-polyline-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polyline-3d>
strokeColor
Tipo:  string optional
color del trazo. Se admiten todos los colores CSS3.
Atributo HTML:
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeWidth
Tipo:  number optional
ancho de trazo en píxeles.
Atributo HTML:
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
Tipo:  number optional
Es el índice Z en comparación con otros polígonos.
Atributo HTML:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
coordinates
Es la secuencia ordenada de coordenadas de la polilínea. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
addEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que distingue mayúsculas de minúsculas y que representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor de devolución:  void
Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor de devolución:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener.

Interfaz Polyline3DElementOptions

Interfaz de google.maps.maps3d.Polyline3DElementOptions

Objeto Polyline3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Polyline3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Consulta los Polyline3DElement.altitudeMode.
coordinates optional
Consulta los Polyline3DElement.coordinates.
drawsOccludedSegments optional
Tipo:  boolean optional
Consulta los Polyline3DElement.drawsOccludedSegments.
extruded optional
Tipo:  boolean optional
Consulta los Polyline3DElement.extruded.
geodesic optional
Tipo:  boolean optional
Consulta los Polyline3DElement.geodesic.
outerColor optional
Tipo:  string optional
Consulta los Polyline3DElement.outerColor.
outerWidth optional
Tipo:  number optional
Consulta los Polyline3DElement.outerWidth.
strokeColor optional
Tipo:  string optional
Consulta los Polyline3DElement.strokeColor.
strokeWidth optional
Tipo:  number optional
Consulta los Polyline3DElement.strokeWidth.
zIndex optional
Tipo:  number optional
Consulta los Polyline3DElement.zIndex.

Clase Polyline3DInteractiveElement

Clase google.maps.maps3d.Polyline3DInteractiveElement

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.

Elemento personalizado:
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

Esta clase extiende Polyline3DElement.

Esta clase implementa Polyline3DInteractiveElementOptions.

Llama al const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Parámetros: 
Crea un Polyline3DInteractiveElement con las opciones especificadas.
Heredado: altitudeMode, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, strokeColor, strokeWidth, zIndex, coordinates
addEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que distingue mayúsculas de minúsculas y que representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor de devolución:  void
Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor de devolución:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener.
gmp-click
function(clickEvent)
Argumentos: 
  • clickEvent:  LocationClickEvent 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.

Interfaz Polyline3DInteractiveElementOptions

Interfaz de google.maps.maps3d.Polyline3DInteractiveElementOptions

Objeto Polyline3DInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un Polyline3DInteractiveElement.

Esta interfaz extiende Polyline3DElementOptions.

Heredado: altitudeMode, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, strokeColor, strokeWidth, zIndex

Clase Polygon3DElement

Clase google.maps.maps3d.Polygon3DElement

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

Elemento personalizado:
<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>

Esta clase extiende HTMLElement.

Esta clase implementa Polygon3DElementOptions.

Llama al const {Polygon3DElement} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Polygon3DElement
Polygon3DElement([options])
Parámetros: 
Crea un Polygon3DElement con las opciones especificadas.
altitudeMode
Tipo:  AltitudeMode optional
Predeterminado: AltitudeMode.CLAMP_TO_GROUND
Especifica cómo se interpretan los componentes de altitud en las coordenadas.
Atributo HTML:
  • <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
Tipo:  boolean optional
Predeterminado: false
Especifica si se dibujan o no las partes del polígono que podrían estar ocultas. Los polígonos pueden estar ocultos por la geometría del mapa (p.ej., edificios).
Atributo HTML:
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
Tipo:  boolean optional
Predeterminado: 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:
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
Tipo:  string optional
color de relleno. Se admiten todos los colores CSS3.
Atributo HTML:
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
geodesic
Tipo:  boolean optional
Predeterminado: 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:
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerPaths
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 cortes dentro del polígono.
path
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:
  • <gmp-polygon-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polygon-3d>
strokeColor
Tipo:  string optional
color del trazo. Se admiten todos los colores CSS3.
Atributo HTML:
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeWidth
Tipo:  number optional
ancho de trazo en píxeles.
Atributo HTML:
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
Tipo:  number optional
Es el índice Z en comparación con otros polígonos.
Atributo HTML:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
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 cortes dentro del polígono.
addEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que distingue mayúsculas de minúsculas y que representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor de devolución:  void
Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor de devolución:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener.

Interfaz Polygon3DElementOptions

Interfaz de google.maps.maps3d.Polygon3DElementOptions

Objeto Polygon3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Polygon3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Consulta los Polygon3DElement.altitudeMode.
drawsOccludedSegments optional
Tipo:  boolean optional
Consulta los Polygon3DElement.drawsOccludedSegments.
extruded optional
Tipo:  boolean optional
Consulta los Polygon3DElement.extruded.
fillColor optional
Tipo:  string optional
Consulta los Polygon3DElement.fillColor.
geodesic optional
Tipo:  boolean optional
Consulta los Polygon3DElement.geodesic.
innerCoordinates optional
Consulta los Polygon3DElement.innerCoordinates.
outerCoordinates optional
Consulta los Polygon3DElement.outerCoordinates.
strokeColor optional
Tipo:  string optional
Consulta los Polygon3DElement.strokeColor.
strokeWidth optional
Tipo:  number optional
Consulta los Polygon3DElement.strokeWidth.
zIndex optional
Tipo:  number optional
Consulta los Polygon3DElement.zIndex.

Clase Polygon3DInteractiveElement

Clase google.maps.maps3d.Polygon3DInteractiveElement

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 rellenada. A diferencia de Polygon3DElement, Polygon3DInteractiveElement recibe un evento gmp-click.

Elemento personalizado:
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

Esta clase extiende Polygon3DElement.

Esta clase implementa Polygon3DInteractiveElementOptions.

Llama al const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Parámetros: 
Crea un Polygon3DInteractiveElement con las opciones especificadas.
Heredado: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerPaths, path, strokeColor, strokeWidth, zIndex, outerCoordinates, innerCoordinates
addEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que distingue mayúsculas de minúsculas y que representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor de devolución:  void
Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor de devolución:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener.
gmp-click
function(clickEvent)
Argumentos: 
  • clickEvent:  LocationClickEvent 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.

Interfaz Polygon3DInteractiveElementOptions

Interfaz de google.maps.maps3d.Polygon3DInteractiveElementOptions

Objeto Polygon3DInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un Polygon3DInteractiveElement.

Esta interfaz extiende Polygon3DElementOptions.

Heredado: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, outerCoordinates, strokeColor, strokeWidth, zIndex

Clase PopoverElement

Clase google.maps.maps3d.PopoverElement

Es un elemento HTML personalizado que renderiza una ventana emergente. Parece una burbuja y, a menudo, está conectada a un marcador.

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

Esta clase extiende HTMLElement.

Esta clase implementa PopoverElementOptions.

Llama al const {PopoverElement} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
PopoverElement
PopoverElement([options])
Parámetros: 
altitudeMode
Tipo:  AltitudeMode optional
Predeterminado: AltitudeMode.CLAMP_TO_GROUND
Especifica cómo se interpreta el componente de altitud de la posición.
Atributo HTML:
  • <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
Tipo:  boolean optional
Predeterminado: false
Especifica si esta ventana emergente debe descartarse con un "descarte ligero" 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:
  • <gmp-popover light-dismiss-disabled></gmp-popover>
open
Tipo:  boolean optional
Predeterminado: false
Especifica si esta ventana emergente debe estar abierta o no.
Atributo HTML:
  • <gmp-popover open></gmp-popover>
positionAnchor
Posición en la que se mostrará esta ventana emergente. Si la ventana emergente está anclada a un marcador interactivo, se usará la posición del marcador.
Atributo HTML:
  • <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
Coloca el contenido insertado en la sección principal de la ventana emergente.
header
Coloca el contenido ranurado en la sección de encabezado de la ventana emergente.
--gmp-popover-max-width
Ancho máximo de la ventana emergente, independientemente del ancho del contenido.
--gmp-popover-min-width
Ancho mínimo del elemento 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 se ancla la ventana emergente.
--gmp-popover-pixel-offset-y
Es el desplazamiento en el eje Y, en píxeles, de la punta de la ventana emergente desde el punto del mapa en cuyas coordenadas geográficas se ancla la ventana emergente.
color-scheme
Indica con qué esquema de color se puede renderizar este elemento emergente. Consulta la documentación de color-scheme para obtener más detalles. Si no se especifica, se usan las preferencias de esquema de color del usuario de forma predeterminada.
addEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que distingue mayúsculas de minúsculas y que representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor de devolución:  void
Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor de devolución:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener.

Interfaz PopoverElementOptions

Interfaz de google.maps.maps3d.PopoverElementOptions

Objeto PopoverElementOptions que se usa para definir las propiedades que se pueden establecer en un PopoverElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Consulta los PopoverElement.altitudeMode.
lightDismissDisabled optional
Tipo:  boolean optional
Consulta los PopoverElement.lightDismissDisabled.
open optional
Tipo:  boolean optional
Consulta los PopoverElement.open.
positionAnchor optional
Consulta los PopoverElement.positionAnchor.

Constantes de AltitudeMode

Constantes de google.maps.maps3d.AltitudeMode

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

Llama al const {AltitudeMode} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
ABSOLUTE Permite expresar objetos en relación con el nivel medio del mar promedio. Esto también significa que, si el nivel de detalle del terreno cambia 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 proporcionada. Si el objeto se posiciona sobre un cuerpo de agua importante, se colocará 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 en relación con el 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 la superficie más alta del suelo, los edificios y el agua. Cuando se encuentre sobre el agua, será la superficie del agua; cuando se encuentre sobre el terreno, será la superficie del edificio (si está presente) o la superficie del suelo (si no hay edificios).