Informações gerais

Selecione a plataforma: Android iOS JavaScript

Com os Marcadores Avançados, você cria e personaliza marcadores de alta performance. Personalize a cor do plano de fundo, da borda e do glifo do marcador, ajuste o tamanho dele e substitua o ícone padrão por uma imagem personalizada. Crie marcadores acessíveis que respondam a eventos de clique e a entradas de teclado do DOM. Os Marcadores Avançados aceitam HTML e CSS personalizados e permitem a criação de marcadores totalmente sob medida. Para aplicativos 3D, você pode controlar a altitude em que um marcador aparece. Os Marcadores Avançados podem ser usados em mapas vetoriais e rasterizados (um ID do mapa é necessário).

Comece a usar Marcadores Avançados

Personalizar cor, escala e imagem do ícone

Personalize a cor do plano de fundo, do glifo e da borda do marcador padrão e ajuste o tamanho dele.

Captura de tela mostrando alguns marcadores personalizados.

Substitua o ícone de marcador padrão por uma imagem SVG ou PNG personalizada.

Captura de tela mostrando marcadores SVG personalizados.

Criar marcadores HTML personalizados

Use HTML e CSS personalizados para criar marcadores interativos visualmente distintos e animações.

Captura de tela mostrando um marcador HTML personalizado.

Como os marcadores podem responder a eventos de clique e de teclado

Para que um marcador responda a eventos de clique e de teclado, adicione um listener de eventos click.

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  marker.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

Definir a altitude e o comportamento em caso de conflito de marcadores

Defina a altitude para que um marcador apareça corretamente com elementos de mapa 3D e especifique como ele vai se comportar quando colidir com outro marcador ou rótulo de mapa. Somente os mapas vetoriais oferecem suporte para altitude do marcador.

Captura de tela mostrando um marcador de altitude ajustado.

Próxima etapa