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. Cada estilo personalizado criado é associado a um ID de mapa. As edições feitas no 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 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',
    });

    document.body.append(map);
}

void init();

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.

Atualizar o ID do mapa dinamicamente

É possível atualizar a propriedade mapId de forma dinâmica depois que o mapa é instanciado. Isso permite aplicar um estilo de mapa diferente baseado na nuvem sem precisar recriar toda a instância Map3DElement.

Para atualizar o ID do mapa, defina a propriedade mapId na instância Map3DElement:

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

Como a propriedade mapId reflete o atributo HTML, também é possível atualizá-la dinamicamente modificando o atributo:

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

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.