Incorporamento di mappe

Questa guida mostra come incorporare una mappa interattiva nella tua pagina web.

Creazione dell'URL dell'API Maps Embed

Di seguito è riportato un URL di esempio che carica l'API Maps Embed:

https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

Sostituisci:

  • MAP_MODE con la tua modalità mappa.
  • YOUR_API_KEY con la tua chiave API. Per ulteriori informazioni, consulta la sezione Recupero della chiave API.
  • PARAMETERS con i parametri obbligatori e facoltativi per la mappa .

Aggiunta dell'URL in un iframe

Per utilizzare l'API Maps Embed nella tua pagina web, imposta l'URL che hai creato come valore dell'attributo src di un iframe. Controlla le dimensioni della mappa con gli attributi height e width dell'iframe, ad esempio:

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
  allowfullscreen>
</iframe>

L'iframe di esempio riportato sopra utilizza le proprietà aggiuntive:

  • La proprietà allowfullscreen per consentire a determinate parti della mappa di essere visualizzate a schermo intero.
  • Le proprietà frameborder="0" e style="border:0" per rimuovere il bordo dell'iframe standard intorno alla mappa.
  • La proprietà referrerpolicy="no-referrer-when-downgrade" per consentire browser per inviare l'URL completo come intestazione Referer con la richiesta, in modo che Le limitazioni relative alle chiavi API potrebbero funzionare correttamente.

Puoi ridimensionare l'iframe in base alla struttura e al design del tuo sito web, ma in genere i visitatori trovano più facile interagire con le mappe più grandi. Tieni presente che le mappe incorporate non sono supportate per dimensioni inferiori a 200 px in entrambe le dimensioni.

Limitazioni relative alle chiavi API

Se il sito web host ha un meta tag referrer impostato su no-referrer o same-origin, il browser non invierà l'intestazione Referer a Google. Ciò potrebbe causare il rifiuto delle richieste da parte della limitazione della chiave API. Affinché la limitazione funzioni correttamente, aggiungi un elemento referrerpolicy all'iframe, come nell'esempio precedente, per indicare esplicitamente consenti l'invio di intestazioni Referer a Google.

Pubblicità sulla mappa

L'API Maps Embed potrebbe includere pubblicità sulla mappa. Il formato dell'annuncio e l'insieme di annunci visualizzati in una determinata mappa può cambiare senza preavviso.

Scegliere le modalità mappa

Puoi specificare una delle seguenti modalità di mappa da utilizzare nell'URL di richiesta:

  • place: mostra un segnaposto sulla mappa in un determinato luogo o indirizzo come un punto di riferimento, un'attività, un elemento geografico o una città.
  • view: restituisce una mappa senza indicatori o indicazioni stradali.
  • directions: mostra il percorso tra due o più punti specificati sulla mappa, nonché la distanza e il tempo di percorrenza.
  • streetview: mostra viste panoramiche interattive da località designate.
  • search: mostra i risultati di una ricerca sulla mappa visibile regione.

Modalità place

Il seguente URL utilizza la modalità mappa place per visualizzare un indicatore in corrispondenza Torre Eiffel:

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

Puoi utilizzare i seguenti parametri:

Parametro Tipo Descrizione Valori accettati
q Obbligatorio Definisce la posizione dell'indicatore. Nome del luogo, indirizzo, Plus Code o ID luogo con escape URL. L'API Maps Embed supporta sia + sia %20 per la fuga degli spazi. Ad esempio, converti "Municipio, Roma, RM" a City+Hall,New+York,NY o codici più "849VCWC8+R9" a 849VCWC8%2BR9.
center Facoltativo Definisce il centro della visualizzazione mappa. Accetta il valore di latitudine e longitudine separato da virgola; ad esempio: 37.4218,-122.0840.
zoom Facoltativo Imposta il livello di zoom iniziale della mappa. Valori che vanno da 0 (il mondo intero) a 21 (edifici singoli). Il limite superiore può variare a seconda dei dati della mappa disponibili nella località selezionata.
maptype Facoltativo Definisce il tipo di riquadri della mappa da caricare. roadmap (valore predefinito) o satellite
language Facoltativo Definisce la lingua da utilizzare per gli elementi dell'interfaccia utente e per la visualizzazione delle etichette sui riquadri della mappa. Per impostazione predefinita, i visitatori visualizzano una mappa a loro piacimento lingua. Questo parametro è supportato solo per alcuni riquadri dei paesi. se le la lingua specifica richiesta non è supportata per il set di riquadri, la verrà usata la lingua predefinita per quel set di riquadri.
region Facoltativo Definisce i confini e le etichette appropriati da visualizzare, in base a sensibilità geopolitiche. Accetta un codice regione specificato in formato a due caratteri (non numerico) Mappatura del sottotag della regione Unicode sul ccTLD familiare ("dominio di primo livello") valori a due caratteri. Scopri Google Maps Platform Dettagli di copertura per le regioni supportate.

Modalità view

L'esempio seguente utilizza la modalità view e il parametro facoltativo maptype per per visualizzare una vista satellitare della mappa:

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

Puoi utilizzare i seguenti parametri:

Parametro Tipo Descrizione Valori accettati
center Obbligatorio Definisce il centro della visualizzazione mappa. Accetta il valore di latitudine e longitudine separato da virgola; ad esempio: 37.4218,-122.0840.
zoom Facoltativo Imposta il livello di zoom iniziale della mappa. Valori che vanno da 0 (il mondo intero) a 21 (edifici singoli). Il limite superiore può variare a seconda dei dati della mappa disponibili nella località selezionata.
maptype Facoltativo Definisce il tipo di riquadri della mappa da caricare. roadmap (valore predefinito) o satellite
language Facoltativo Definisce la lingua da utilizzare per gli elementi dell'interfaccia utente e per la visualizzazione delle etichette sui riquadri della mappa. Per impostazione predefinita, i visitatori visualizzano una mappa a loro piacimento lingua. Questo parametro è supportato solo per alcuni riquadri dei paesi. se le la lingua specifica richiesta non è supportata per il set di riquadri, la verrà usata la lingua predefinita per quel set di riquadri.
region Facoltativo Definisce i confini e le etichette appropriati da visualizzare, in base a sensibilità geopolitiche. Accetta un codice regione specificato in formato a due caratteri (non numerico) Mappatura del sottotag della regione Unicode sul ccTLD familiare ("dominio di primo livello") valori a due caratteri. Scopri Google Maps Platform Dettagli di copertura per le regioni supportate.

Modalità directions

L'esempio seguente utilizza la modalità directions per visualizzare il percorso tra Oslow e Telemark, Norvegia, la distanza e il tempo di percorrenza evitando pedaggi e autostrade.

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

Puoi utilizzare i seguenti parametri:

Parametro Tipo Descrizione Valori accettati
origin Obbligatorio Definisce il punto di partenza da cui visualizzare le indicazioni stradali. Nome del luogo, indirizzo, codice plus, coordinate di latitudine/longitudine o ID luogo con codifica URL. L'API Maps Embed supporta sia + sia %20 quando si esce dagli spazi. Ad esempio, converti "Municipio, Roma, RM" a City+Hall,New+York,NY o codici più "849VCWC8+R9" a 849VCWC8%2BR9.
destination Obbligatorio Definisce il punto di arrivo delle indicazioni stradali. Nome del luogo, indirizzo, plus code, latitudine/longitudine, oltre a codice URL con caratteri di escape coordinate o ID luogo. L'API Maps Embed supporta sia + sia %20 per la fuga degli spazi. Ad esempio, converti "Municipio, Roma, RM" a City+Hall,New+York,NY o codici più "849VCWC8+R9" a 849VCWC8%2BR9.
waypoints Facoltativo Specifica uno o più luoghi intermedi tra i quali indirizzare le indicazioni stradali l'origine e la destinazione. Nome, indirizzo o ID luogo. È possibile specificare più waypoint utilizzando il carattere barra verticale (|) per separare i luoghi (ad es. Berlin,Germany|Paris,France). Puoi specificare fino a 20 waypoint.
mode Facoltativo Definisce il metodo di viaggio. Se non viene specificata alcuna modalità, L'API Maps Embed mostrerà una o più delle modalità più pertinenti per il una route specificata. driving, walking (che predilige percorsi pedonali e marciapiedi, se disponibili), bicycling (che segue percorsi su piste ciclabili e strade preferite, se disponibili), transit o flying.
avoid Facoltativo Specifica gli elementi da evitare nelle indicazioni stradali. Tieni presente che questo non preclude i percorsi che includono le funzionalità con limitazioni, ma influisce sul risultato in modo da privilegiare i percorsi più favorevoli. tolls, ferries e/o highways. Separa più valori con il carattere barra verticale (ad es. avoid=tolls|highways).
units Facoltativo Specifica il metodo di misurazione, metrico o imperiale, per la visualizzazione delle distanze nei risultati. Se units non è specificato, Le unità da utilizzare sono stabilite in origin paese della query. metric o imperial
center Facoltativo Definisce il centro della visualizzazione mappa. Accetta il valore di latitudine e longitudine separato da virgola; ad esempio: 37.4218,-122.0840.
zoom Facoltativo Imposta il livello di zoom iniziale della mappa. Valori che vanno da 0 (il mondo intero) a 21 (edifici singoli). Il limite superiore può variare a seconda dei dati della mappa disponibili nella località selezionata.
maptype Facoltativo Definisce il tipo di riquadri della mappa da caricare. roadmap (valore predefinito) o satellite
language Facoltativo Definisce la lingua da utilizzare per gli elementi dell'interfaccia utente e per la visualizzazione delle etichette sui riquadri della mappa. Per impostazione predefinita, i visitatori visualizzano una mappa a loro piacimento lingua. Questo parametro è supportato solo per alcuni riquadri dei paesi. se le la lingua specifica richiesta non è supportata per il set di riquadri, la verrà usata la lingua predefinita per quel set di riquadri.
region Facoltativo Definisce i confini e le etichette appropriati da visualizzare, in base a sensibilità geopolitiche. Accetta un codice regione specificato in formato a due caratteri (non numerico) Mappatura del sottotag della regione Unicode sul ccTLD familiare ("dominio di primo livello") valori a due caratteri. Scopri Google Maps Platform Dettagli di copertura per le regioni supportate.

Modalità streetview

L'API Maps Embed ti consente di visualizzare immagini di Street View come panoramiche interattive da luoghi designati in tutto il suo area di copertura. Sono disponibili anche le Photosphere inviate dagli utenti e le raccolte speciali di Street View.

Ogni panoramica di Street View offre una vista completa a 360 gradi da un'unica posizione. Le immagini devono avere una visuale orizzontale a 360 gradi (una panoramica completa) e una visuale verticale a 180 gradi (dall'alto verso il basso). La modalità streetview fornisce un visualizzatore che mostra il panorama risultante come una sfera con una fotocamera al centro. Puoi manipolare la fotocamera per controllare lo zoom e l'orientamento della fotocamera.

Guarda la seguente panoramica in modalità streetview:

https://www.google.com/maps/embed/v1/streetview
  ?key=YOUR_API_KEY
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

Uno dei seguenti parametri URL è obbligatorio:

  • location accetta latitudine e longitudine come separate da virgole (46.414382,10.013988). L'API mostrerà il panorama fotografato più vicino a questo luogo. Poiché le immagini di Street View vengono aggiornate periodicamente e le foto possono essere scattate da posizioni leggermente diverse ogni volta, è possibile che la tua posizione venga associata a un panorama diverso quando le immagini vengono aggiornate.

  • pano è un ID panoramica specifico. Se specifichi pano puoi anche specificare un location. location verrà utilizzato solo se l'API non riesce a trovare l'ID panorama.

I seguenti parametri URL sono facoltativi:

Parametro Tipo Descrizione Valori accettati
heading Facoltativo Indica l'orientamento della fotocamera in gradi in senso orario da nord. Valore in gradi da -180° a 360°
pitch Facoltativo specifica l'angolazione, verso l'alto o verso il basso, della fotocamera. I valori positivi inclinano la fotocamera verso l'alto, mentre i valori negativi la inclinano verso il basso. La l'inclinazione predefinita di 0° è impostata in base alla posizione della videocamera quando dell'immagine acquisita. Per questo motivo, un'inclinazione di 0° è spesso, ma non sempre, orizzontale. Ad esempio, un'immagine scattata su una collina probabilmente presentano un'inclinazione predefinita non orizzontale. Valore in gradi da -90° a 90°
fov Facoltativo determina il campo visivo orizzontale dell'immagine. it il valore predefinito è 90°. Quando si gestisce un'area visibile di dimensioni fisse, il campo vista può essere considerata il livello di zoom, con numeri più piccoli che indicano una di zoom più elevato. Valore in gradi, con un intervallo di 10° - 100°
center Facoltativo Definisce il centro della visualizzazione mappa. Accetta il valore di latitudine e longitudine separato da virgola; ad esempio: 37.4218,-122.0840.
zoom Facoltativo Imposta il livello di zoom iniziale della mappa. Valori che vanno da 0 (il mondo intero) a 21 (edifici singoli). Il limite superiore può variare a seconda dei dati della mappa disponibili nella località selezionata.
maptype Facoltativo Definisce il tipo di riquadri della mappa da caricare. roadmap (valore predefinito) o satellite
language Facoltativo Definisce la lingua da utilizzare per gli elementi dell'interfaccia utente e per la visualizzazione delle etichette sui riquadri della mappa. Per impostazione predefinita, i visitatori visualizzano una mappa a loro piacimento lingua. Questo parametro è supportato solo per alcuni riquadri dei paesi. se le la lingua specifica richiesta non è supportata per il set di riquadri, la verrà usata la lingua predefinita per quel set di riquadri.
region Facoltativo Definisce i confini e le etichette appropriati da visualizzare, in base a sensibilità geopolitiche. Accetta un codice regione specificato in formato a due caratteri (non numerico) Mappatura del sottotag della regione Unicode sul ccTLD familiare ("dominio di primo livello") valori a due caratteri. Consulta la sezione Dettagli sulla copertura di Google Maps Platform per conoscere le regioni supportate.

