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 mode para que el mapa en 3D comience a renderizarse.

Elemento personalizado:
<gmp-map-3d center="lat,lng,altitude" default-ui-hidden description="string" gesture-handling="auto" heading="number" internal-usage-attribution-ids="id1 id2" map-id="string" 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" default-ui-disabled></gmp-map-3d>

Esta clase extiende HTMLElement.

Esta clase implementa Map3DElementOptions.

Para acceder, llama al const {Map3DElement} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de 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 que están fuera de los límites se siguen renderizando. Los límites pueden restringir tanto la longitud como la latitud, o bien solo una de ellas. Para los límites de solo latitud, usa las longitudes oeste y este de -180 y 180, respectivamente. Para los límites de solo longitud, usa las latitudes norte y sur de 90 y -90, respectivamente.
center
Es el centro del mapa, que se proporciona como un LatLngAltitude, donde la altitud se expresa en metros sobre el nivel del suelo. Ten en cuenta que no es necesariamente donde se encuentra 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}. 63,170,000 metros es la altitud máxima permitida (el radio de la Tierra multiplicado por 10).
Atributo HTML:
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultUIHidden
Tipo:  boolean optional
La configuración predeterminada es false.
Cuando se establece en true, se ocultan todos los botones de la IU predeterminada.
Atributo HTML:
  • <gmp-map-3d default-ui-hidden></gmp-map-3d>
description
Tipo:  string optional
Si se proporciona, se agregará al mapa una descripción de accesibilidad (p.ej., para usar con lectores de pantalla) con el valor proporcionado.
Atributo HTML:
  • <gmp-map-3d description="string"></gmp-map-3d>
gestureHandling
Tipo:  GestureHandling optional
La configuración predeterminada es GestureHandling.GREEDY.
Controla el manejo cooperativo de gestos. Cuando se establece en COOPERATIVE, se requieren teclas modificadoras o gestos con dos dedos para desplazarse por el mapa. Cuando se establece en GREEDY, no se puede desplazar la página host desde los eventos del usuario en el elemento del mapa. Cuando se establece en AUTO, el control de gestos se determina según la capacidad de desplazamiento de la página host.
Atributo HTML:
  • <gmp-map-3d gesture-handling="auto"></gmp-map-3d>
  • <gmp-map-3d gesture-handling="cooperative"></gmp-map-3d>
  • <gmp-map-3d gesture-handling="greedy"></gmp-map-3d>
heading
Tipo:  number optional
Es la orientación de la brújula del mapa, en grados, donde el norte es cero. Cuando no hay inclinación, cualquier balanceo 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 en clústeres. Para inhabilitar el envío del ID de atribución de uso, puedes borrar esta propiedad de forma segura. Solo se enviarán valores únicos. Es posible que se ignoren los cambios que se realicen en este valor después de la creación de una instancia.
Atributo HTML:
  • <gmp-map-3d internal-usage-attribution-ids="id1 id2"></gmp-map-3d>
language
Tipo:  string optional
Es el idioma en el que se intentará renderizar el idioma del mapa base. Se usará de forma predeterminada el idioma que solicite el desarrollador cuando cargue la API de Maps JS.
mapId
Tipo:  string optional
Especifica un ID de mapa que se usará para recuperar el diseño de mapa basado en Cloud para el mapa. No se debe establecer después de que se haya inicializado el mapa. Por lo tanto, nos aseguramos de que el mapId solo se establezca durante la inicialización y no publicamos este atributo en los canales públicos.
Atributo HTML:
  • <gmp-map-3d map-id="string"></gmp-map-3d>
maxAltitude
Tipo:  number optional
Es la altitud máxima sobre el suelo que se mostrará en el mapa. Un valor válido se encuentra 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 con la cabeza. 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 rumbo 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 suelo que se mostrará en el mapa. Un valor válido se encuentra 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 con la cabeza. 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 rumbo 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 el modo en el que se debe renderizar el mapa. Si no se establece, el mapa no se renderizará.
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>
region
Tipo:  string optional
Es la región con la que se intentará renderizar los lugares de interés del mapa base. Se usará de forma predeterminada la región que solicitó el desarrollador cuando cargó la API de Maps JS.
roll
Tipo:  number optional
Es el giro de la cámara alrededor del vector de vista en grados. Para resolver ambigüedades, cuando no haya inclinación, cualquier balanceo 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 apunte directamente hacia la Tierra tendría una inclinación de cero grados. Un vector de vista que apunte 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>
defaultUIDisabled
Tipo:  boolean optional
La configuración predeterminada es false.
Cuando se establece en true, se inhabilitan todos los botones de la IU predeterminada. No inhabilita los controles de teclado y gestos.
Atributo HTML:
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
addEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una cadena que distingue mayúsculas de minúsculas y 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 retorno:  void
Configura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener.
flyCameraAround
flyCameraAround(options)
Parámetros: 
Valor de retorno: Ninguno
Este método hace que la cámara gire alrededor de una ubicación determinada durante un tiempo específico. La animación se puede repetir la cantidad de veces que se indique en FlyAroundAnimationOptions.repeatCount.

La cámara se moverá en el sentido de las manecillas 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 muestra una vez que se inicia la animación.

Si la cantidad de veces que se repite FlyAroundAnimationOptions.repeatCount 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 específico.

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 muestra una vez que se inicia la animación.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject Es 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 retorno:  void
Quita del destino un objeto de escucha de eventos registrado anteriormente 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 se queda donde está en medio 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 se haya cargado en 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 por el árbol del DOM.
gmp-centerchange
function(centerChangeEvent)
Argumentos: 
  • centerChangeEvent:  Event
Este evento se activa cuando cambia la propiedad center de 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 heading de Map3DElement.
gmp-map-id-error
function(mapIdErrorEvent)
Argumentos: 
  • mapIdErrorEvent:  Event
Este evento se activa cuando la propiedad mapId del Map3DElement no es válida.
gmp-rangechange
function(rangeChangeEvent)
Argumentos: 
  • rangeChangeEvent:  Event
Este evento se activa cuando cambia la propiedad range del Map3DElement.
gmp-rollchange
function(rollChangeEvent)
Argumentos: 
  • rollChangeEvent:  Event
Este evento se activa cuando cambia la propiedad roll del 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 tilt del Map3DElement.

Interfaz Map3DElementOptions

Interfaz google.maps.maps3d.Map3DElementOptions

Es el 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.
defaultUIHidden optional
Tipo:  boolean optional
Consulta los Map3DElement.defaultUIHidden.
description optional
Tipo:  string optional
Consulta los Map3DElement.description.
gestureHandling optional
Tipo:  GestureHandling optional
Consulta los Map3DElement.gestureHandling.
heading optional
Tipo:  number optional
Consulta los Map3DElement.heading.
internalUsageAttributionIds optional
Tipo:  Iterable<string> optional
Consulta los Map3DElement.internalUsageAttributionIds.
language optional
Tipo:  string optional
Consulta los Map3DElement.language.
mapId optional
Tipo:  string optional
Consulta los Map3DElement.mapId.
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.
region optional
Tipo:  string optional
Consulta los Map3DElement.region.
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 el modo en el que se debe renderizar el mapa.

Para acceder, llama al const {MapMode} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
HYBRID Este modo de mapa muestra una capa transparente de las calles principales sobre imágenes satelitales o fotorrealistas.
SATELLITE Este modo de mapa muestra imágenes satelitales o fotorrealistas, según estén disponibles.

Constantes de GestureHandling

Constantes de google.maps.maps3d.GestureHandling

Especifica cómo se deben controlar los eventos de gestos en el elemento del mapa.

Para acceder, llama al const {GestureHandling} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
AUTO Esto permite que el mapa elija si se debe usar el control de gestos cooperativo o codicioso. Este es el comportamiento predeterminado si no se especifica.

Esto hará que el mapa ingrese al modo cooperativo si el mapa domina su elemento superior de desplazamiento (por lo general, la página de host) hasta el punto en que el usuario no puede desplazarse fuera del mapa hacia otro contenido.
COOPERATIVE Esto fuerza el modo cooperativo, en el que se requieren teclas modificadoras o gestos con dos dedos para desplazarse por el mapa.
GREEDY Esto fuerza el modo greedy, en el que no se puede desplazar la página host desde los eventos del usuario en el elemento del mapa.

Interfaz FlyAroundAnimationOptions

Interfaz google.maps.maps3d.FlyAroundAnimationOptions

Opciones de personalización para la animación FlyCameraAround
camera
Es el punto central 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 un ciclo de animación en milisegundos.
repeatCount optional
Tipo:  number optional
Especifica la cantidad de veces que se debe repetir una animación. Si el número es cero, la animación se completará inmediatamente después de que comience.
rounds optional
Tipo:  number optional
Es la cantidad de vueltas que se deben dar alrededor del centro en la duración determinada. Esto controla la velocidad general de la rotación. Si pasas un número negativo a rounds, la cámara rotará en el sentido contrario a las manecillas del reloj en lugar de en el sentido predeterminado.

Interfaz FlyToAnimationOptions

Interfaz google.maps.maps3d.FlyToAnimationOptions

Opciones de personalización para 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 en milisegundos. Una duración de 0 teletransportará la cámara directamente a la posición final.

Interfaz CameraOptions

Interfaz google.maps.maps3d.CameraOptions

Es el 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., un estado actual del mapa o un estado de animación solicitado para 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 por el árbol del DOM.

Esta clase extiende Event.

Para acceder, llama al const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
isSteady
Tipo:  boolean
Indica si Map3DElement es 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.

Para acceder, llama al const {LocationClickEvent} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
position
Tipo:  LatLngAltitude optional
La latitud, longitud y altitud que estaban debajo del cursor cuando se produjo el evento. Ten en cuenta que, en los niveles más generales, se devolverán datos menos precisos. Además, es posible que se devuelva la elevación del suelo marino para el valor de altitud cuando se haga clic en la superficie del agua desde posiciones de cámara más altas. Este evento se propaga hacia arriba por el á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 cuadro emergente predeterminado, llama al método preventDefault() en este evento para evitar que lo controle el Map3DElement.

Esta clase extiende LocationClickEvent.

Para acceder, llama al const {PlaceClickEvent} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
placeId
Tipo:  string
Es el ID de lugar del elemento del mapa.
Heredado: position
fetchPlace
fetchPlace()
Parámetros: Ninguno
Valor de retorno:  Promise<Place>
Recupera un Place para este ID de lugar. En el objeto Place resultante, se completará 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.