Guida rapida dell'API Maps Embed

Inserisci una mappa interattiva o una panoramica in Street View nella tua pagina web con una richiesta HTTP, senza bisogno di JavaScript personalizzato.

Costi

Tutte le richieste all'API Maps Embed sono disponibili senza costi e con un utilizzo illimitato. Tuttavia, tutte le richieste richiedono comunque una chiave API Google Cloud valida. Per saperne di più, consulta Utilizzo e fatturazione.

Prima di iniziare

Per creare una mappa incorporata nella tua pagina web, completa i seguenti passaggi di configurazione obbligatori:

Passaggio 1: configura il progetto

Console

1. Nella console Google Cloud, nella pagina di selezione del progetto, fai clic su Crea progetto per iniziare a creare un nuovo progetto Cloud.

   Vai alla pagina del selettore dei progetti

2. Verifica che la fatturazione sia attivata per il tuo progetto Cloud. Verifica che la fatturazione sia abilitata per il tuo progetto.

   Nota: anche se devi configurare un account di fatturazione per configurare un progetto Cloud, l'utilizzo effettivo dell'API Embed è disponibile senza costi.

   Google Cloud offre una prova senza costi. La prova scade dopo 90 giorni o dopo che l'account ha accumulato addebiti per un valore di 300 $, a seconda dell'evento che si verifica per primo. Annulla in qualsiasi momento. Per ulteriori informazioni, consulta Crediti dell'account di fatturazione e Fatturazione.

Cloud SDK

gcloud projects create "PROJECT"

Scopri di più su Google Cloud SDK, sull'installazione di Cloud SDK e sui seguenti comandi:

• gcloud projects create

Nota: se non prevedi di conservare le risorse che crei in un esercizio di apprendimento, crea un progetto invece di selezionarne uno già esistente. Una volta completato l'esercizio, puoi eliminare il progetto e tutte le relative risorse.

Passaggio 2: abilita le API o gli SDK

Per utilizzare Google Maps Platform, devi abilitare le API o gli SDK che prevedi di utilizzare con il tuo progetto.

Console

Abilita l'API Maps Embed

Cloud SDK

gcloud services enable \
    --project "PROJECT" \
    "maps-embed-backend.googleapis.com"

Scopri di più su Google Cloud SDK, sull'installazione di Cloud SDK e sui seguenti comandi:

• gcloud services enable
• gcloud services disable

Passaggio 3: ottieni una chiave API

Questo passaggio illustra solo la procedura di creazione della chiave API. Se utilizzi la chiave API in produzione, ti consigliamo vivamente di limitarla. Puoi trovare ulteriori informazioni nella pagina Utilizzo delle chiavi API specifica per il prodotto.

La chiave API è un identificatore univoco che autentica le richieste associate al progetto a fini di utilizzo e fatturazione. Devi avere almeno una chiave API associata al tuo progetto. Per creare una nuova chiave o aggiungere un'API o un SDK a una chiave esistente, segui queste istruzioni.

Console

1. Vai alla pagina Google Maps Platform > Chiavi e credenziali.

   Vai alla pagina Chiavi e credenziali

2. Se richiesto, seleziona il progetto.

3. Procedi in uno dei seguenti modi:

   • Crea una nuova chiave:

     1. Fai clic su Crea credenziali > Chiave API.
     2. Nel riquadro Crea chiave API, apri l'elenco Seleziona limitazioni dell'API.
     3. Cancella tutte le API che non sono necessarie per questa chiave e assicurati che l'API Maps Embed rimanga selezionata.
     4. Fai clic su Crea. Nel riquadro viene visualizzata la nuova chiave API.

   • Utilizza una chiave esistente:

     1. Fai clic sul nome della chiave.
     2. Nell'elenco Seleziona limitazioni dell'API, seleziona API Maps Embed.
     3. Fai clic su Salva.

   La selezione di un'API qui non la abilita. Assicurati che l'API Maps Embed sia abilitata nella relativa pagina Libreria API.

4. Per visualizzare la stringa della chiave in un secondo momento, vai alla pagina Chiavi e credenziali e fai clic su Mostra chiave per la chiave.

Se la console ha un aspetto diverso da questi passaggi, consulta Crea una chiave API e Aggiungi limitazioni API nella documentazione di Google Cloud.

