Questa guida spiega come incorporare una mappa interattiva nella tua pagina web.
Creazione dell'URL dell'API Maps Embed
Di seguito è riportato un URL di esempio per il caricamento dell'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 sulla tua pagina web, imposta l'URL che hai
creato come il 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 la visualizzazione a schermo intero di alcune parti della mappa. - Le proprietà
frameborder="0"
estyle="border:0"
per rimuovere lo standard bordo dell'iframe attorno alla mappa. - La proprietà
referrerpolicy="no-referrer-when-downgrade"
per consentire browser per inviare l'URL completo come intestazioneReferer
con la richiesta, in modo che Le limitazioni relative alle chiavi API potrebbero funzionare correttamente.
Puoi ridimensionare l'iframe per adattarlo alla struttura e al design del tuo sito web, ma scopriamo che in genere per i visitatori è più facile interagire con mappe più grandi. Tieni presente che le mappe incorporate non sono supportate al di sotto di 200 px in .
Limitazioni relative alle chiavi API
Se il meta tag referrer
del sito web di hosting viene impostato su no-referrer
,
same-origin
, il browser non invierà l'intestazione Referer
a Google. Questo
potrebbe causare la restrizione della chiave API.
di rifiutare le richieste. 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 può includere pubblicità su mappa. Il formato dell'annuncio e l'insieme di annunci visualizzati in una determinata mappa può cambiare senza preavviso.
Scelta delle 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 luoghi designati.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
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 . |
center |
Facoltativo | Definisce il centro della visualizzazione mappa. | Accetta valori di latitudine e longitudine separati da virgole. 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 in base ai dati della mappa
disponibile nella località selezionata. |
maptype |
Facoltativo | Definisce il tipo di riquadri di 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 sulle etichette nei 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
¢er=-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 valori di latitudine e longitudine separati da virgole. 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 in base ai dati della mappa
disponibile nella località selezionata. |
maptype |
Facoltativo | Definisce il tipo di riquadri di 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 sulle etichette nei 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, plus code, latitudine/longitudine, oltre a codice URL con caratteri di escape
coordinate o ID luogo.
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 direzioni. | 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
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 . |
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 del luogo.
È possibile specificare più tappe utilizzando il carattere barra verticale (|) per
luoghi separati (ad es. Berlin,Germany|Paris,France ). Puoi
specificare fino a 20 tappe. |
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 (opzione preferita: pedonale
e marciapiedi, se disponibili), bicycling (che
percorsi ciclabili e strade preferite, se disponibili),
transit o flying . |
avoid |
Facoltativo | Specifica le funzionalità da evitare nelle indicazioni stradali. Tieni presente che escludere percorsi che includono gli elementi soggetti a limitazioni; influenza in modo da ottenere route più favorevoli. | tolls , ferries e/o highways .
Separa più valori con la barra verticale (ad es.
avoid=tolls|highways ). |
units |
Facoltativo | Specifica il metodo di misurazione, metrico o imperiale, quando visualizzi
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 valori di latitudine e longitudine separati da virgole. 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 in base ai dati della mappa
disponibile nella località selezionata. |
maptype |
Facoltativo | Definisce il tipo di riquadri di 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 sulle etichette nei 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. Utente foto sferiche fornite e Raccolte speciali di Street View .
Ogni panorama di Street View offre una vista completa a 360° da una singola
in ogni località. Le immagini contengono una visualizzazione orizzontale a 360 gradi (un bordo completo)
e una visuale verticale di 180° (dall'alto verso il basso). La
La modalità streetview
fornisce a un visualizzatore che esegue il rendering dei
panoramica sotto forma di 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 sono periodicamente e le fotografie potrebbero essere scattate con posizioni ogni volta, è possibile che la posizione si posizioni su una panoramica quando le immagini vengono aggiornate.pano
è un ID panoramica specifico. Se specifichipano
puoi anche specificare unlocation
. Lalocation
verrà utilizzato solo se l'API non riesce a trovare il panorama ID.
I seguenti parametri URL sono facoltativi:
Parametro | Tipo | Descrizione | Valori accettati |
---|---|---|---|
heading |
Facoltativo | Indica l'orientamento della fotocamera in gradi in senso orario tramite la bussola dal nord. | Valore in gradi da -180° a 360° |
pitch |
Facoltativo | specifica l'angolazione, verso l'alto o verso il basso, della videocamera. L'angolazione dei valori positivi la fotocamera verso l'alto, mentre per i valori negativi la fotocamera viene rivolta verso il basso. La l'inclinazione predefinita di 0° è impostata in base alla posizione della videocamera quando dell'immagine acquisita. Per questo motivo, spesso un passo di 0° è, ma non sempre, in 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 valori di latitudine e longitudine separati da virgole. 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 in base ai dati della mappa
disponibile nella località selezionata. |
maptype |
Facoltativo | Definisce il tipo di riquadri di 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 sulle etichette nei 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à search
La modalità Search
mostra i risultati di una ricerca nell'area della mappa visibile.
Ti consigliamo di definire una località per la ricerca, utilizzando
includere una località nel termine di ricerca (record+stores+in+Seattle
) oppure
includendo i parametri center
e zoom
per limitare 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 restrizione geografica,
come in+Seattle o near+98033 . |
center |
Facoltativo | Definisce il centro della visualizzazione mappa. | Accetta valori di latitudine e longitudine separati da virgole. 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 in base ai dati della mappa
disponibile nella località selezionata. |
maptype |
Facoltativo | Definisce il tipo di riquadri di 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 sulle etichette nei 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. |
Parametri ID luogo
L'API Maps Embed supporta l'utilizzo di ID luogo invece di fornire un il nome o l'indirizzo del luogo. 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 il seguente URL parametri:
q
origin
destination
waypoints
Per utilizzare un ID luogo, devi prima aggiungere il prefisso place_id:
. La
che segue specifica il municipio di New York come origine delle indicazioni stradali
richiesta: 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 sono non solo a fonti specifiche.outdoor
limita le ricerche alle raccolte di contenuti all'aperto. Da interno raccolte non sono incluse nei risultati di ricerca. Per i panorami esterni potrebbe non esistere per la località specificata. Inoltre, tieni presente che la ricerca restituisce panoramiche dove è possibile determinare se si trovano all'interno o all'aperto. Ad esempio, le foto sferiche non vengono restituite perché sono sconosciute al chiuso o all'aperto.