Questa pagina è stata tradotta dall'API Cloud Translation.

Personalizzazione delle mappe basata su cloud

Google Maps Platform offre funzionalità di stile delle mappe basate su cloud che semplificano lo stile, la personalizzazione e la gestione delle mappe utilizzando Google Cloud Console, consentendoti di creare per gli utenti un'esperienza di mappatura personalizzata senza dover aggiornare il codice delle app ogni volta che modifichi lo stile.

Gli stili creati prima del 15 settembre 2020 non mostreranno le funzionalità naturali avanzate di Google Maps. Per utilizzare il supporto delle funzionalità naturali avanzate di Google Maps per lo stile della mappa, devi creare uno stile per la mappa.

La personalizzazione delle mappe basata su cloud ti consente di creare e modificare gli stili delle mappe per qualsiasi app che utilizza Google Maps, senza richiedere modifiche al codice una volta inserito l'ID mappa. Tutte le modifiche allo stile possono essere apportate in Cloud Console, senza bisogno di competenze in termini di programmazione. Modifica l'aspetto e il colore di molti elementi della mappa, ad esempio strade, edifici, corsi d'acqua, punti di interesse e percorsi dei trasporti pubblici.

Tali funzionalità includono:

Personalizzazione delle mappe basata su cloud: invece di personalizzare la mappa nel codice utilizzando JSON, gestisci e definisci gli stili delle mappe dinamiche o statiche in Cloud Console utilizzando gli ID mappa e gli stili delle mappe.
Mappa vettoriale: gli sviluppatori JavaScript possono scegliere di utilizzare la stessa mappa basata su vettori con accelerazione WebGL disponibile su maps.google.com direttamente nelle proprie app web.
Filtri dei PDI aziendali: è possibile rimuovere 5 categorie di punti d'interesse aziendali dalla visualizzazione della mappa.
Controllo della densità dei PDI: la densità dei punti di interesse mostrati sulla mappa di base può essere regolata in modo da mostrare per impostazione predefinita più o meno punti di interesse.

Anche se lo stile delle mappe basato su cloud è disponibile su Maps SDK for Android¹, Maps SDK for iOS, JavaScript e Maps Static API, non tutte le funzionalità saranno visibili su tutte le piattaforme.

Prima di iniziare

Crea un ID mappa
Per utilizzare gli stili di mappe basati su cloud, la tua mappa deve essere caricata utilizzando un ID mappa.
Esegui la migrazione dagli stili hardcoded
Prima di aggiungere un ID mappa per utilizzare gli stili delle mappe basati su cloud su una mappa esistente personalizzata con stili hardcoded, ad esempio parametri di ricerca JSON o URL, ti consigliamo di rimuovere gli stili hardcoded per evitare conflitti con funzionalità future. Puoi importare lo stile JSON in un nuovo stile di mappa.
- Su Android, aggiorna MapStyleOptions
- Su iOS, aggiorna il corso GMSMapStyle
- Su JavaScript, rimuovi lo stile MapTypeStyle
- In Maps Static, rimuovi il parametro style

* Aggiorna l'SDK di Maps per Android
Per utilizzare gli stili di mappe basati su cloud, devi utilizzare 18.0.0 o versioni successive dell'SDK Maps per Android e utilizzare il renderer di Maps più recente per Android.

Fatturazione

Per utilizzare gli stili di mappe basati su cloud è necessario un ID mappa. In Maps SDK per Android, Maps SDK per iOS e JavaScript, l'utilizzo di un ID mappa comporta un addebito per lo SKU di Dynamic Maps. Per l'API Maps Static, l'utilizzo di un ID mappa comporta un addebito per lo SKU Static Maps.

Esempi

Android

Eseguire l'app ApiDemos di esempio

Per eseguire l'app ApiDemos, vedere l'esempio GitHub (Java | Kotlin) e visualizzare la demo CloudBasedMapStylingDemoActivity (Java | Kotlin).

Puoi trovare un'applicazione di esempio Java e Kotlin che mostra come applicare uno stile alla mappa Android dal cloud.

Problemi noti

Una volta che la tua app viene pubblicata per i clienti, gli stili personalizzati per le mappe con ID mappa possono essere aggiornati da Google Cloud Console. I nuovi stili verranno visualizzati nell'app tra qualche ora.

Per assicurarti che i nuovi stili personalizzati vengano visualizzati immediatamente a scopo di test, cancella i dati dell'app dal dispositivo di test. Per maggiori informazioni sulla cancellazione dei dati dal tuo dispositivo, consulta la Guida di Android - Libera spazio.

Tieni presente che le impostazioni possono variare in base al telefono. Per saperne di più, contatta il produttore del dispositivo.

iOS

Eseguire l'app ApiDemos di esempio

Per eseguire l'app di esempio ApiDemos, vedere l'esempio di GitHub app di esempio GoogleMap e visualizzare il progetto CloudBasedMapStylingViewController (esempio di GitHub per Swift | Objective-C).

Demo facoltativa di Cloud Styling CocoaPod o GitHub

Invece di partire da zero, puoi provare la nostra applicazione di esempio Objective-C, che mostra come applicare uno stile alla mappa per iOS dal cloud qui.

Creazione dell'app demo beta

In Xcode, premi il pulsante di compilazione per creare lo schema corrente, quindi eseguilo. La build genera un errore, che ti chiede di inserire la chiave API nel file SDKDemoAPIKey.h.

Se non hai ancora una chiave API, segui queste istruzioni per configurare un progetto su Cloud Console e ottenere una chiave API. Quando configuri la chiave nella console Cloud, puoi specificare l'identificatore bundle dell'app per assicurarti che solo l'app possa utilizzarla. L'identificatore predefinito del bundle dell'app SDK di esempio è com.example.GoogleMapsDemos.

Modifica il file SDKDemoAPIKey.h e incolla la chiave API nella definizione della costante kAPIKey:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

Se Xcode ti chiede di sbloccare il file SDKDemoAPIKey.h per la modifica, scegli Sblocca.

Rimuovi la seguente riga:

```
#error Register for API Key and insert here.
```

Crea ed esegui il progetto.

Demo di mappa di stile per le mappe basata su cloud

La demo di CloudStyling mostra come applicare uno stile alla mappa utilizzando uno stile impostato in Google Cloud Console.

Quando viene avviata l'applicazione demo, fai clic sulla demo Personalizzazione della mappa nella sezione Campioni beta all'inizio dell'elenco.

Fai clic su Stile mappa per vedere l'effetto del caricamento di ID mappa diversi.

Puoi provare ad aggiungere anche uno stile ("Mappa stile" > "Aggiungi un nuovo ID mappa") e visualizzare l'aggiornamento della mappa con la tua mappa personalizzata.

JavaScript

Questo è un esempio di base per il caricamento di una mappa con stile personalizzato utilizzando un ID mappa. In questo caso, il codice JavaScript di Maps fa riferimento all'ID mappa 8e0a97af9386fef quando la mappa viene caricata e applica automaticamente lo stile mappa attualmente associato a tale ID mappa.

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;index.js

Visualizza esempio

Prova di esempio

JSFiddle.net CodeSandbox.io Google Cloud Shell

API Maps Static

Un ID mappa è un identificatore associato a uno stile o a una mappa specifici. Configura uno stile di mappa e associalo a un ID mappa in Google Cloud Console. In seguito, quando fai riferimento a un ID mappa nel tuo codice, lo stile mappa associato viene visualizzato nella tua app. Gli aggiornamenti di stile successivi apportati vengono visualizzati automaticamente nell'app, senza che siano necessari aggiornamenti da parte dei tuoi clienti.

Se utilizzi gli stili di mappe basati su cloud con una mappa esistente personalizzata con il parametro style, assicurati di rimuoverli per evitare potenziali conflitti con le funzionalità future.

Per aggiungere un ID mappa a una mappa nuova o esistente che utilizza una delle nostre API web, aggiungi il parametro URL map_id e impostalo sull'ID mappa. Questo esempio mostra l'aggiunta di un ID mappa a una mappa utilizzando l'API Maps Static.

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />

La personalizzazione delle mappe basata su cloud non è disponibile in modalità Lite di Android. ↩