Introdução

Para usar o pré-lançamento de estilo com base em dados, crie um ID que use o mapa vetorial para JavaScript. Em seguida, crie um novo estilo de mapa, selecione as camadas de elementos de limite desejadas e associe o estilo ao ID do mapa.

Se quiser usar a API Region Lookup, ative no Console de APIs do Google.

Ativar a API Region Lookup

Criar um ID do mapa

Para criar um ID do mapa, siga as etapas em personalização na nuvem. Defina o tipo de mapa como JavaScript e selecione a opção Vetor. Marque Inclinar e/ou Girar para ativar essas ações no mapa. Se o uso de inclinação ou direção afetar negativamente seu app, deixe as opções Inclinar e Girar desmarcadas para que não possam ser ajustadas pelos usuários.

Criar ID de mapa vetorial

Criar um estilo de mapa

Para criar um estilo de mapa, siga as instruções em Gerenciar estilos de mapa. Crie um estilo e associe ao ID do mapa que acabou de criar.

Selecionar camadas de elementos

No Console de APIs do Google, selecione as camadas de elementos a serem mostradas. Isso determina os tipos de limite que vão aparecer no mapa (por exemplo, regiões administrativas, estados etc.).

Gerenciar camadas de elementos

No Console de APIs do Google, acesse a página Estilos de mapa.
Selecione um projeto, se solicitado.
Selecione um estilo de mapa.
Clique no menu suspenso Camadas de elementos para adicionar ou remover camadas.
Clique em Salvar e depois disponibilize as mudanças nos mapas.

Captura de tela mostrando a lista suspensa.

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.

Use v=beta na tag script da API. Por exemplo:

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

(Opcional) Inclua o parâmetro region para definir a região do mapa. Isso modifica o aplicativo para apresentar diferentes blocos de mapas com base na região e altera os polígonos de determinados elementos de limites. Saiba mais sobre a localização de regiões.
```
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&region=JP&libraries=places&v=beta&callback=initMap"></script>
```

Informe um ID ao instanciar o mapa com a propriedade mapId: Esse ID tem que ser o mesmo que você configurou usando um estilo de mapa com camadas de elementos ativadas.

map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
});

Adicionar camadas de elementos a um mapa

Chame map.getFeatureLayer() na inicialização do mapa para consultar a referência a uma camada de elementos dele:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

Verificar recursos do mapa

O estilo com base em dados exige recursos que são ativados no Console de APIs do Google e associados a um ID do mapa. Como os IDs de mapa são temporários e estão sujeitos a mudanças, chame map.getMapCapabilities() antes do recurso (por exemplo, estilo orientado por dados) para verificar se ele está disponível. Essa verificação é opcional.

O exemplo a seguir mostra como adicionar um listener para receber avisos sobre mudanças nos recursos do mapa:

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

  if (mapCapabilities.isDataDrivenStylingAvailable) {
    // Call data-driven styling here.
  } // When !mapCapabilities.isDataDrivenStylingAvailable, any existing featureLayers are also unavailable.
});