Introdução

Siga estas etapas para configurar visualização dos Marcadores Avançados.

Gerar uma chave de API e ativar a API Maps JavaScript

Para usar a visualização dos Marcadores Avançados, você precisa ter um projeto do Cloud com uma conta de faturamento e a API Maps JavaScript tem que 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 de mapa, siga as etapas em Personalização na nuvem. Defina o tipo de mapa como JavaScript e selecione a opção Vetor ou Raster.

Criar ID do mapa vetorial

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. Use v=beta e libraries=marker na tag script da API. Exemplo:

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

  2. Informe um ID ao instanciar o mapa com a propriedade mapId. Pode ser um código 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'
});

Verificar os recursos do mapa (opcional)

Os Marcadores Avançados precisam de um ID de mapa. Se essa informação não for adicionada ou for inválida, os marcadores avançados não serão carregados. Como solução de problemas, você pode adicionar um listener mapcapabilities_changed para receber avisos sobre mudanças nos recursos do mapa. Eles vão indicar se as condições abaixo foram atendidas:

  • Um ID do mapa válido está sendo usado.
  • O ID do mapa vai ser associado a um mapa vetorial se forem utilizados recursos que precisam desse tipo de 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