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: mapId: 'DEMO_MAP_ID'. Você poderá usar "DEMO_MAP_ID" se 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: