Personalizzare le mappe 3D

Puoi personalizzare l'aspetto della mappa base 3D utilizzando la personalizzazione delle mappe basata su cloud.

Con la personalizzazione delle mappe basata su cloud, puoi controllare l'aspetto della mappa che mostri agli utenti. Controllando funzionalità come la densità dei punti d'interesse (PDI), la rimozione di determinate categorie di PDI e la modifica del riempimento o del tratto delle funzionalità, puoi creare un'esperienza di Maps personalizzata per i tuoi utenti.

La personalizzazione delle mappe basata su cloud offre un'esperienza di modifica no-code nella console Google Cloud. Le modifiche apportate allo stile nella console Maps verranno visualizzate automaticamente nell'applicazione.

L'esempio seguente mostra una mappa che utilizza uno stile personalizzato per cambiare il colore del testo e delle icone delle funzionalità ricreative in arancione:

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

Panoramica

La procedura per personalizzare le mappe 3D utilizzando la personalizzazione delle mappe basata su cloud è la stessa delle mappe 2D:

1 Creare un ID mappa Crea un ID mappa. Gli ID mappa vengono passati all'applicazione per gestire lo stile. Nei passaggi successivi assocerai uno stile personalizzato a questo ID mappa.
2 Creare uno stile di mappa basato su cloud In questo passaggio devi selezionare "Ibrido 3D" e utilizzare la "modalità chiara".
3 Associare lo stile di mappa a una mappa Collega lo stile all'ID mappa che hai creato nel passaggio 1.
4 Aggiungere l'ID mappa all'applicazione Specifica l'ID mappa nel codice utilizzando il parametro map-id.
5 Pubblicare l'ID mappa Tieni presente che le modifiche allo stile personalizzato vengono incorporate automaticamente nella tua applicazione dopo la pubblicazione.

Per un'analisi approfondita della creazione di stili di mappa, consulta Creare e utilizzare stili di mappa.

Limitazioni

Esistono alcune limitazioni da tenere presenti quando si utilizza la personalizzazione delle mappe basata su cloud con le mappe 3D in Maps JavaScript:

  • La modalità Buio non è supportata.
  • Le funzionalità abilitate per l'ID mappa, come lo stile basato sui dati, non sono supportate.