Per iniziare

Seleziona la piattaforma: Android iOS JavaScript

Per utilizzare gli stili basati sui dati per i confini, devi creare un ID mappa che utilizzi la mappa vettoriale JavaScript. Dopodiché, devi creare un nuovo stile di mappa, selezionare i livelli delle funzionalità dei confini e associare lo stile all'ID mappa.

Creare un ID mappa

Per creare un nuovo ID mappa, segui i passaggi descritti in Personalizzazione basata su cloud. Imposta Tipo di mappa su JavaScript e seleziona l'opzione Vettoriale. Seleziona Inclinazione e Rotazione per attivare l'inclinazione e la rotazione sulla mappa. Se l'utilizzo dell'inclinazione o dell'orientamento influisce negativamente sulla tua app, lascia deselezionate le opzioni Inclinazione e Rotazione in modo che gli utenti non possano modificarle.

Crea ID mappa vettoriale

Creare un nuovo stile di mappa

Per creare un nuovo stile di mappa, segui le istruzioni riportate in Gestire gli stili di mappa per creare lo stile e associarlo all'ID mappa appena creato.

Selezionare i livelli delle funzionalità

Nella console API di Google puoi selezionare i livelli delle funzionalità da visualizzare. In questo modo, determini i tipi di confini che verranno visualizzati sulla mappa (ad esempio località, stati e così via).

Per gestire i livelli delle funzionalità

  1. Nella console API di Google, vai alla pagina Stili di mappa.
  2. Se richiesto, seleziona un progetto.
  3. Seleziona uno stile di mappa.
  4. Fai clic sul menu a discesa Livelli delle funzionalità per aggiungere o rimuovere livelli.
  5. Fai clic su Salva per salvare le modifiche e renderle disponibili per le tue mappe.

Uno screenshot che mostra il menu a discesa.

Aggiornare il codice di inizializzazione della mappa

È necessario l'ID mappa appena creato. Puoi trovarlo nella pagina Maps Management.

  1. Carica l'API Maps JavaScript aggiungendo il caricatore bootstrap in linea al codice dell'applicazione, come mostrato nello snippet seguente:
<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

  1. Fornisci un ID mappa quando crei un'istanza della mappa utilizzando la proprietà mapId. Questo deve essere l'ID mappa che hai configurato utilizzando uno stile di mappa con i livelli delle funzionalità abilitati.

    map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
});

Scopri di più sul caricamento dell'API Maps JavaScript.

Aggiungere livelli delle funzionalità a una mappa

Per ottenere un riferimento a un livello degli elementi sulla mappa, chiama map.getFeatureLayer() quando la mappa viene inizializzata:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

Controllare le funzionalità della mappa

Gli stili basati sui dati per i confini richiedono funzionalità abilitate nella console API di Google e associate a un ID mappa. Poiché gli ID mappa sono effimeri e soggetti a modifiche, puoi chiamare map.getMapCapabilities() per verificare se una determinata funzionalità (ad esempio la personalizzazione basata sui dati) è disponibile prima di chiamarla. Questo controllo è facoltativo.

L'esempio seguente mostra come aggiungere un listener per abbonarsi alle modifiche delle funzionalità della mappa:

// subscribe to changes
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isDataDrivenStylingAvailable) {
    // Data-driven styling is *not* available, add a fallback.
    // Existing feature layers are also unavailable.
  }
});

Passaggi successivi