Cloud SDK

Sostituisci PROJECT_ID con l'ID progetto nei comandi seguenti.

• Crea una nuova chiave: esegui il comando seguente e sostituisci DISPLAY_NAME con un nome per la chiave.

  gcloud services api-keys create \
      --project="PROJECT_ID" \
      --display-name="DISPLAY_NAME" \
      --api-target=service=maps-embed-backend.googleapis.com

  Scopri di più su Google Cloud SDK, sull'installazione di Cloud SDK e sui seguenti comandi:

  • gcloud services api-keys create

• Utilizza una chiave esistente: esegui il comando seguente e sostituisci KEY_ID con l'ID della chiave. Il flag --append mantiene le API già consentite dalla chiave. In caso contrario, il comando le sostituisce.

  gcloud services api-keys update KEY_ID \
      --project="PROJECT_ID" \
      --append \
      --api-target=service=maps-embed-backend.googleapis.com

  Scopri di più su Google Cloud SDK, sull'installazione di Cloud SDK e sui seguenti comandi:

  • gcloud services api-keys update
  • gcloud services api-keys list

  L'ID chiave non è la stringa della chiave o il nome visualizzato. Per trovarlo, esegui gcloud services api-keys list --project="PROJECT_ID". L'ID è l'ultima parte del campo name: projects/PROJECT_NUMBER/locations/global/keys/KEY_ID.

Per visualizzare la stringa della chiave, esegui gcloud services api-keys get-key-string KEY_ID --project="PROJECT_ID".

Generazione di un iframe

Fai clic sulle seguenti opzioni e aggiungi una località e una chiave API per generare un iframe per la tua pagina web. Per ulteriori parametri e opzioni, consulta Incorporamento di una mappa.

Test dell'iframe

Per visualizzare l'iframe in una finestra del browser HTML:

1. Apri l'editor di testo predefinito. Sul tuo dispositivo dovrebbero essere installati per impostazione predefinita editor di testo come TextEdit o Blocco note di Microsoft Windows.
2. Crea un file HTML e assegnagli il nome index.html.

3. Aggiungi il seguente codice con l'iframe generato in precedenza:

   <html>
     <!-- Replace this code comment with your iframe. -->
   </html>
   

4. Salva il file HTML index.html.

5. Carica il file HTML in un browser web trascinandolo dal desktop al browser. In alternativa, fai doppio clic sul file, che funziona sulla maggior parte dei sistemi operativi.

Complimenti! Hai appena configurato e creato una mappa utilizzando l'API Maps Embed.

Pulizia

Puoi eliminare il tuo progetto Google Cloud per interrompere la fatturazione per tutte le risorse utilizzate all'interno del progetto.

Attenzione: l'eliminazione di un progetto ha i seguenti effetti:

• L'intero contenuto del progetto viene eliminato. Se hai utilizzato un progetto esistente per questo tutorial, quando lo eliminerai, eliminerai anche tutto il lavoro effettuato nel progetto.
• Gli ID progetto personalizzati non sono più disponibili. Quando hai creato questo progetto, potresti aver creato un ID progetto personalizzato che vuoi utilizzare in futuro. Per conservare gli URL che utilizzano l'ID progetto, ad esempio un URL appspot.com, elimina le risorse selezionate all'interno del progetto anziché eliminare l'intero progetto.

1. Nella console Google Cloud, vai alla pagina Gestisci risorse:

   Vai alla pagina Gestisci risorse

2. Se il progetto che vuoi eliminare è collegato a un'organizzazione, seleziona ed espandi l'elenco delle organizzazioni nella parte superiore della pagina.
3. Nell'elenco dei progetti, seleziona quello da eliminare e fai clic su Elimina.
4. Nella finestra di dialogo, digita l'ID progetto e fai clic su Chiudi per eliminare il progetto.

Passaggi successivi

• Inizia a sviluppare con l'API Maps Embed configurando il tuo progetto Google Cloud:

  Configura nella console Cloud

• Per un elenco di parametri e opzioni aggiuntivi che puoi aggiungere nel tuo iframe:

  Incorporamento di una mappa

• Estendi il tuo progetto Maps con l'API JavaScript:

  API Maps JavaScript