Advanced Markers

Clase AdvancedMarkerElement

Clase google.maps.marker.AdvancedMarkerElement

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

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

Esta clase extiende HTMLElement.

Esta clase implementa AdvancedMarkerElementOptions.

Llama al const {AdvancedMarkerElement} = await google.maps.importLibrary("marker") para acceder.
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, el AdvancedMarkerElement se agrega al mapa durante la construcción.
collisionBehavior
Tipo:  CollisionBehavior optional
gmpClickable
Tipo:  boolean optional
Atributo HTML:
  • <gmp-advanced-marker gmp-clickable></gmp-advanced-marker>
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
element
Tipo:  HTMLElement
Este campo es de solo lectura. Es el elemento DOM que respalda la vista.
content
Tipo:  Node optional
addEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • typestring Cadena que distingue mayúsculas de minúsculas y 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 de devolución:  void
Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
addListener
addListener(eventName, handler)
Parámetros: 
  • eventNamestring Evento observado.
  • handler:  Función Function para controlar eventos.
Valor de retorno:  MapsEventListener Objeto de escucha de eventos resultante.
Agrega la función de escucha determinada al nombre del evento determinado en el sistema de eventos de Maps.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • typestring Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listenerEventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • optionsboolean|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.
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 forma repetida 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 el AdvancedMarkerElement.

No está disponible con addEventListener().
dragstart
function(event)
Argumentos: 
Este evento se activa cuando el usuario comienza a arrastrar el 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 usar con addEventListener() (en lugar de addListener()).

Interfaz AdvancedMarkerElementOptions

Interfaz de google.maps.marker.AdvancedMarkerElementOptions

Son las opciones para construir un AdvancedMarkerElement.

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

Nota: La colisión de AdvancedMarkerElement a AdvancedMarkerElement funciona en mapas de tramas y de vectores, pero la colisión de AdvancedMarkerElement a la etiqueta del mapa base solo funciona en mapas de vectores.

content optional
Tipo:  Node optional
Predeterminado: PinElement.element
Elemento DOM que respalda el aspecto visual de un AdvancedMarkerElement.

Nota: AdvancedMarkerElement no clona el elemento DOM que se pasó. Una vez que el elemento DOM se pasa a un AdvancedMarkerElement, pasar el mismo elemento DOM a otro AdvancedMarkerElement lo moverá y hará que el AdvancedMarkerElement anterior parezca vacío.

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

Nota: AdvancedMarkerElement con altitud no se puede arrastrar.

map optional
Tipo:  Map optional
Mapa en el que se mostrará el AdvancedMarkerElement. Se requiere el mapa para mostrar el AdvancedMarkerElement, y se puede proporcionar configurando AdvancedMarkerElement.map si no se proporcionó en la construcción.
position optional
Establece la posición del AdvancedMarkerElement. Se puede construir un AdvancedMarkerElement sin una posición, pero no se mostrará hasta que se proporcione su posición, por ejemplo, a través de las acciones o elecciones de un usuario. La posición de un AdvancedMarkerElement se puede proporcionar configurando AdvancedMarkerElement.position si no se proporcionó en 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 usar con lectores de pantalla) al elemento AdvancedMarkerElement con el valor proporcionado.
zIndex optional
Tipo:  number optional
Todos los AdvancedMarkerElement se muestran en el mapa en el 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 AdvancedMarkerElement se muestran según su posición vertical en la pantalla, y los AdvancedMarkerElement más bajos aparecen delante de los AdvancedMarkerElement que están más arriba en la pantalla. Ten en cuenta que zIndex también se usa para ayudar a determinar la prioridad relativa entre los marcadores avanzados CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY. Un valor zIndex más alto indica una prioridad más alta.

Clase AdvancedMarkerClickEvent

Clase google.maps.marker.AdvancedMarkerClickEvent

Este evento se crea cuando se hace clic en un marcador avanzado. Accede a la posición del marcador con event.target.position.

Esta clase extiende Event.

Llama al const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker") para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.

Clase 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 se ve en el AdvancedMarkerElement predeterminado. El glifo es un elemento DOM opcional que se muestra en forma de globo. 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 de HTMLElement o a través de HTML).

Esta clase extiende HTMLElement.

Esta clase implementa PinElementOptions.

Llama al const {PinElement} = await google.maps.importLibrary("marker") para acceder.
Consulta Bibliotecas en 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. Es 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 de devolución:  void
Esta función aún no está disponible para su uso.
removeEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • typestring Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listenerEventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • optionsboolean|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 PinElementOptions

Interfaz de google.maps.marker.PinElementOptions

Son las opciones para crear un objeto PinElement.

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