Personalizar mapas 3D

Você pode personalizar a aparência do mapa 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 os 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. Cada estilo personalizado criado é associado a um ID do mapa. As edições feitas no estilo no console de mapas 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 do recurso de recreação para laranja:

async function init() {
    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', // Styles are associated with map IDs.
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

Visão geral

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

1 Crie um ID de mapa Crie um ID do mapa. Os IDs de mapa são transmitidos ao aplicativo para processar a estilização. Você vai associar um estilo personalizado a esse ID do mapa nas etapas seguintes.
2 Criar uma Estilização de mapas baseada na nuvem Você precisa selecionar "Híbrido 3D" e usar o "modo claro" nesta etapa.
3 Associe seu estilo de mapa a um mapa Vincule seu estilo ao ID do mapa criado na etapa um
4 Adicionar o ID do mapa ao seu aplicativo Especifique o ID do mapa no código usando o parâmetro map-id.
5 Publique o ID do mapa As mudanças no 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 que você precisa conhecer ao usar a Estilização de mapas baseada na nuvem com mapas 3D na API Maps JavaScript:

  • 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.