Visão geral

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Com os Marcadores Avançados, você cria e personaliza marcadores de alta performance e inclui a nova funcionalidade. Também é possível personalizar o plano de fundo, a borda e a cor do glifo do marcador padrão, ajustar o tamanho dele e substituir 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 personalizados. Para aplicativos 3D, você pode controlar a altitude em que um marcador aparece. Os Marcadores Avançados podem ser usados em mapas vetoriais e de raster (um ID do mapa é necessário).

Comece a usar Marcadores Avançados

Personalizar cor, escala e imagem do ícone

Personalize o plano de fundo, o glifo e a cor 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 markerView = new google.maps.marker.AdvancedMarkerView({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

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

Definir a altitude e o comportamento de conflito do marcador

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