Advanced Markers

Classe AdvancedMarkerElement

Classe google.maps.marker.AdvancedMarkerElement

Mostra uma posição em um mapa. O position precisa ser definido para que o AdvancedMarkerElement seja exibido.

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

Essa classe estende HTMLElement.

Essa classe implementa AdvancedMarkerElementOptions.

Acesse ligando para const {AdvancedMarkerElement} = await google.maps.importLibrary("marker").
Consulte Bibliotecas na API Maps JavaScript.

AdvancedMarkerElement
AdvancedMarkerElement([options])
Parâmetros: 
Cria um AdvancedMarkerElement com as opções especificadas. Se um mapa for especificado, o AdvancedMarkerElement será adicionado ao mapa após a construção.
anchorLeft
Tipo:  string optional
Padrão: "-50%"
Um valor de porcentagem de comprimento CSS usado para deslocar o ponto de fixação do marcador em relação ao canto superior esquerdo dele. Isso é útil ao usar um elemento visual com um ponto de fixação diferente do ponto central inferior típico do marcador padrão.
Atributo HTML:
  • <gmp-advanced-marker anchor-left="string"></gmp-advanced-marker>
anchorTop
Tipo:  string optional
Padrão: "-100%"
Um valor de porcentagem de comprimento CSS usado para deslocar o ponto de fixação do marcador em relação ao canto superior esquerdo dele. Isso é útil ao usar um elemento visual com um ponto de fixação diferente do ponto central inferior típico do marcador padrão.
Atributo HTML:
  • <gmp-advanced-marker anchor-top="string"></gmp-advanced-marker>
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 é somente leitura. O elemento DOM que apoia a visualização.
content
Tipo:  Node optional
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
addListener
addListener(eventName, handler)
Parâmetros: 
  • eventName:  string evento observado.
  • handler:  Function função para processar eventos.
Valor de retorno: listener de eventos resultante MapsEventListener.
Adiciona a função de listener ao nome do evento no sistema de eventos do Maps.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.
click
function(event)
Argumentos: 
Esse evento é acionado quando o elemento AdvancedMarkerElement é clicado.

Não disponível com addEventListener() (use gmp-click).
drag
function(event)
Argumentos: 
Esse evento é disparado repetidamente enquanto o usuário arrasta o AdvancedMarkerElement.

Não disponível com addEventListener().
dragend
function(event)
Argumentos: 
Esse evento é disparado quando o usuário para de arrastar o AdvancedMarkerElement.

Não disponível com addEventListener().
dragstart
function(event)
Argumentos: 
Esse evento é disparado quando o usuário começa a arrastar o AdvancedMarkerElement.

Não disponível com addEventListener().
gmp-click
function(event)
Argumentos: 
Esse evento é acionado quando o elemento AdvancedMarkerElement é clicado. É melhor usar com addEventListener() (em vez de addListener()).

Interface AdvancedMarkerElementOptions

Interface google.maps.marker.AdvancedMarkerElementOptions

Opções para construir um AdvancedMarkerElement.

anchorLeft optional
Tipo:  string optional
Padrão: "-50%"
Um valor de porcentagem de comprimento CSS usado para deslocar o ponto de fixação do marcador em relação ao canto superior esquerdo dele. Isso é útil ao usar um elemento visual com um ponto de fixação diferente do ponto central inferior típico do marcador padrão.
anchorTop optional
Tipo:  string optional
Padrão: "-100%"
Um valor de porcentagem de comprimento CSS usado para deslocar o ponto de fixação do marcador em relação ao canto superior esquerdo dele. Isso é útil ao usar um elemento visual com um ponto de fixação diferente do ponto central inferior típico do marcador padrão.
collisionBehavior optional
Tipo:  CollisionBehavior optional
Uma enumeração que especifica como um AdvancedMarkerElement deve se comportar quando entra em conflito com outro AdvancedMarkerElement ou com os rótulos do mapa básico em um mapa vetorial.

Observação: o conflito de AdvancedMarkerElement com AdvancedMarkerElement funciona em mapas rasterizados e vetoriais, mas o conflito de AdvancedMarkerElement com o rótulo do mapa de base só funciona em mapas vetoriais.

content optional
Tipo:  Node optional
Padrão: PinElement
O elemento DOM que apoia o visual de um AdvancedMarkerElement.

