Advanced Markers

Classe AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement class
extends HTMLElement
implements AdvancedMarkerElementOptions
library "marker"

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

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

const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");

Construtor
AdvancedMarkerElement	AdvancedMarkerElement([options]) Parâmetros: options: AdvancedMarkerElementOptions optional Cria um AdvancedMarkerElement com as opções especificadas. Se um mapa for especificado, o AdvancedMarkerElement será adicionado ao mapa após a construção.

Propriedades
anchorLeft attr: anchor-left	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: anchor-left="string"
anchorTop attr: anchor-top	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: anchor-top="string"
collisionBehavior	Tipo: CollisionBehavior optional Consulte AdvancedMarkerElementOptions.collisionBehavior.
gmpClickable attr: gmp-clickable	Tipo: boolean optional Consulte AdvancedMarkerElementOptions.gmpClickable. Atributo HTML: gmp-clickable
gmpDraggable	Tipo: boolean optional Consulte AdvancedMarkerElementOptions.gmpDraggable.
map	Tipo: Map optional Consulte AdvancedMarkerElementOptions.map.
position attr: position	Tipo: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Consulte AdvancedMarkerElementOptions.position. Atributo HTML: position="lat,lng" position="lat,lng,altitude"
title attr: title	Tipo: string Consulte AdvancedMarkerElementOptions.title. Atributo HTML: title="string"
zIndex	Tipo: number optional Consulte AdvancedMarkerElementOptions.zIndex.
element somente leitura	Descontinuado: use o AdvancedMarkerElement diretamente. Tipo: HTMLElement Este campo é somente leitura. O elemento DOM que apoia a visualização.
content	Descontinuado: use .children. Tipo: Node optional Consulte AdvancedMarkerElementOptions.content.

Métodos
addListener	addListener(eventName, handler) Parâmetros: eventName: evento observado string. handler: função Function para processar eventos. Valor de retorno: MapsEventListener listener de eventos resultante. Adiciona a função de listener ao nome do evento no sistema de eventos do Maps.
Herdado: addEventListener, removeEventListener

Eventos
click	function(event) Argumentos: event: MapMouseEvent Esse evento é acionado quando o elemento AdvancedMarkerElement é clicado. Não disponível com addEventListener() (use gmp-click).
drag	function(event) Argumentos: event: MapMouseEvent Esse evento é disparado repetidamente enquanto o usuário arrasta o AdvancedMarkerElement. Não disponível com addEventListener().
dragend	function(event) Argumentos: event: MapMouseEvent Esse evento é disparado quando o usuário para de arrastar o AdvancedMarkerElement. Não disponível com addEventListener().
dragstart	function(event) Argumentos: event: MapMouseEvent Esse evento é disparado quando o usuário começa a arrastar o AdvancedMarkerElement. Não disponível com addEventListener().
gmp-click	function(event) Argumentos: event: AdvancedMarkerClickEvent 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.

Propriedades
anchorLeft opcional	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 opcional	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 opcional	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 opcional	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 opcional	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 opcional	Tipo: boolean optional Padrão: false Se for true, o AdvancedMarkerElement poderá ser arrastado. Observação: AdvancedMarkerElement com altitude não é arrastável.
map opcional	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 opcional	Tipo: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral 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 opcional	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 opcional	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. Misturar marcadores com um zIndex explícito e marcadores sem um pode levar a resultados visuais inesperados. Para garantir um comportamento previsível, recomendamos definir o zIndex para todos os marcadores ou deixá-lo sem definição. 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

google.maps.marker.AdvancedMarkerClickEvent classe
estende Event
biblioteca "marker"

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

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker");

Classe PinElement

google.maps.marker.PinElement class
extends HTMLElement
implements PinElementOptions
library "marker"

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.

const {PinElement} = await google.maps.importLibrary("marker");

Construtor
PinElement	PinElement([options]) Parâmetros: options: PinElementOptions optional

Propriedades
background	Tipo: string optional A cor de fundo da forma do alfinete. Consulte PinElementOptions.background.
borderColor	Tipo: string optional A cor da borda do formato do alfinete. Consulte PinElementOptions.borderColor.
glyphColor	Tipo: string optional A cor do glifo do alfinete. Consulte PinElementOptions.glyphColor.
glyphSrc	Tipo: URL|string optional A origem da imagem do glifo que será mostrada no alfinete. Consulte PinElementOptions.glyphSrc.
glyphText	Tipo: string optional O texto mostrado no alfinete. Consulte PinElementOptions.glyphText.
scale	Tipo: number optional Consulte PinElementOptions.scale.
element somente leitura	Descontinuado: use o PinElement diretamente. Tipo: HTMLElement Este campo é somente leitura. O elemento DOM que apoia a visualização.
glyph	Descontinuado: use PinElementOptions.glyphText ou PinElementOptions.glyphSrc. Tipo: string|Element|URL optional Consulte PinElementOptions.glyph.

Métodos
Herdado: addEventListener, removeEventListener

Interface PinElementOptions

Interface google.maps.marker.PinElementOptions

Opções para criar um PinElement.

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