Utilizza gli ID mappa

Un ID mappa è un identificatore univoco utilizzato per rappresentare una singola istanza di una mappa Google. Utilizzi gli ID mappa per attivare funzionalità o gestire o stilizzare le mappe sui tuoi siti web e nelle tue applicazioni. Puoi creare ID mappa per ogni piattaforma di cui hai bisogno (JavaScript, Android, iOS o mappe statiche) nel progetto della console Google Cloud nella pagina Gestione mappa.

Cosa puoi fare con gli ID mappa

Utilizza gli ID mappa per attivare funzionalità e stili. Ecco alcuni esempi di come utilizzare gli ID mappa. Per un elenco completo, consulta la sezione Funzionalità che utilizzano gli ID mappa:

  • Stili delle mappe basati su cloud: associa un ID mappa a uno stile per personalizzare, gestire e applicare stili alle mappe utilizzando la console Google Cloud. Disponibile su tutte le piattaforme: JavaScript, Android, iOS, e API Maps Static.

  • Mappe vettoriali: utilizza un ID mappa per utilizzare una mappa composta da riquadri basati su vettori che vengono disegnati al momento del caricamento lato client utilizzando WebGL. Disponibile su JavaScript.

  • Indicatori avanzati: utilizza un ID mappa per attivare gli indicatori avanzati. Disponibile su JavaScript, Android e iOS.

Esempio di personalizzazione delle mappe basata su cloud

Per utilizzare la personalizzazione delle mappe basata su cloud per applicare stili alle mappe sul tuo sito web e nelle app per Android:

  1. Crea ID mappa per ogni piattaforma che utilizzi. Ad esempio, crea un ID mappa JavaScript e un ID mappa Android. Per maggiori dettagli, consulta Creare ID mappa.

  2. Configura uno stile di mappa nella console Google Cloud. Per maggiori dettagli, consulta la sezione sulla personalizzazione delle mappe basata su cloud.

  3. Associa entrambi gli ID mappa allo stile di mappa nella console Google Cloud. Per maggiori dettagli, vedi Associare gli ID mappa allo stile.

  4. Fai riferimento all'ID mappa nel codice JavaScript del tuo sito web e nel codice dell'app per Android. Per maggiori dettagli, vedi Aggiungere un ID mappa all'app.

Lo stile della mappa associato ai tuoi ID mappa viene visualizzato sul tuo sito web e nella tua app per Android. Puoi aggiornare lo stile della mappa nella console Cloud e le modifiche vengono visualizzate automaticamente in entrambi i luoghi, senza che i clienti debbano aggiornare l'app.

Elementi che utilizzano gli ID mappa

La tabella seguente mostra le funzionalità e le API di Google Maps Platform che utilizzano gli ID mappa:

Funzionalità o API Utilizza gli ID mappa per raggiungere questi obiettivi
Indicatori avanzati Attiva gli indicatori avanzati. Non è necessario creare un ID mappa, ma puoi utilizzare l'ID mappa di esempio "DEMO_MAP_ID".
Stili basati sui dati per i confini Associa l'ID mappa a un insieme di confini e stili per dare uno stile alla mappa in base ai confini.
Stili basati sui dati per i set di dati Associa l'ID mappa a un insieme di dati e stili per applicare uno stile alla mappa in base al set di dati.
Flutter Personalizza le mappe di Google utilizzate nelle tue app Flutter.
API Maps Embed Specifica e personalizza la mappa da incorporare in una pagina web.
API Maps JavaScript Personalizza la mappa da visualizzare in una pagina web.
SDK Maps for Android Applica uno stile alla mappa da visualizzare in un'applicazione Android.1
SDK Maps for iOS Applica uno stile alla mappa da visualizzare in un'applicazione per iOS.1
API Maps Static Specifica e personalizza la mappa da visualizzare come immagine statica.
Soluzioni di mobilità Utilizza l'API Maps JavaScript e gli SDK per Android e iOS per applicare uno stile alle mappe nelle soluzioni di mobilità.1
WebGL (mappe vettoriali) Attiva le funzionalità WebGL utilizzando un ID mappa vettoriale JavaScript.

1 L'utilizzo di un ID mappa in Maps SDK for Android o in Maps SDK for iOS attiva un caricamento mappa che viene addebitato in base allo SKU di Dynamic Maps.

Come creare e utilizzare gli ID mappa

Un ID mappa è un identificatore univoco che rappresenta una singola istanza di una mappa Google. Puoi creare ID mappa e aggiornare lo stile mappa associato a un ID mappa in Cloud Console.

Autorizzazioni obbligatorie

Per creare o gestire gli ID mappa nel tuo progetto, devi utilizzare un'entità con le autorizzazioni a livello di ruolo appropriate, Editor o Proprietario, nella pagina IAM di Cloud Console per il progetto. Per maggiori dettagli, consulta la documentazione di riferimento sui ruoli di base e predefiniti IAM.

