Advanced Markers

Clase AdvancedMarkerElement

Clase google.maps.marker.AdvancedMarkerElement

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

Nota: El uso como componente web (p.ej., con el elemento HTML <gmp-advanced-marker> personalizado, 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 de la API de Maps JavaScript.

AdvancedMarkerElement
AdvancedMarkerElement([options])
Parámetros: 
Crea un AdvancedMarkerElement con las opciones especificadas. Si se especifica un mapa, el valor AdvancedMarkerElement se agrega al mapa en el momento de la construcción.
collisionBehavior
Tipo:  CollisionBehavior optional
content
Tipo:  Node optional
element
Tipo:  HTMLElement
Este campo es de solo lectura. El elemento DOM que respalda la vista.
BetagmpClickable
Tipo:  boolean optional
gmpDraggable
Tipo:  boolean optional
map
Tipo:  Map optional
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
Atributo HTML:
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
Tipo:  number optional
BetaaddEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • typestring Es una cadena que distingue mayúsculas de minúsculas, que representa el tipo de evento que se debe escuchar.
  • listenerEventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent
  • optionsboolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor que se muestra:  void
Configura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener.
addListener
addListener(eventName, handler)
Parámetros: 
  • eventNamestring evento observado.
  • handler:  Es la función Function para controlar eventos.
Valor que se muestra: Es el objeto de escucha de eventos resultante MapsEventListener.
Agrega la función de objeto de escucha determinada al nombre del evento determinado en el sistema de eventos de Maps.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • typestring Es una cadena que especifica el tipo de evento para el que se quita un objeto de escucha de eventos.
  • listenerEventListener|EventListenerObject Es el objeto de escucha de eventos del controlador que se quitará del destino del evento.
  • optionsboolean|EventListenerOptions optional Consulta las opciones
Valor que se muestra:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener
click
function(event)
Argumentos: 
Este evento se activa cuando se hace clic en el elemento AdvancedMarkerElement.

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

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

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

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

AdvancedMarkerElementOptions

Interfaz google.maps.marker.AdvancedMarkerElementOptions

Opciones para construir un AdvancedMarkerElement.

collisionBehavior optional
Tipo:  CollisionBehavior optional
Es una enumeración que especifica cómo debe comportarse una AdvancedMarkerElement cuando colisiona con otra AdvancedMarkerElement o con las etiquetas del mapa base en un mapa de vectores.

Nota: La colisión AdvancedMarkerElement a AdvancedMarkerElement funciona tanto en mapas de tramas como en mapas de vectores. Sin embargo, AdvancedMarkerElement para la colisión de etiquetas del mapa base solo funciona en mapas de vectores.

content optional
Tipo:  Node optional
Valor predeterminado: PinElement.element
El elemento DOM que respalda la imagen de un AdvancedMarkerElement

Nota: AdvancedMarkerElement no clona el elemento DOM pasado. Una vez que se pasa el elemento DOM a un AdvancedMarkerElement, si pasas el mismo elemento DOM a otro AdvancedMarkerElement, este se moverá y hará que la AdvancedMarkerElement anterior parezca vacía.

BetagmpClickable optional
Tipo:  boolean optional
Valor predeterminado: false
Si es true, se podrá hacer clic en el elemento AdvancedMarkerElement y se activará el evento gmp-click. Además, será interactivo para fines de accesibilidad (p. ej., permitir la navegación con el teclado mediante las teclas de flecha).
gmpDraggable optional
Tipo:  boolean optional
Valor predeterminado: false
Si es true, se puede arrastrar el AdvancedMarkerElement.

Nota: AdvancedMarkerElement con altitud no se puede arrastrar.

map optional
Tipo:  Map optional
Mapa en el que se muestra el AdvancedMarkerElement. Se requiere que el mapa muestre el AdvancedMarkerElement y se puede proporcionar configurando AdvancedMarkerElement.map si no se proporciona durante la construcción.
position optional
Establece la posición de AdvancedMarkerElement. Un objeto AdvancedMarkerElement se puede construir sin una posición, pero no se mostrará hasta que se proporcione su posición, por ejemplo, mediante las acciones o elecciones de un usuario. Para proporcionar la posición de un AdvancedMarkerElement, se puede configurar 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á un texto de accesibilidad (p.ej., para uso con lectores de pantalla) a AdvancedMarkerElement con el valor proporcionado.
zIndex optional
Tipo:  number optional
Todos los elementos AdvancedMarkerElement se muestran en el mapa en orden de su zIndex, y los valores más altos se muestran delante de los AdvancedMarkerElement con valores más bajos. De forma predeterminada, los elementos AdvancedMarkerElement se muestran según su posición vertical en la pantalla, y los elementos AdvancedMarkerElement más bajos aparecen delante de los elementos AdvancedMarkerElement más arriba de la pantalla. Ten en cuenta que también se usa zIndex para ayudar a determinar la prioridad relativa entre CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY Markers avanzados. Un valor zIndex más alto indica una prioridad más alta.

Clase AdvancedMarkerClickEvent

Clase google.maps.marker.AdvancedMarkerClickEvent

Este evento se crea al hacer clic en un Marcador avanzado. 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 de la API de Maps JavaScript.

Clase PinElement

Clase google.maps.marker.PinElement

Un PinElement representa un elemento del DOM que consta de una forma y un glifo. La forma tiene el mismo estilo de globo que se ve en el objeto AdvancedMarkerElement predeterminado. El glifo es un elemento opcional del DOM que se muestra en la forma del globo. Es posible que un PinElement tenga 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 una subclase HTMLElement o HTML).

Esta clase extiende HTMLElement.

Esta clase implementa PinElementOptions.

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

PinElement
PinElement([options])
Parámetros: 
background
Tipo:  string optional
borderColor
Tipo:  string optional
element
Tipo:  HTMLElement
Este campo es de solo lectura. El elemento DOM que respalda la vista.
glyph
Tipo:  string|Element|URL optional
glyphColor
Tipo:  string optional
scale
Tipo:  number optional
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: 
  • typestring Es una cadena que especifica el tipo de evento para el que se quita un objeto de escucha de eventos.
  • listenerEventListener|EventListenerObject Es el objeto de escucha de eventos del controlador que se quitará del destino del evento.
  • optionsboolean|EventListenerOptions optional Consulta las opciones
Valor que se muestra:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener

PinElementOptions

Interfaz google.maps.marker.PinElementOptions

Opciones para crear un PinElement.

background optional
Tipo:  string optional
El color de fondo de la forma del pin. Admite cualquier valor de color de CSS.
borderColor optional
Tipo:  string optional
El color del borde de la forma de alfiler. Admite cualquier valor de color de CSS.
glyph optional
Tipo:  string|Element|URL optional
Es el elemento DOM que se muestra en el marcador.
glyphColor optional
Tipo:  string optional
Indica el color del glifo. Admite cualquier valor de color de CSS.
scale optional
Tipo:  number optional
Valor predeterminado: 1
La escala del pin.