Com os recursos com tecnologia WebGL para a API Maps JavaScript, você controla a inclinação e a rotação, adiciona objetos 3D ao mapa e muito mais. Os recursos a seguir estão incluídos:
- Com a Visualização de sobreposição do WebGL, é possível adicionar gráficos 2D e 3D personalizados e conteúdo animado aos mapas.
- Agora você consegue ajustar a inclinação e a direção de forma programática usando o mouse e o teclado.
- Com o recurso map.moveCamera(), você muda simultaneamente várias propriedades da câmera.
- O zoom agora é compatível com valores fracionários.
Começar
Para usar os novos recursos do WebGL, você precisa de um ID do mapa que use o mapa vetorial. Também será necessário atualizar a solicitação de bootstrap da API. Veja nesta seção como fazer isso.
Criar um novo ID do mapa
Para criar um novo ID do mapa, siga as etapas em Usar a estilização de mapas baseada na nuvem: obter um ID do mapa. Defina o tipo de mapa como JavaScript e selecione a opção Vetor. Marque Inclinação e/ou Rotação para ativar essas opções no mapa. Com isso, você ajusta de forma programática esses valores, e os usuários ajustam a inclinação e a direção no mapa. Se o uso de inclinação ou direção afetar negativamente seu app, deixe as opções Inclinação e Rotação desmarcadas para que não possam ser ajustadas pelos usuários.
Atualizar o código de inicialização do seu mapa
Isso exige o ID do mapa que você acabou de criar. Ele pode ser encontrado na página Gerenciamento de mapas. Informe um ID ao instanciar o mapa usando a propriedade mapId, conforme mostrado aqui:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});
Exemplos
Veja alguns exemplos para mostrar esses recursos: