Começar

Selecione a plataforma: Android iOS JavaScript

Siga estas etapas para configurar os Marcadores Avançados.

Gerar uma chave de API e ativar a API Maps JavaScript

Para usar Marcadores Avançados, você precisa ter um projeto do Cloud com uma conta de faturamento, e a API Maps JavaScript precisa estar ativada. Para saber mais, consulte Configurar seu projeto do Google Cloud.

Gerar uma chave de API

Criar um ID do mapa

Para criar um ID do mapa, siga as etapas em Personalização no Cloud. Defina o tipo de mapa como JavaScript e selecione a opção Vetor ou Raster.

Importante: durante o teste, pule a etapa de criação e configuração de um ID do mapa adicionando mapId: 'DEMO_MAP_ID' ao código do app.

Atualizar o código de inicialização do seu mapa

Para essa ação, você vai precisar do ID do mapa que acabou de criar. Ele está disponível na página Gerenciamento de mapas.

1. Carregue a API Maps JavaScript.

2. Carregue a biblioteca de Marcadores Avançados dentro de uma função async quando necessário:

   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

3. Informe um ID ao instanciar o mapa com a propriedade mapId. Pode ser um ID específico ou DEMO_MAP_ID.

   const map = new
   google.maps.Map(document.getElementById('map'), {
     center: {lat: -34.397, lng: 150.644},
     zoom: 8,
     mapId: 'YOUR_MAP_ID'
   });

Atenção: os exemplos de Marcadores Avançados usam IDs vinculados a um estilo de mapa de PDI simples. Se você reutilizar o exemplo de código, substitua esses IDs por DEMO_MAP_ID ou pelo seu próprio ID do mapa.

Verificar os recursos do mapa (opcional)

Os Marcadores Avançados precisam de um ID do mapa. Se essa informação não for adicionada, os marcadores não serão carregados. Para resolver o problema, você pode adicionar um listener mapcapabilities_changed para receber avisos sobre mudanças nos recursos do mapa. Usar recursos do mapa é opcional e recomendado somente para testes e soluções de problemas ou para fallback de tempo de execução.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

Próximas etapas

Criar um Marcador Avançado padrão