Esempi precedenti

Android

Esegui l'app di esempio ApiDemos

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

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

Problemi noti

Una volta che l'app è stata pubblicata per i clienti, puoi aggiornare gli stili personalizzati per le mappe con ID mappa 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 ulteriori informazioni sulla cancellazione dei dati dal dispositivo, consulta la Guida di Android - Libera spazio.

Tieni presente che le impostazioni possono variare in base allo smartphone. 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 Google Maps di esempio GitHub e visualizza il progetto CloudBasedMapStylingViewController (esempio di GitHub per Swift | Obiettivo-C).

Definizione facoltativa di uno stile Cloud su CocoaPod o demo GitHub

Invece di iniziare da zero, puoi provare la nostra applicazione di esempio Objective-C che mostra come applicare uno stile alla mappa per iOS dal cloud. Per maggiori dettagli, consulta l'esempio di obiettivo C.

Crea l'app demo beta

In Xcode, premi il pulsante di compilazione 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, configura un progetto nella console Cloud e recupera una chiave API seguendo le istruzioni riportate nell'articolo Ottenere una chiave API. Quando configuri la chiave nella console Cloud, puoi specificare l'identificatore del bundle dell'app per assicurarti che solo l'app possa utilizzare la chiave. L'identificatore pacchetto predefinito dell'app di esempio 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.
```

Crea ed esegui il progetto.

Demo della mappa degli stili Cloud

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

Quando viene avviata l'applicazione demo, fai clic sulla demo Personalizzazione della 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 ("Mappa dello stile" > "Aggiungi un nuovo ID mappa") e vedere la mappa aggiornata con la mappa con uno stile personalizzato.

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 associato all'ID mappa in questione.

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 Sample

API Maps Static

Un ID mappa è un identificatore associato a uno stile di mappa o a un elemento specifico. Configura uno stile di mappa e associalo a un ID mappa nella console Google Cloud. Quando fai riferimento a un ID mappa nel codice, nell'app viene visualizzato lo stile di mappa associato. Tutti gli aggiornamenti di stile successivi vengono visualizzati automaticamente nell'app, senza che i clienti debbano apportare aggiornamenti.

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