Modalità search

La modalità Search mostra i risultati di una ricerca nell'area della mappa visibile. È consigliabile definire una località per la ricerca, includendo una località nel termine di ricerca (record+stores+in+Seattle) o un parametro center e zoom per delimitare la ricerca.

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

Puoi utilizzare i seguenti parametri:

Parametro Tipo Descrizione Valori accettati
q Obbligatorio Definisce il termine di ricerca. Può includere una limitazione geografica, come in+Seattle o near+98033.
center Facoltativo Definisce il centro della visualizzazione mappa. Accetta il valore di latitudine e longitudine separato da virgola; ad esempio: 37.4218,-122.0840.
zoom Facoltativo Imposta il livello di zoom iniziale della mappa. Valori che vanno da 0 (il mondo intero) a 21 (edifici singoli). Il limite superiore può variare a seconda dei dati della mappa disponibili nella località selezionata.
maptype Facoltativo Definisce il tipo di riquadri della mappa da caricare. roadmap (valore predefinito) o satellite
language Facoltativo Definisce la lingua da utilizzare per gli elementi dell'interfaccia utente e per la visualizzazione delle etichette sui riquadri della mappa. Per impostazione predefinita, i visitatori visualizzano una mappa a loro piacimento lingua. Questo parametro è supportato solo per alcuni riquadri dei paesi. se le la lingua specifica richiesta non è supportata per il set di riquadri, la verrà usata la lingua predefinita per quel set di riquadri.
region Facoltativo Definisce i confini e le etichette appropriati da visualizzare, in base a sensibilità geopolitiche. Accetta un codice regione specificato come un carattere Unicode di due caratteri (non numerico) mappato al valore di due caratteri dei ccTLD ("domini di primo livello") comuni. Consulta la sezione Dettagli sulla copertura di Google Maps Platform per conoscere le regioni supportate.

Parametri ID posizione

L'API Maps Embed supporta l'utilizzo di ID luogo anziché fornire un nome o un indirizzo. Gli ID luogo sono un modo stabile per identificare un luogo. Per ulteriori informazioni, consulta la documentazione dell'API Google Places.

L'API Maps Embed accetta gli ID luogo per i seguenti parametri URL:

  • q
  • origin
  • destination
  • waypoints

Per utilizzare un ID luogo, devi prima aggiungere il prefisso place_id:. Il seguente codice specifica il Municipio di New York come origine per una richiesta di indicazioni sulla strada: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius imposta un raggio, specificato in metri, in cui cercare un panoramica, centrata sulla latitudine e sulla longitudine specificate. Valori validi sono numeri interi non negativi. Il valore predefinito è 50.

  • source limita le ricerche di Street View alle fonti selezionate. I valori validi sono:

    • default utilizza le origini predefinite per Street View; le ricerche non sono limitate a origini specifiche.
    • outdoor limita le ricerche alle raccolte di contenuti all'aperto. Da interno raccolte non sono incluse nei risultati di ricerca. Tieni presente che i panorami esterni potrebbero non esistere per la località specificata. Tieni inoltre presente che la ricerca restituisce solo panorami in cui è possibile determinare se sono all'interno o all'esterno. Ad esempio, le foto sferiche non vengono restituite perché sono sconosciute al chiuso o all'aperto.