Advanced Markers

AdvancedMarkerElement

Clase google.maps.marker.AdvancedMarkerElement

Muestra una posición en un mapa. Ten en cuenta que position debe configurarse para que se muestre AdvancedMarkerElement.

Nota: El uso como componente web (p.ej., con el elemento HTML personalizado <gmp-advanced-marker> solo está disponible en el canal v=beta).

Elemento personalizado:
<gmp-advanced-marker position="lat,lng" title="string"></gmp-advanced-marker>

Esta clase extiende HTMLElement.

Esta clase implementa AdvancedMarkerElementOptions.

Para acceder, llama a const {AdvancedMarkerElement} = await google.maps.importLibrary("marker"). Consulta Bibliotecas en la API de Maps JavaScript.
AdvancedMarkerElement
AdvancedMarkerElement([options])
Parámetros: 
Crea un AdvancedMarkerElement con las opciones especificadas. Si se especifica un mapa, se agregará AdvancedMarkerElement al mapa en el momento de la construcción.
collisionBehavior
Tipo:  CollisionBehavior optional
Consulta los AdvancedMarkerElementOptions.collisionBehavior.
content
Tipo:  Node optional
Consulta los AdvancedMarkerElementOptions.content.
element
Tipo:  HTMLElement
Este campo es de solo lectura. El elemento DOM que respalda la vista
gmpDraggable
Tipo:  boolean optional
Consulta los AdvancedMarkerElementOptions.gmpDraggable.
map
Tipo:  Map optional
Consulta los AdvancedMarkerElementOptions.map.
position
Consulta los AdvancedMarkerElementOptions.position.
Atributo HTML:
  • <gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>
  • <gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>
title
Tipo:  string
Consulta los AdvancedMarkerElementOptions.title.
Atributo HTML:
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
Tipo:  number optional
Consulta los AdvancedMarkerElementOptions.zIndex.
BetaaddEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una string que distingue mayúsculas de minúsculas y representa el tipo de evento que se detectará.
  • 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 Consulte opciones. Los eventos personalizados solo admiten capture y passive.
Valor que se muestra:  void
Configura una función que se llamará cada vez que el evento especificado se entregue al destino. Consulta addEventListener.
addListener
addListener(eventName, handler)
Parámetros: 
  • eventName:  string Evento observado.
  • handler:  Es la función Function para controlar eventos.
Valor que se muestra:  MapsEventListener Objeto de escucha de eventos resultante.
Agrega la función de objeto de escucha determinada al nombre del evento especificado en el sistema de eventos de Maps.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una string que especifica el tipo de evento del que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject Es el objeto de escucha de eventos del controlador del evento que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Ver opciones
Valor que se muestra:  void
Quita un objeto de escucha de eventos registrado anteriormente en addEventListener del destino. Consulta removeEventListener.
click
function(event)
Argumentos: 
Este evento se activa cuando se hace clic en el elemento AdvancedMarkerElement.

No está disponible con addEventListener() (use gmp-click en su lugar).
drag
function(event)
Argumentos: 
Este evento se activa repetidamente mientras el usuario arrastra el AdvancedMarkerElement.

No está disponible con addEventListener().
dragend
function(event)
Argumentos: 
Este evento se activa cuando el usuario deja de arrastrar la AdvancedMarkerElement.

No está disponible con addEventListener().
dragstart
function(event)
Argumentos: 
Este evento se activa cuando el usuario comienza a arrastrar la AdvancedMarkerElement.

No está disponible con addEventListener().
Betagmp-click
function(event)
Argumentos: 
Este evento se activa cuando se hace clic en el elemento AdvancedMarkerElement. Se usa mejor con addEventListener() (en lugar de addListener()).

AdvancedMarkerElementOptions

Interfaz de google.maps.marker.AdvancedMarkerElementOptions

Opciones para construir un AdvancedMarkerElement
collisionBehavior optional
Tipo:  CollisionBehavior optional
Una enumeración que especifica cómo debe comportarse un objeto AdvancedMarkerElement cuando se superpone con otro AdvancedMarkerElement o con las etiquetas del mapa base en un mapa de vectores.

Nota: La colisión de AdvancedMarkerElement a AdvancedMarkerElement funciona tanto en mapas de tramas como en vectores. Sin embargo, la colisión de AdvancedMarkerElement en la etiqueta del mapa base solo funciona en mapas de vectores.
content optional
Tipo:  Node optional
Configuración predeterminada: PinElement.element
El elemento DOM que respalda la imagen de un AdvancedMarkerElement.

