Configurare Google Maps per la tua PWA

Per mostrare Google Maps nella tua Progressive Web App (PWA), ti servono un progetto Google Cloud con la fatturazione attivata e una chiave API valida. Senza fatturazione, Google serve una sola richiesta di mappa al giorno.

Ogni servizio Google Maps ha il proprio limite gratuito mensile: 10.000 caricamenti di mappa, 10.000 immagini di mappa statiche e 10.000 ricerche di indirizzo nel listino prezzi globale (70.000 per gli account idonei al listino prezzi indiano). Oltre questi limiti, viene addebitato il tuo account di fatturazione. Il vecchio credito mensile di 200 $ è terminato il 1° marzo 2025, e la prova gratuita di 300 $ di Google Cloud non è un'offerta gratuita di Maps. Consulta i prezzi di Google Maps Platform .

Segui i passaggi qui sotto in quest'ordine.

Per utilizzare la piattaforma Google Maps, è necessario disporre di un account di fatturazione. L'account di fatturazione viene utilizzato per tenere traccia dei costi associati ai tuoi progetti.

1. Vai alla Google Cloud Platform Console .
2. Fai clic sul pulsante del menu di navigazione in alto a sinistra e seleziona "Fatturazione".
3. Imposta l'account di fatturazione.
Se questo è il tuo primo account di fatturazione, nella pagina Fatturazione:
-Fai clic sul pulsante Aggiungi account di fatturazione.
-Segui i passaggi per impostare il tuo primo account di fatturazione.

Se hai già un account di fatturazione, nella pagina di fatturazione:
-Fai clic sul menu a discesa della fatturazione e seleziona Gestisci account di fatturazione. Vedrai un elenco dei tuoi attuali account di fatturazione.
-Seleziona Crea account
-Segui le istruzioni per impostare il tuo prossimo account di fatturazione.

Trovi maggiori informazioni sulla documentazione di Google: https://developers.google.com/maps/gmp-get-started#create-billing-account

Per utilizzare la piattaforma Google Maps, è necessario avere un progetto . Il progetto è la base per la gestione di servizi, credenziali, fatturazione, API e SDK. I costi di utilizzo associati al progetto saranno addebitati all'account di fatturazione collegato al progetto.

Se non hai un account Google, creane uno per continuare il processo.

Per creare un progetto:
1. Vai alla Google Cloud Platform Console .
2. Fai clic sul pulsante del menu in alto a sinistra e seleziona "Home".
3. Fai clic sul menu a tendina del progetto e seleziona "NUOVO PROGETTO".
4. Nella pagina Nuovo progetto, inserisci le informazioni richieste.
- Nome del progetto: accetta il nome predefinito o inserisci un nome personalizzato.
Il nome del progetto può essere cambiato in qualsiasi momento. Per ulteriori informazioni, vedi Identificazione dei progetti.
- ID progetto: Accetta quello predefinito o fai clic su MODIFICA per inserire un ID personalizzato.
L'ID del progetto non può essere modificato dopo la creazione del progetto, quindi scegli un ID che sarà comodo da usare per tutta la durata del progetto.
- Posizione: Se disponi di un'organizzazione a cui desideri collegare il progetto, fai clic su Sfoglia e selezionala, altrimenti scegli "Nessuna organizzazione".
Per ulteriori informazioni, consulta Creazione e gestione di cartelle e relazioni tra organizzazioni, progetti e account di fatturazione.
5. Fai clic su "CREA"

La tua PWA usa tre API Google. Abilitale nel progetto che hai appena creato:

