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
-
Nella console Google Cloud, nella pagina di selezione del progetto, fai clic su Crea progetto per iniziare a creare un nuovo progetto Cloud.
-
Verifica che la fatturazione sia attivata per il tuo progetto Cloud. Verifica che la fatturazione sia abilitata per il tuo progetto.
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:
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
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:
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
-
Vai alla pagina Google Maps Platform > Chiavi e credenziali.
- Se richiesto, seleziona il progetto.
-
Procedi in uno dei seguenti modi:
-
Crea una nuova chiave:
- Fai clic su Crea credenziali > Chiave API.
- Nel riquadro Crea chiave API, apri l'elenco Seleziona limitazioni dell'API.
- Cancella tutte le API che non sono necessarie per questa chiave e assicurati che l'API Maps Embed rimanga selezionata.
- Fai clic su Crea. Nel riquadro viene visualizzata la nuova chiave API.
-
Utilizza una chiave esistente:
- Fai clic sul nome della chiave.
- Nell'elenco Seleziona limitazioni dell'API, seleziona API Maps Embed.
- 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.
-
- 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:
-
Utilizza una chiave esistente: esegui il comando seguente e sostituisci KEY_ID con l'ID della chiave. Il flag
--appendmantiene 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:
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 camponame: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:
- 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.
- Crea un file HTML e assegnagli il nome
index.html. Aggiungi il seguente codice con l'iframe generato in precedenza:
<html> <!-- Replace this code comment with your iframe. --> </html>Salva il file HTML
index.html.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.
- Nella console Google Cloud, vai alla pagina Gestisci risorse:
- Se il progetto che vuoi eliminare è collegato a un'organizzazione, seleziona ed espandi l'elenco delle organizzazioni nella parte superiore della pagina.
- Nell'elenco dei progetti, seleziona quello da eliminare e fai clic su Elimina.
- 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:
Per un elenco di parametri e opzioni aggiuntivi che puoi aggiungere nel tuo iframe:
Estendi il tuo progetto Maps con l'API JavaScript: