Draw on the map

Clase Marker3DElement

Clase google.maps.maps3d.Marker3DElement

Muestra una posición en un mapa en 3D. Ten en cuenta que se debe establecer el position para que se muestre el 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.

Para acceder, llama al const {Marker3DElement} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
Marker3DElement
Marker3DElement([options])
Parámetros: 
Crea un Marker3DElement con las opciones especificadas.
altitudeMode
Tipo:  AltitudeMode optional
La configuración predeterminada es 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
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:
  • <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
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:
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
Tipo:  boolean optional
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:
  • <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
Es la 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
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:
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
Tipo:  number optional
El zIndex en comparación con otros marcadores.
Atributo HTML:
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
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.
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.
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.

Interfaz Marker3DElementOptions

Interfaz google.maps.maps3d.Marker3DElementOptions

Es el 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 position para que se muestre el 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.

Para acceder, llama al const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de 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 Marker3DInteractiveElement con el valor proporcionado.
Atributo HTML:
  • <gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>
Heredados: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex
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.
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.
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.
gmp-click
function(clickEvent)
Argumentos: 
Este evento se activa cuando se hace clic en el elemento Marker3DInteractiveElement.

Interfaz Marker3DInteractiveElementOptions

Interfaz google.maps.maps3d.Marker3DInteractiveElementOptions

Es el 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.
Heredados: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Clase Model3DElement

Clase google.maps.maps3d.Model3DElement

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.

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.

Para acceder, llama al const {Model3DElement} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
Model3DElement
Model3DElement([options])
Parámetros: 
Crea un Model3DElement con las opciones especificadas.
altitudeMode
Tipo:  AltitudeMode optional
La configuración predeterminada es 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 en 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
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:
  • <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.

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:
  • <gmp-model-3d src="url"></gmp-model-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.
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.

Interfaz Model3DElementOptions

Interfaz google.maps.maps3d.Model3DElementOptions

Es el 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 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.

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

Esta clase extiende Model3DElement.

Esta clase implementa Model3DInteractiveElementOptions.

Para acceder, llama al const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
Model3DInteractiveElement
Model3DInteractiveElement([options])
Parámetros: 
Crea un Model3DInteractiveElement con las opciones especificadas.
Heredados: altitudeMode, orientation, position, scale, src
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.
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.
gmp-click
function(clickEvent)
Argumentos: 
Este evento se activa cuando se hace clic en el elemento Model3DInteractiveElement.

Interfaz Model3DInteractiveElementOptions

Interfaz google.maps.maps3d.Model3DInteractiveElementOptions

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

Esta interfaz extiende Model3DElementOptions.

Heredados: 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.

Para acceder, llama al const {Polyline3DElement} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
Polyline3DElement
Polyline3DElement([options])
Parámetros: 
Crea un Polyline3DElement con las opciones especificadas.
altitudeMode
Tipo:  AltitudeMode optional
La configuración predeterminada es 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
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:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
Tipo:  boolean optional
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:
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
Tipo:  boolean optional
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:
  • <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. Este es un porcentaje de la 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 zIndex 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 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.
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.

Interfaz Polyline3DElementOptions

Interfaz google.maps.maps3d.Polyline3DElementOptions

Es el 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.

Para acceder, llama al const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Parámetros: 
Crea un Polyline3DInteractiveElement con las opciones especificadas.
Heredados: altitudeMode, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, strokeColor, strokeWidth, zIndex, coordinates
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.
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.
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 google.maps.maps3d.Polyline3DInteractiveElementOptions

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

Esta interfaz extiende Polyline3DElementOptions.

Heredados: 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 rellena.

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.

Para acceder, llama al const {Polygon3DElement} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
Polygon3DElement
Polygon3DElement([options])
Parámetros: 
Crea un Polygon3DElement con las opciones especificadas.
altitudeMode
Tipo:  AltitudeMode optional
La configuración predeterminada es 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
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:
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
Tipo:  boolean optional
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:
  • <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
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:
  • <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 recortes 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 zIndex 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 recortes dentro del polígono.
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.
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.

Interfaz Polygon3DElementOptions

Interfaz google.maps.maps3d.Polygon3DElementOptions

Es el 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 rellena. 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.

Para acceder, llama al const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Parámetros: 
Crea un Polygon3DInteractiveElement con las opciones especificadas.
Heredados: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerPaths, path, strokeColor, strokeWidth, zIndex, outerCoordinates, innerCoordinates
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.
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.
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 google.maps.maps3d.Polygon3DInteractiveElementOptions

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

Esta interfaz extiende Polygon3DElementOptions.

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

Clase PopoverElement

Clase google.maps.maps3d.PopoverElement

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

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

Esta clase extiende HTMLElement.

Esta clase implementa PopoverElementOptions.

Para acceder, llama al const {PopoverElement} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
PopoverElement
PopoverElement([options])
Parámetros: 
altitudeMode
Tipo:  AltitudeMode optional
La configuración predeterminada es 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>
autoPanDisabled
Tipo:  boolean optional
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:
  • <gmp-popover auto-pan-disabled></gmp-popover>
lightDismissDisabled
Tipo:  boolean optional
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:
  • <gmp-popover light-dismiss-disabled></gmp-popover>
open
Tipo:  boolean optional
La configuración predeterminada es false.
Especifica si este cuadro emergente debe estar abierto o no.
Atributo HTML:
  • <gmp-popover open></gmp-popover>
positionAnchor
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:
  • <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 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.
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.
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.

Interfaz PopoverElementOptions

Interfaz 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.
autoPanDisabled optional
Tipo:  boolean optional
Consulta los PopoverElement.autoPanDisabled.
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.

Para acceder, llama al const {AltitudeMode} = await google.maps.importLibrary("maps3d").
Consulta Bibliotecas de la API de Maps JavaScript.
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).