Creare ID mappa

Puoi creare ID mappa e aggiornare uno stile associato a un ID mappa in qualsiasi momento nella console Cloud.

Per creare un ID mappa:

  1. Accedi e apri un progetto Cloud Console con le autorizzazioni richieste.

  2. In Cloud Console, vai alla pagina Gestione mappe.

  3. Seleziona Crea ID mappa.

    Crea nuovo ID mappa

  4. Nella pagina Crea nuovo ID mappa:

    1. In Nome, assegna un nome all'ID mappa.
    2. (Facoltativo) In Descrizione, descrivi lo scopo dell'ID mappa.
    3. Per Tipo di mappa, seleziona la piattaforma su cui intendi utilizzare l'ID mappa. Se scegli JavaScript, scegli anche un tipo di mappa Raster (predefinito) o Vettore. Per ulteriori informazioni sulle mappe vettoriali, consulta Mappe vettoriali.
    4. Seleziona Salva per visualizzare il nuovo ID mappa.

Associare un ID mappa a uno stile di mappa

Queste istruzioni presuppongono che nel progetto sia già presente almeno uno stile mappa. Se non hai stili mappa, consulta la sezione Personalizzazione delle mappe basata su cloud e seleziona la tua piattaforma per istruzioni su come crearne uno.

  1. In Cloud Console, vai alla pagina Gestione mappe.
  2. Nella tabella, seleziona un ID mappa esistente.
  3. In Stile di mappa associato, seleziona uno stile di mappa.

  4. Seleziona Salva.

    Pagina dei dettagli di un ID mappa in cui associare uno stile di mappa

Aggiungi l'ID mappa all'app

Android

Aggiungi l'ID mappa tramite un elemento <fragment> nel file di layout dell'attività, utilizzando la classe MapView o programmaticamente utilizzando la classe GoogleMapOptions.

Ad esempio, supponiamo di aver creato un ID mappa memorizzato come valore di stringa denominato map_id in res/values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>

Per le mappe aggiunte tramite un elemento <fragment> nel file di layout dell'attività, tutti i frammenti di mappa che devono avere lo stile personalizzato devono specificare l'ID mappa nell'attributo map:mapId:

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
    …
    map:mapId="@string/map_id" />

Puoi anche utilizzare l'attributo map:mapId della classe MapView per specificare un ID mappa:

<com.google.android.gms.maps.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    ....
    map:mapId="@string/map_id" />

Per specificare un ID mappa in modo programmatico, passalo a un'istanza MapFragment utilizzando la classe GoogleMapOptions:

Java

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

Kotlin

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

In Android Studio, crea ed esegui la tua app come faresti normalmente. Gli stili personalizzati configurati nel primo passaggio vengono applicati a tutte le mappe con l'ID mappa specificato.

iOS

Per creare un'istanza di una mappa utilizzando un ID mappa, procedi nel seguente modo:

  1. Crea un GMSMapID con la stringa dell'ID mappa dalla console Cloud.
  2. Crea un GMSMapView specificando l'ID mappa appena creato.

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

Se utilizzi il tuo ID mappa, puoi impostare il tuo ID mappa nella console Cloud per avere un nuovo stile in qualsiasi momento. Lo stile verrà applicato automaticamente alla visualizzazione della mappa per te e per gli utenti entro circa sei ore.

Se vuoi visualizzare immediatamente le modifiche, puoi chiudere e riavviare la tua app uscendo dall'app, forzandone l'uscita dall'elenco delle app utilizzate di recente e riavviandola. La mappa aggiornata sarà visibile.

JavaScript

Per creare una mappa con un ID mappa nel codice dell'applicazione:

  1. Se stai già personalizzando la mappa con codice JSON incorporato, rimuovi la proprietà styles dall'oggetto MapOptions. In caso contrario, salta questo passaggio.

  2. Aggiungi un ID mappa alla mappa utilizzando la proprietà mapId. Ad esempio:

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

Maps Static

Per aggiungere un ID mappa a una mappa nuova o esistente che utilizza una delle nostre API di servizio 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=MAP_ID&signature=YOUR_SIGNATURE" />

Una mappa centrata sul Ponte di Brooklyn a New York, New York, Stati Uniti, con i controlli della mappa nell&#39;angolo in basso a destra. La mappa mostra uno stile personalizzato per strade, acqua e terra.

Se hai una firma digitale nell'URL statico di Maps prima di aggiungere l'ID mappa, dovrai creare e aggiungere una nuova firma digitale dopo aver aggiunto l'ID mappa. Quando generi il nuovo segreto di firma dell'URL, ricordati di rimuovere la firma digitale precedente dall'URL.