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 (confira as etapas abaixo).
  2. Mude google.maps.Marker para google.maps.marker.AdvancedMarkerElement. Se a instrução de importação declarar AdvancedMarker, omita o caminho qualificado.
  3. Adicione um ID do mapa ao seu código de inicialização do mapa. Por exemplo, 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 a página da Web usa a importação dinâmica de biblioteca, 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 legada 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

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

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

const map = new 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 AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

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: