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 tue mappe utilizzando Google Cloud Console. In questo modo, puoi creare un'esperienza di mappatura personalizzata per gli utenti senza dover aggiornare il codice delle app ogni volta che apporti una modifica di stile.

Gli stili creati prima del 15 settembre 2020 non mostrano 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 mappa.

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

Tali funzionalità includono:

• Stile mappa basato su cloud: anziché modificare lo stile della mappa nel codice utilizzando JSON, gestisci e definisci uno stile per le mappe dinamiche o statiche in Cloud Console utilizzando gli ID mappa e gli stili mappa.
• Mappa Vettoriale: gli sviluppatori JavaScript possono scegliere di utilizzare la stessa mappa basata su vettori WebGL accelerata disponibile su maps.google.com direttamente nelle loro app web.
• Filtro per PDI aziendali: se vuoi, puoi rimuovere dalla visualizzazione della mappa cinque categorie di punti di interesse.
• Controllo della densità dei PDI: la densità dei punti d'interesse mostrati sulla mappa base può essere regolata in modo da mostrare per impostazione predefinita maggiori o meno punti d'interesse.

Anche se lo stile delle mappe basato su cloud è disponibile su Maps SDK for Android¹, Maps SDK per iOS, JavaScript e API Maps Static, 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 mappa deve essere caricata utilizzando un ID mappa.
• Esegui la migrazione dallo stile hardcoded
  Prima di aggiungere un ID mappa per utilizzare gli stili delle mappe basati su cloud su una mappa esistente personalizzata con stile hardcoded, ad esempio parametri di ricerca JSON o URL, ti consigliamo di rimuovere lo stile hardcoded per evitare potenziali 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 di MapTypeStyle
  • In Maps Static, rimuovi il parametro style

Fatturazione

L'utilizzo dello stile Maps basato su cloud richiede un ID mappa. Su Maps SDK for Android, Maps SDK for iOS e JavaScript, l'utilizzo di un ID mappa comporta un addebito rispetto allo SKU di Dynamic Maps. Per l'API Static Maps, l'utilizzo di un ID mappa comporta un addebito rispetto allo SKU Static Maps.

Esempi

Android

Esegui l'app ApiDemos di esempio

Per eseguire l'app di esempio ApiDemos, guarda l'esempio di GitHub (Java | Kotlin) e visualizza la demo CloudBasedMapStylingDemoActivity (Java | Kotlin).

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

Problemi noti

Una volta che l'app è stata pubblicata per i clienti, gli stili personalizzati per le mappe con ID mappa possono essere aggiornati da Google Cloud Console. I nuovi stili verranno applicati nella tua 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 dispositivo, consulta la Guida di Android - Libera spazio.

Tieni presente che le impostazioni possono variare in base al telefono. Per maggiori informazioni, contatta il produttore del dispositivo.

iOS

Esegui l'app ApiDemos di esempio

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

Demo facoltativa 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 iOS dal cloud qui.

Creazione dell'app demo beta

In Xcode, premi il pulsante di compilazione per creare ed eseguire l'attuale schema. La build genera un errore che chiede di inserire la chiave API nel file SDKDemoAPIKey.h.

Se non hai ancora una chiave API, segui queste istruzioni per configurare un progetto in Cloud Console e ottenere una chiave API. Quando configuri la chiave in Cloud Console, puoi specificare l'identificatore bundle dell'app per assicurarti che solo l'app possa utilizzarla. L'identificatore predefinito del bundle dell'app degli esempi di SDK è 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 richiede lo sblocco del 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 stile della mappa basata su cloud

La demo 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 Beta Esempi nella parte superiore dell'elenco.

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

Puoi anche provare ad aggiungere il tuo stile ("Mappa stile" > "Aggiungi un nuovo ID mappa") per vedere l'aggiornamento della mappa con la tua mappa personalizzata.

JavaScript

Questo è un esempio di base per il caricamento di una mappa con uno stile personalizzato utilizzando un ID mappa. In questo caso, 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.

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

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

API Maps Static

Un ID mappa è un identificatore associato a uno stile o a una mappa specifici. Configura uno stile mappa e associalo a un ID mappa in Google Cloud Console. Dopodiché, quando fai riferimento a un ID mappa nel tuo codice, nell'app viene visualizzato lo stile mappa associato. Eventuali aggiornamenti di stile successivi visualizzati automaticamente nell'app, senza necessità di aggiornamenti da parte dei clienti.

1. Se utilizzi la personalizzazione delle mappe basata su cloud con una mappa esistente personalizzata con il parametro style, assicurati di rimuoverla per evitare potenziali conflitti con funzionalità future.

2. Per aggiungere un ID mappa a una mappa nuova o esistente che utilizzi 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" />