Nota: AdvancedMarkerElement no clona el elemento DOM que se pasó. Una vez que el elemento del DOM se pasa a un AdvancedMarkerElement, pasar el mismo elemento del DOM a otro AdvancedMarkerElement moverá el elemento del DOM y hará que el AdvancedMarkerElement anterior se vea vacío.
gmpDraggable optional
Tipo:  boolean optional
Configuración predeterminada: false
Si es true, se puede arrastrar el AdvancedMarkerElement.

Nota: AdvancedMarkerElement con la altitud no se puede arrastrar.
map optional
Tipo:  Map optional
Mapa en el que se muestra AdvancedMarkerElement Se requiere el mapa para mostrar el objeto AdvancedMarkerElement, y puedes proporcionarlo configurando AdvancedMarkerElement.map si no se proporciona durante la construcción.
position optional
Establece la posición de AdvancedMarkerElement. Se puede crear un elemento AdvancedMarkerElement sin una posición, pero no se mostrará hasta que se proporcione su posición (por ejemplo, mediante las acciones o las elecciones de un usuario). Se puede proporcionar la posición de un AdvancedMarkerElement configurando AdvancedMarkerElement.position si no se proporciona durante la construcción.

Nota: AdvancedMarkerElement con altitud solo se admite en los mapas de vectores.
title optional
Tipo:  string optional
texto de sustitución. Si se proporciona, se agregará a la AdvancedMarkerElement un texto de accesibilidad (p.ej., para usarlo con lectores de pantalla) con el valor proporcionado.
zIndex optional
Tipo:  number optional
Todos los AdvancedMarkerElement se muestran en el mapa en orden de su índice z, y los valores más altos se muestran frente a los AdvancedMarkerElement con valores más bajos. De forma predeterminada, los AdvancedMarkerElement se muestran según su posición vertical en la pantalla, y los AdvancedMarkerElement inferiores aparecen delante de los AdvancedMarkerElement más arriba de la pantalla. Ten en cuenta que zIndex también se usa para ayudar a determinar la prioridad relativa entre CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITYMarcadores avanzados. Un valor de zIndex más alto indica una prioridad más alta.

AdvancedMarkerClickEvent

Clase google.maps.marker.AdvancedMarkerClickEvent

Para crear este evento, se hace clic en un marcador de Advanced Markers. Accede a la posición del marcador con event.target.position.

Esta clase extiende Event.

Para acceder, llama a const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker"). Consulta Bibliotecas en la API de Maps JavaScript.

PinElement

Clase google.maps.marker.PinElement

Un PinElement representa un elemento DOM que consta de una forma y un glifo. La forma tiene el mismo estilo de globo que el AdvancedMarkerElement predeterminado. El glifo es un elemento DOM opcional que se muestra en la forma de la viñeta. Un PinElement puede tener una relación de aspecto diferente según su PinElement.scale.

Nota: Aún no se admite el uso como componente web (p.ej., como subclase HTMLElement o mediante HTML).

Esta clase extiende HTMLElement.

Esta clase implementa PinElementOptions.

Para acceder, llama a const {PinElement} = await google.maps.importLibrary("marker"). Consulta Bibliotecas en la API de Maps JavaScript.
PinElement
PinElement([options])
Parámetros: 
background
Tipo:  string optional
Consulta los PinElementOptions.background.
borderColor
Tipo:  string optional
Consulta los PinElementOptions.borderColor.
element
Tipo:  HTMLElement
Este campo es de solo lectura. El elemento DOM que respalda la vista
glyph
Tipo:  string|Element|URL optional
Consulta los PinElementOptions.glyph.
glyphColor
Tipo:  string optional
Consulta los PinElementOptions.glyphColor.
scale
Tipo:  number optional
Consulta los PinElementOptions.scale.
BetaaddEventListener
addEventListener(type, listener[, options])
Parámetros: 
Valor que se muestra:  void
Esta función aún no está disponible para su uso.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una string que especifica el tipo de evento del que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject Es el objeto de escucha de eventos del controlador del evento que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Ver opciones
Valor que se muestra:  void
Quita un objeto de escucha de eventos registrado anteriormente en addEventListener del destino. Consulta removeEventListener.

PinElementOptions.

Interfaz de google.maps.marker.PinElementOptions

Opciones para crear una PinElement
background optional
Tipo:  string optional
El color de fondo de la forma del pin Admite cualquier valor de color CSS.
borderColor optional
Tipo:  string optional
El color del borde de la forma del pin. Admite cualquier valor de color CSS.
glyph optional
Tipo:  string|Element|URL optional
El elemento DOM que se muestra en el marcador
glyphColor optional
Tipo:  string optional
El color del glifo. Admite cualquier valor de color CSS.
scale optional
Tipo:  number optional
Configuración predeterminada: 1
La escala del pin.