Personalizzazione delle mappe basata su cloud

Google Maps Platform offre funzionalità per la personalizzazione delle mappe basate su cloud che semplificano la creazione, la personalizzazione e la gestione delle mappe mediante la console Google Cloud. In questo modo puoi creare un'esperienza personalizzata per gli utenti delle mappe senza dover aggiornare il codice delle app ogni volta che apporti una modifica di stile.

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

La personalizzazione delle mappe basata su cloud ti consente di creare e modificare gli stili di mappa per tutte le tue app che utilizzano Google Maps, senza richiedere alcuna modifica al codice una volta impostato l'ID mappa. Tutte le modifiche allo stile possono essere apportate nella console Cloud, senza bisogno di competenze di programmazione. Consente di modificare l'aspetto e il colore di molti elementi della mappa, ad esempio strade, edifici, specchi d'acqua, punti d'interesse e percorsi dei trasporti pubblici.

Tali funzionalità includono:

• Stili delle mappe basati su cloud: anziché applicare uno stile alla mappa nel codice utilizzando JSON, gestisci e definisci lo stile delle tue 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 vettoriale con accelerazione WebGL disponibile su Maps.google.com direttamente nelle proprie app web.
• Filtro dei PDI aziendali: puoi rimuovere facoltativamente dalla visualizzazione della mappa cinque categorie di punti d'interesse aziendali.
• Controllo della densità dei PDI: la densità dei punti d'interesse mostrati sulla mappa base può essere regolata in modo da mostrare più o meno punti d'interesse per impostazione predefinita.

Sebbene la personalizzazione delle mappe basata su cloud sia disponibile su Maps SDK per Android¹, Maps SDK per iOS, JavaScript e l'API Maps Static, non tutte le funzionalità saranno visibili su tutte le piattaforme.

Prima di iniziare

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

Fatturazione

Per utilizzare la personalizzazione delle mappe basata su cloud è necessario un ID mappa. Su Maps SDK for Android, Maps SDK for iOS e JavaScript, l'utilizzo di un ID mappa comporta un addebito per lo SKU di Dynamic Maps. Nell'API Maps Static, l'utilizzo di un ID mappa comporta un addebito per lo SKU Static Maps.

Esempi

Android

Esegui l'app di esempio ApiDemos

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

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

Problemi noti

Una volta che l'app è stata consegnata ai clienti, puoi aggiornare gli stili personalizzati per le mappe con ID mappa dalla console Google Cloud. I nuovi stili saranno visibili 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 ulteriori informazioni sulla cancellazione dei dati dal dispositivo, consulta la pagina Guida di Android - Libera spazio.

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

iOS

Esegui l'app di esempio ApiDemos

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

Demo facoltativa di Cloud Styling CocoaPod o GitHub

Invece di iniziare da zero, puoi provare la nostra applicazione di esempio Objective-C che dimostra come creare una mappa per iOS dal cloud qui.

Creazione dell'app demo beta

In Xcode, premi il pulsante Compila per creare ed eseguire lo schema corrente. La build genera un errore e 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 nella console Cloud e ottenere una chiave API. Quando configuri la chiave in Cloud Console, puoi specificare l'identificatore bundle della tua app per assicurarti che solo la tua app possa utilizzare la chiave. L'identificatore di bundle predefinito dell'app 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 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.
```

Creare ed eseguire il progetto.

Demo delle mappe per la personalizzazione delle mappe basata su cloud

La demo CloudStyling mostra come applicare uno stile alla mappa utilizzando uno stile impostato nella console Google Cloud.

All'avvio dell'applicazione demo, fai clic sulla demo Personalizzazione mappa nella sezione Esempi beta in cima all'elenco.

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

Puoi anche provare ad aggiungere uno stile personalizzato ("Stile mappa" > "Aggiungi un nuovo ID mappa") e vedere l'aggiornamento della mappa con la mappa con stili personalizzati.

JavaScript

Questo è un esempio di base del caricamento di una mappa con stili personalizzati utilizzando un ID mappa. In questo caso, Maps JavaScript fa riferimento all'ID mappa 8e0a97af9386fef quando la mappa viene caricata e applica automaticamente lo stile di mappa attualmente associato a questo 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 un elemento o a uno stile di mappa specifico. Configura uno stile di mappa e associalo a un ID mappa nella console Google Cloud. In seguito, quando fai riferimento a un ID mappa nel tuo codice, lo stile di mappa associato viene visualizzato nella tua app. Tutti gli aggiornamenti di stile successivi che apporti vengono visualizzati automaticamente nell'app, senza che i clienti debbano apportare alcun aggiornamento.

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

2. 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" />