1. Vai alla libreria delle API di Maps
2. Fai clic su "Maps JavaScript API", poi su "Abilita" (mappe interattive)
3. Torna indietro, fai clic su "Maps Static API", poi su "Abilita" (immagini di mappa)
4. Torna indietro, fai clic su "Geocoding API", poi su "Abilita" (l'azione "usa la mia posizione" dei campi indirizzo)
5. Verifica che le tre API siano abilitate.

La tua PWA non usa Places, Directions né Distance Matrix: non devi abilitarle.

Per utilizzare la piattaforma Google Maps, è necessario disporre di una chiave API . La chiave API viene aggiunta a tutte le tue richieste e app. 

1. Vai alla pagina API e servizi > Credenziali .
2. Fai clic su Crea credenziali > Chiave API.
La finestra di dialogo Crea chiave API mostra la chiave API appena creata.
3. Fai clic su "Limita chiave"

4. Rinomina la chiave in "PWA Map Key"
5. In Limitazioni delle applicazioni, seleziona Siti web
6. Aggiungi il tuo dominio due volte, per autorizzare tutti gli indirizzi della tua PWA:
https://miodominio.com/* e https://*.miodominio.com/*
ESEMPIO se usi ancora l'indirizzo GoodBarber: https://*.goodbarber.app/*

Attenzione: se in seguito installi un nome di dominio sulla tua PWA, aggiungilo all'elenco. Mantieni anche l'indirizzo GoodBarber nell'elenco.

7. In Limitazioni delle API, seleziona Limita chiave e spunta Maps JavaScript API, Maps Static API e Geocoding API. Se ne manca una, la funzione corrispondente della tua PWA smette di funzionare.
8. Fai clic su "Salva"

1. Copia la tua chiave API

2. Nel tuo back office, vai al menu Impostazioni > Connessioni esterne
3. Nell'elenco dei fornitori di mappe, seleziona Google Maps
4. Incolla la tua chiave API
5. Facoltativo: incolla un Google Cloud Map ID per personalizzare le tue mappe (vedi sotto)
6. Fai clic su "Salva"

1. Vai al menu Pubblica > PWA > Aggiorna
2. Fai clic su "Aggiorna"

È tutto, la chiave API di Google Maps è ora integrata nella tua PWA.
Chiudi la tua PWA e riaprila perché le modifiche abbiano effetto.

Un Map ID applica alle mappe della tua PWA uno stile salvato nel tuo progetto Google Cloud. Senza Map ID, la tua PWA mantiene la mappa Google standard.

1. Nello stesso progetto Google Cloud della tua chiave API, vai alla pagina Gestione mappe
2. Fai clic su "Crea ID mappa"
3. Dagli un nome, scegli il tipo di mappa JavaScript, poi Raster (mappa piatta) o Vettoriale
4. Fai clic su "Salva" e copia il Map ID

5. Nella pagina Stili di mappa , crea uno stile, personalizzalo e pubblicalo. Poi torna su Gestione mappe, apri il tuo Map ID e, in Stili di mappa, scegli il tuo stile per la modalità chiara. La tua PWA mostra sempre lo stile della modalità chiara, anche su un dispositivo impostato in modalità scura: lo stile della modalità scura non viene usato. Consulta la documentazione di Google per i dettagli.

6. Incolla il Map ID in Impostazioni > Connessioni esterne per personalizzare tutte le mappe della tua app.
7. Per dare uno stile diverso a una sezione Mappe, una sezione Agenda o un widget Mappa, incolla un Map ID nelle impostazioni della mappa del suo design. Lascia il campo vuoto per mantenere il Map ID dell'app.
Attenzione: incolla il Map ID mostrato nella pagina Gestione mappe, non l'ID dello stile mostrato nella pagina Stili di mappa. Con un ID di stile, la mappa mantiene lo stile Google predefinito.
8. Aggiorna le impostazioni della tua PWA.

Sulle mappe che usano un Map ID, i marker vengono mostrati con i marker avanzati di Google. Il Map ID deve provenire dallo stesso progetto Google Cloud della tua chiave API. Usare un Map ID su una mappa web non costa di più: ogni mappa resta un caricamento.

Imposta delle quote sulle tue API: al raggiungimento di una quota, Google smette di rispondere fino al giorno dopo, quindi la tua bolletta non può superarla. Un avviso di budget invia solo un'e-mail, non ferma l'utilizzo.
https://developers.google.com/maps/faq#usage_cap

Se le tue mappe ancora non vengono visualizzate sulla tua PWA dopo aver seguito l'intero processo:
1. Vai alla tua Google Cloud Console
2. Seleziona il progetto creato al passaggio 1 di questo aiuto online dalla barra in alto della console di Google:

3. Fai clic sul Menu di navigazione > API e servizi > Credenziali:

4. Fai clic sulla chiave mappa PWA creata al passaggio 3 di questo aiuto online
5. Fai uno screenshot delle impostazioni della tua chiave, in modo che siano visibili la Restrizione delle applicazioni e le Restrizioni website della tua chiave API (vedi esempio sotto):

6. Crea uno screenshot della chiave API completa (vedi esempio sotto):

7. Apri un ticket con l'Assistenza spiegando il problema, con gli screenshot allegati.

Da sapere: se le mappe si vedono ma l'azione "usa la mia posizione" dei campi indirizzo non funziona, verifica che la Geocoding API sia abilitata e autorizzata sulla tua chiave.