Observação: AdvancedMarkerElement não clona o elemento DOM transmitido. Depois que o elemento DOM é transmitido para um AdvancedMarkerElement, transmitir o mesmo elemento DOM para outro AdvancedMarkerElement vai mover o elemento DOM e fazer com que o AdvancedMarkerElement anterior pareça vazio.

gmpClickable optional
Tipo:  boolean optional
Padrão: false
Se for true, será possível clicar no AdvancedMarkerElement, o que vai acionar o evento gmp-click, com interações pensando na acessibilidade (por exemplo, permitindo a navegação pelo teclado usando as teclas de seta).
gmpDraggable optional
Tipo:  boolean optional
Padrão: false
Se for true, o AdvancedMarkerElement poderá ser arrastado.

Observação: AdvancedMarkerElement com altitude não é arrastável.

map optional
Tipo:  Map optional
Mapa em que o AdvancedMarkerElement será exibido. O mapa é necessário para exibir o AdvancedMarkerElement e pode ser fornecido definindo AdvancedMarkerElement.map se não for fornecido na construção.
position optional
Define a posição do AdvancedMarkerElement. Um AdvancedMarkerElement pode ser construído sem uma posição, mas não será exibido até que ela seja fornecida, por exemplo, pelas ações ou escolhas de um usuário. A posição de um AdvancedMarkerElement pode ser definida com AdvancedMarkerElement.position se não for fornecida na construção.

Observação: AdvancedMarkerElement com altitude só é compatível com mapas vetoriais.

title optional
Tipo:  string optional
texto da sobreposição. Se fornecido, um texto de acessibilidade (por exemplo, para uso com leitores de tela) será adicionado ao AdvancedMarkerElement com o valor fornecido.
zIndex optional
Tipo:  number optional
Todos os AdvancedMarkerElements aparecem no mapa na ordem do zIndex. Os AdvancedMarkerElements com valores mais altos são exibidos primeiro. Por padrão, os AdvancedMarkerElements são mostrados de acordo com a posição vertical na tela, com os AdvancedMarkerElements mais baixos aparecendo na frente dos AdvancedMarkerElements mais altos. O zIndex também é usado para ajudar a determinar a prioridade relativa entre os Marcadores Avançados CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY. Um valor zIndex mais alto indica prioridade mais alta.

Classe AdvancedMarkerClickEvent

Classe google.maps.marker.AdvancedMarkerClickEvent

Esse evento é criado ao clicar em um marcador avançado. Acesse a posição do marcador com event.target.position.

Essa classe estende Event.

Acesse ligando para const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker").
Consulte Bibliotecas na API Maps JavaScript.

Classe PinElement

Classe google.maps.marker.PinElement

Um PinElement representa um elemento DOM que consiste em uma forma e um glifo. A forma tem o mesmo estilo de balão que aparece no AdvancedMarkerElement ou Marker3DElement padrão. O glifo é um elemento DOM opcional exibido no formato de balão. Um PinElement pode ter uma proporção diferente dependendo do PinElement.scale.

Essa classe estende HTMLElement.

Essa classe implementa PinElementOptions.

Acesse ligando para const {PinElement} = await google.maps.importLibrary("marker").
Consulte Bibliotecas na API Maps JavaScript.

PinElement
PinElement([options])
Parâmetros: 
background
Tipo:  string optional
borderColor
Tipo:  string optional
glyphColor
Tipo:  string optional
glyphSrc
Tipo:  URL|string optional
glyphText
Tipo:  string optional
scale
Tipo:  number optional
element
Tipo:  HTMLElement
Este campo é somente leitura. O elemento DOM que apoia a visualização.
glyph
Tipo:  string|Element|URL optional
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface PinElementOptions

Interface google.maps.marker.PinElementOptions

Opções para criar um PinElement.

background optional
Tipo:  string optional
A cor de fundo da forma do alfinete. Aceita qualquer valor de cor CSS.
borderColor optional
Tipo:  string optional
A cor da borda do formato do alfinete. Aceita qualquer valor de cor CSS.
glyph optional
Tipo:  string|Element|URL optional
O elemento DOM exibido no alfinete.
glyphColor optional
Tipo:  string optional
A cor do glifo. Aceita qualquer valor de cor CSS.
glyphSrc optional
Tipo:  URL|string optional
A origem da imagem do glifo que será mostrada no alfinete.
glyphText optional
Tipo:  string optional
O texto mostrado no alfinete.
scale optional
Tipo:  number optional
Padrão: 1
A escala do alfinete.