Personalizar mapas 3D

É possível personalizar a aparência do mapa de base 3D usando a estilização de mapas baseada na nuvem.

Com a estilização de mapas baseada na nuvem, você controla a aparência do mapa apresentado aos usuários. Ao controlar recursos como a densidade de pontos de interesse (PDIs), a remoção de determinadas categorias de PDIs e a modificação do preenchimento ou do traço de recursos, você pode criar uma experiência de mapa personalizada para seus usuários.

A Estilização de mapas baseada na nuvem oferece uma experiência de edição sem código no console do Google Cloud. As edições feitas no seu estilo no console do Maps aparecem automaticamente no aplicativo.

O exemplo a seguir mostra um mapa que usa um estilo personalizado para mudar a cor dos ícones e do texto de recursos de recreação para laranja:

async function initMap() {
    const { Map3DElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.75183154601466, lng: -119.52369070507672, altitude: 2200 },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f',
        mode: 'HYBRID',
        gestureHandling: "COOPERATIVE"
    });
    document.body.append(map);
}
initMap();
index.js

Visão geral

O processo para personalizar mapas 3D usando a Estilização de mapas baseada na nuvem é o mesmo dos mapas 2D:

1 Criar um ID do mapa Crie um ID do mapa. Os IDs de mapa são transmitidos ao aplicativo para processar o estilo. Você vai associar um estilo personalizado a esse ID de mapa nas etapas seguintes.
2 Criar uma Estilização de mapas baseada na nuvem Selecione "Híbrido 3D" e use o "modo claro" nesta etapa.
3 Associar seu estilo de mapa a um mapa Vincule seu estilo ao ID do mapa que você criou na etapa 1.
4 Adicionar o ID do mapa ao seu aplicativo Especifique o ID do mapa no código usando o parâmetro map-id.
5 Publicar o ID do mapa As mudanças no seu estilo personalizado são incorporadas automaticamente ao aplicativo após a publicação.

Para saber mais sobre como criar estilos de mapa, consulte Criar e usar estilos de mapa.

Limitações

Há algumas limitações a serem observadas ao usar a estilização de mapas baseada na nuvem com mapas 3D no JavaScript do Maps:

  • O Modo Escuro não é compatível.
  • Recursos ativados por ID do mapa, como o estilo baseado em dados, não são compatíveis.