Migrar para os marcadores avançados

O google.maps.Marker (v3.56) foi descontinuado em 21 de fevereiro de 2024. Incentivamos a transição para a nova classe google.maps.marker.AdvancedMarkerElement. Os marcadores avançados fornecem melhorias substanciais em comparação com a classe google.maps.Marker legada.

Saiba mais sobre a descontinuação

Para transformar o marcador legado em um marcador avançado, faça o seguinte:

  1. Adicione código para importar a biblioteca de marcadores. A versão anterior de marcadores (google.maps.Marker) não tem esse requisito.
  2. Mude google.maps.Marker para google.maps.marker.AdvancedMarkerElement
  3. Adicione um ID do mapa ao seu código de inicialização do mapa. Por exemplo, use mapId: 'DEMO_MAP_ID' para fins de teste se você ainda não tiver um ID do mapa.

Adicionar a biblioteca de Marcadores Avançados

O método que você usa para carregar as bibliotecas depende de como sua página da Web carrega a API Maps JavaScript.

  • Se ela usa o carregamento de script dinâmico, adicione a biblioteca de marcadores e importe AdvancedMarkerElement (e opcionalmente PinElement) no momento da execução, conforme mostrado aqui.

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

  • Se a sua página da Web usa a tag herdada de carregamento direto de script, adicione libraries=marker ao script de carregamento, conforme mostrado no snippet a seguir.

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

Saiba mais sobre o carregamento da API Maps JavaScript.

Exemplos

Os seguintes exemplos de código mostram o código para adicionar um marcador legado, seguido pelo código para o mesmo exemplo usando os marcadores avançados:

Antes da migração

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

Depois da migração

  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  const map = new google.maps.Map(document.getElementById("map"),  {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });

    // The advanced marker, positioned at Uluru
    const marker = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: position,
        title: 'Uluru',
    });

Explorar os recursos de Marcadores Avançados

Os Marcadores Avançados podem ser personalizados de maneiras que não eram possíveis antes. Agora você pode ajustar o tamanho (escala) dos marcadores e mudar as cores do plano de fundo, da borda e do glifo. Imagens gráficas personalizadas são mais simples de trabalhar, e agora é possível criar marcadores personalizados usando HTML e CSS. Saiba mais sobre tudo o que você pode fazer com os marcadores avançados: