Come incorporare Google Maps su qualsiasi sito web o guida digitale
Scopri come incorporare Google Maps con iframe, API JavaScript e strumenti integrati. Include configurazione API, design responsive e privacy per host.
Un ospite ti scrive a tarda notte: “L'indirizzo mi ha portato nella strada sbagliata”. Controlli i dettagli della prenotazione e ti rendi conto che il nome della proprietà appare in più di un posto nelle vicinanze. L'indirizzo era tecnicamente corretto, ma non abbastanza utile per chi arriva stanco, al buio e non ha familiarità con la zona.
È qui che un Google Map incorporato si rivela fondamentale. Una mappa su una pagina di proprietà o su una guida digitale offre agli ospiti un contesto visivo, punti di riferimento vicini e un percorso diretto verso Google Maps senza costringerli a copiare e incollare un indirizzo. L'iframe di base richiede pochi minuti per essere aggiunto, ma un'implementazione affidabile richiede qualcosa di più di una semplice mappa sulla pagina. Il layout mobile, l'accessibilità da tastiera, il consenso alla privacy, la sicurezza delle API e il modo in cui la piattaforma scelta gestisce l'HTML influiscono sul fatto che l'embed sia d'aiuto o frustri gli ospiti.
Sommario
- Perché le mappe incorporate sono importanti per host e proprietari di siti
- Il modo più rapido per incorporare una mappa usando un iframe
- Configurazione della chiave API e della fatturazione Google Cloud
- Scegliere la modalità di incorporamento giusta per il tuo caso
- Rendere la tua mappa incorporata responsive e accessibile
- Considerazioni su privacy e consenso per le mappe incorporate
- Suggerimenti per le piattaforme ed errori di incorporamento comuni
Perché le mappe incorporate sono importanti per host e proprietari di siti
La mappa più utile non è necessariamente quella più avanzata. Per un affitto a breve termine, gli ospiti di solito devono rispondere rapidamente a domande pratiche: è l'edificio giusto? Dov'è l'ingresso? Posso identificare il vialetto? Quanto è vicina la proprietà alla spiaggia, alla stazione, al supermercato o al percorso per l'aeroporto?
Un indirizzo testuale risponde solo in parte al problema. Una mappa interattiva consente all'ospite di ingrandire per comprendere il quartiere, avvicinarsi per identificare l'arrivo e aprire la navigazione quando è pronto a partire. Quella conferma visiva può prevenire il classico scambio notturno in cui un ospite è vicino alla proprietà ma ha seguito un nome di strada ambiguo o un'istruzione di percorso scomoda.
Google Maps è operativo dal 2005 e i riepiloghi di mercato indipendenti pubblicati nel 2026 riportano più di 2 miliardi di utenti attivi mensili in tutto il mondo. Alcuni di questi riepiloghi stimano anche che più di 1 miliardo di persone usa Google Maps mensilmente per cercare luoghi e servizi locali. Queste cifre provengono da riepiloghi sull'utilizzo di Google Maps, non dalla documentazione dell'Embed API di Google, ma illustrano perché gli ospiti riconoscono immediatamente l'interfaccia.
Le mappe supportano i momenti che generano richieste di assistenza
Gli host possono utilizzare una mappa per:
- Chiarire l'arrivo: Mostrare la proprietà in relazione a un punto di riferimento o una strada riconoscibile.
- Ridurre la confusione sull'indirizzo: Fornire agli ospiti una verifica visiva prima che inizino a guidare.
- Migliorare le guide locali: Segnare ristoranti, bar, attrazioni, aree di parcheggio e fermate dei trasporti.
- Mantenere le istruzioni unite: Posizionare la mappa accanto ai dettagli del check-in, del parcheggio e dell'ingresso.
Una guida digitale è particolarmente utile in questo caso perché l'ospite può aprire le informazioni sulla posizione dalla stessa pagina mobile dei dettagli del Wi-Fi e delle regole della casa. Per un esempio pratico di questo formato informativo, consulta questa guida alle guide digitali per affitti turistici.
L'Embed API di Google Maps utilizza una richiesta HTTP basata su iframe e offre cinque modalità predefinite: place (luogo), view (vista), directions (direzioni), streetview e search (ricerca). La struttura standardizzata significa che puoi aggiungere contesto geografico senza costruire un'interfaccia di mappatura da zero. Per la maggior parte delle pagine di singole proprietà, inizia con la visualizzazione utile più semplice, quindi aggiungi un'interazione più ricca solo quando gli ospiti ne hanno bisogno.
Il modo più rapido per incorporare una mappa usando un iframe
Per la posizione di una singola proprietà, lo strumento di condivisione integrato di Google Maps è solitamente la strada più veloce. Non c'è bisogno di scrivere codice JavaScript, creare un componente mappa personalizzato o iniziare con le API JavaScript di Maps.
Apri Google Maps, cerca la proprietà e controlla attentamente il risultato. Se l'indirizzo è ambiguo, conferma il segnaposto rispetto all'ingresso, all'edificio, al vialetto o al punto di riferimento vicino prima di copiare qualsiasi cosa.
Copia il codice di incorporamento generato
Segui questa procedura:
- Trova la posizione: Cerca l'indirizzo completo della proprietà su Google Maps.
- Apri le opzioni di condivisione: Seleziona Condividi dal pannello della posizione.
- Scegli la scheda di incorporamento: Seleziona Incorpora mappa.
- Seleziona una dimensione: Scegli una dimensione predefinita, quindi seleziona Copia HTML.
- Incolla l'iframe: Aggiungi il codice nell'HTML del tuo sito web o nell'editor del codice sorgente.
- Pubblica e prova: Apri la pagina finita su un telefono e un browser desktop.
L'iframe generato include i controlli mappa di Google e un percorso verso l'esperienza completa di Google Maps. È sufficiente per una pagina contatti, un singolo annuncio o una scheda di posizione in una guida digitale dove l'esigenza primaria è l'orientamento.
L'incorporamento rapido ha limiti chiari. Non avrai marcatori personalizzati, più livelli di posizione o un controllo completo sul design visivo. Il codice copiato potrebbe anche usare valori fissi di larghezza e altezza, che possono causare problemi su un layout mobile stretto. Puoi sostituire la larghezza con 100%, ma il contenitore genitore deve avere un'altezza definita. Altrimenti, la mappa potrebbe collassare o apparire sproporzionata.
Un iframe diretto è anche diverso da una mappa JavaScript personalizzata. Google documenta l'Embed API come gratuita, con richieste illimitate e senza limiti giornalieri, pur richiedendo una chiave API e una configurazione Google Cloud per il metodo basato su API. La documentazione per iniziare con la Maps Embed API spiega le modalità disponibili e la struttura di incorporamento.
Il seguente video offre una panoramica visiva dell'interfaccia di base di Google Maps e del flusso di lavoro di condivisione:
Usa l'incorporamento semplice tramite condivisione quando la velocità conta e la mappa ha un solo scopo. Passa a soluzioni avanzate solo quando un comportamento personalizzato risolve un problema reale dell'ospite o del proprietario.
Configurazione della chiave API e della fatturazione Google Cloud
La strada dell'API è adatta agli host che necessitano di un URL di incorporamento controllato, una modalità selezionata o la stessa configurazione su più pagine di proprietà. Crea anche un compito di sicurezza che i tutorial rapidi spesso saltano. Una chiave API è una credenziale e una chiave del browser senza restrizioni può essere copiata e riutilizzata altrove.
L'Embed API di Google è gratuita con richieste illimitate e senza tetto massimo giornaliero, ma richiede comunque una chiave API e una configurazione di Google Cloud. Leggi le linee guida sull'utilizzo e la fatturazione della Maps Embed API prima di pubblicare. Copre l'utilizzo, la configurazione della fatturazione, le restrizioni della chiave e i problemi di configurazione comuni.
Crea il progetto e abilita l'API
In Google Cloud:
- Crea o seleziona un progetto: Mantieni la configurazione della mappa in un progetto che puoi identificare e gestire in seguito.
- Configura la fatturazione: Segui le istruzioni per la fatturazione e aggiungi il metodo di pagamento richiesto.
- Abilita Maps Embed API: Apri la libreria API, trova l'Embed API e abilitala per il progetto.
- Crea le credenziali: Genera una chiave API nell'area delle credenziali.
- Salva la chiave in modo sicuro: Aggiungila solo dove la piattaforma del tuo sito web o la pagina lo richiedono.
Il fatto che il progetto sia attivo non limita quali siti web possono utilizzare la chiave. Le restrizioni della chiave gestiscono quel confine.
Limita la chiave prima della pubblicazione
Imposta una restrizione referrer HTTP per ogni dominio che deve caricare la mappa. Aggiungi una restrizione API in modo che la credenziale possa chiamare solo la Maps Embed API, dove tale opzione è disponibile nella tua configurazione.
Regola di sicurezza: Non lasciare mai una chiave del browser in produzione senza restrizioni, poiché l'API non ha un tetto massimo di richieste giornaliere.
Prova la chiave limitata sul dominio live, includendo sia la versione www che quella non-www quando il tuo sito le utilizza. Aggiungi un dominio di staging solo se intendi consentirlo. Una chiave che funziona localmente ma esclude l'hostname pubblicato lascerà ai visitatori una mappa non funzionante.
Mantieni l'implementazione limitata. Una pagina di una proprietà con una posizione indicata di solito richiede solo un embed di tipo place. Non aggiungere l'API JavaScript a meno che la pagina non richieda un comportamento personalizzato che l'Embed API non può fornire.
Scegliere la modalità di incorporamento giusta per il tuo caso
La modalità di incorporamento giusta dipende da ciò che il visitatore deve fare dopo. Usa Place (Luogo) quando gli ospiti devono confermare la posizione di una proprietà, Directions (Direzioni) quando hanno bisogno di un percorso, e View o Street View quando il contesto circostante è importante. Search (Ricerca) può supportare una guida locale, ma ti dà meno controllo sui luoghi mostrati.
| Modalità di incorporamento | Caso d'uso migliore | Limitazione principale |
|---|---|---|
| Place | Segnare una proprietà, un hotel, un ufficio, un ristorante o un'attrazione | Si concentra su un luogo selezionato anziché su una guida personalizzata più ampia |
| View | Mostrare una mappa generale, una prospettiva satellitare o un punto di vista selezionato | Potrebbe non fornire la chiara scheda di posizione che un ospite si aspetta |
| Directions | Aiutare gli ospiti a pianificare un percorso da un'origine alla proprietà | Aggiunge interazione e può essere non necessario per un semplice orientamento |
| Street View | Mostrare la strada, l'ingresso o il fronte circostante | Le immagini a livello stradale potrebbero non corrispondere alle condizioni attuali |
| Search | Visualizzare i risultati per una query come bar o attrazioni vicino a una posizione | I risultati possono includere alternative o concorrenti che non controlli |
Abbina la modalità alla pagina
La modalità Place è solitamente la scelta pratica per la pagina di una proprietà. Offre ai visitatori un chiaro punto di riferimento accanto alle istruzioni di arrivo scritte. Usa un Place ID preciso o un plus code quando possibile. Una stringa di indirizzo può indirizzare all'edificio sbagliato, specialmente in aree con nomi di strade simili o unità multiple.
La modalità Directions si adatta a una guida digitale o a una pagina "Come arrivare" quando gli ospiti devono pianificare il viaggio da un aeroporto, una stazione o un luogo di eventi. Può essere superflua accanto a una semplice scheda indirizzo. Aggiungi un prompt chiaro per il punto di partenza, così i visitatori sanno cosa inserire.
La modalità Search funziona per i consigli locali, come bar, supermercati o attrazioni vicino all'affitto. Controlla la query prima di pubblicare. I risultati di ricerca possono includere aziende che non hai visitato, concorrenti o luoghi non più adatti; etichetta quindi la sezione come "risultati di ricerca" piuttosto che come consiglio personale.
La modalità View fornisce un contesto geografico più ampio. Un appartamento sulla spiaggia, una baita di montagna o una proprietà rurale possono beneficiare di una vista satellitare o dell'area prima dell'arrivo. La Street View è più utile quando l'ingresso, il vialetto o l'accesso stradale sono difficili da identificare. Controlla le immagini prima di fare affidamento su di esse, poiché la copertura a livello stradale potrebbe essere obsoleta o non disponibile.
La documentazione dell'Embed API spiega i parametri per la modalità Place e i link ad altre modalità. Crea un URL, testalo sulla pagina pubblicata e poi riutilizza il modello per altre proprietà. Per una guida digitale, conferma anche che la modalità selezionata supporti il compito del visitatore senza forzare interazioni extra.
Rendere la tua mappa incorporata responsive e accessibile
Una mappa che sembra perfetta su desktop può compromettere l'esperienza di arrivo su un telefono. Dimensioni fisse dell'iframe spesso si estendono oltre la colonna dei contenuti, mentre un iframe senza altezza definita può scomparire all'interno di un tema responsive.
Usa un contenitore (wrapper) che controlli la forma della mappa, quindi lascia che l'iframe riempia quel contenitore:
<div class="map-container">
<iframe
src="URL_DI_INCORPORAMENTO_GOOGLE_MAPS"
title="Mappa che mostra la posizione dell'affitto turistico"
aria-label="Mappa interattiva che mostra la posizione dell'affitto turistico"
loading="lazy"
allowfullscreen>
</iframe>
</div>
.map-container {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.map-container iframe {
width: 100%;
height: 100%;
border: 0;
}
Il metodo aspect-ratio è facile da mantenere perché il contenitore determina l'altezza. Se un tema più datato non lo supporta, usa un contenitore posizionato con una tecnica di padding basata su percentuale. Il principio rimane lo stesso: mantieni la larghezza fluida e dai alla mappa un'altezza prevedibile.
Tratta l'iframe come una parte delle informazioni
Una mappa incorporata non sostituisce le indicazioni scritte. Gli utenti che utilizzano screen reader e tastiera potrebbero incontrare la mappa come un documento interattivo esterno, e alcuni visitatori potrebbero avere gli script bloccati o rifiutare il consenso. Fornisci l'indirizzo completo in testo visibile, identifica l'ingresso o il punto di parcheggio e includi un percorso in linguaggio semplice.
L'aggiornamento sull'accessibilità di Google descrive il lavoro sull'Embed API riguardante l'ordine di tabulazione, l'interattività con tastiera e screen reader, le etichette di accessibilità e il contrasto. Tali modifiche sono documentate nell' aggiornamento sull'accessibilità di Google Maps, ma gli host dovrebbero comunque testare la propria pagina attorno all'iframe.
Aggiungi un title significativo, usa un aria-label conciso e rendi le istruzioni circostanti comprensibili anche senza la mappa. La guida agli standard di accessibilità WCAG è un riferimento utile quando una mappa si trova all'interno di un'esperienza informativa più ampia per l'ospite.
Usa loading="lazy" quando la mappa si trova sotto la prima schermata di contenuto. Differisce il caricamento fino a quando il visitatore non ha probabilmente bisogno del frame, il che può ridurre il lavoro non necessario per una pagina dove l'indirizzo e i dettagli di check-in dovrebbero apparire per primi.
Considerazioni su privacy e consenso per le mappe incorporate
Una mappa live è un servizio esterno caricato all'interno della tua pagina. Questo è importante perché il browser si connette all'infrastruttura di Google quando l'iframe viene caricato, anche se il visitatore non fa mai clic sulla mappa. Le FAQ di Google confermano che le mappe possono essere incorporate senza programmazione o integrazione di Google Maps Platform, ma l'assenza di codice personalizzato non elimina la necessità di valutare quali contenuti di terze parti carica il tuo sito.
Le aspettative sulla privacy variano in base alla giurisdizione e al modo in cui il tuo sistema di consenso classifica i media esterni. I siti che servono visitatori nell'UE o nel Regno Unito dovrebbero chiedere al loro consulente per la privacy o al provider di gestione del consenso se la mappa deve attendere l'autorizzazione prima di caricarsi. Non etichettare un embed come “conforme al GDPR” senza controllare il comportamento effettivo del tuo sito, la configurazione del tuo banner e le regole applicabili al tuo pubblico.
Usa un modello "click-to-load"
Un design pratico consiste nel mostrare prima un segnaposto neutro:
- Testo di posizione visibile: Visualizza l'indirizzo della proprietà e le informazioni di arrivo scritte.
- Spiegazione chiara: Dì ai visitatori che l'attivazione della mappa carica contenuti di Google.
- Controllo del consenso: Usa un pulsante come “Carica mappa interattiva”.
- Iframe differito: Inserisci l'iframe live solo dopo che il visitatore lo attiva.
- Percorso alternativo: Offri un link diretto a Google Maps per i visitatori che preferiscono lasciare la pagina.
Il segnaposto può contenere un'immagine ospitata localmente o una scheda di posizione stilizzata, a condizione che non chiami essa stessa un servizio di mappatura di terze parti. La tua piattaforma di consenso potrebbe già supportare questo modello tramite un blocco di contenuti incorporati. Su WordPress, controlla se il tuo strumento di consenso ai cookie può bloccare Google Maps fino a quando la categoria di consenso pertinente non viene accettata, invece di aggiungere un plugin per mappe non correlato e dare per scontato che i due sistemi comunichino.
Tieni traccia dei servizi utilizzati sulla pagina, della categoria di consenso assegnata alla mappa e della spiegazione mostrata ai visitatori. La documentazione di conformità per operatori dell'ospitalità può aiutarti a organizzare quel registro operativo, ma non sostituisce la consulenza legale specifica per la tua giurisdizione.
Privacy e prestazioni spesso puntano alla stessa scelta di implementazione: carica la mappa dopo che il visitatore lo ha richiesto. Ciò mantiene la pagina iniziale concentrata sulle informazioni di cui ogni ospite ha bisogno, rendendo comunque disponibile la navigazione interattiva.
Suggerimenti per le piattaforme ed errori di incorporamento comuni
Il codice di incorporamento corretto può comunque fallire se la piattaforma rimuove l'HTML, blocca gli script o si aspetta un URL invece di un iframe. Inizia dall'editor, non dalla mappa. Identifica se accetta HTML puro, un editor di testo RTF, un widget o solo un link diretto.
Per WordPress, incolla l'iframe in un blocco HTML personalizzato. L'editor visuale potrebbe rimuovere o trasformare il markup dell'iframe, specialmente quando passi da una modalità di modifica all'altra. Se il tuo tema applica regole restrittive sui contenuti, usa un blocco o plugin per mappe affidabile, ma controlla il suo comportamento in termini di privacy e i requisiti della chiave prima di abilitarlo.
Per HubSpot, il flusso di lavoro documentato utilizza un modulo di testo RTF e il suo editor di codice sorgente. Le istruzioni per l'incorporamento di Google Maps in HubSpot delineano quell'approccio basato sull'editor.
Le piattaforme di guide digitali spesso usano un modello diverso. Alcune accettano un URL di condivisione diretto di Google Maps, mentre altre forniscono un widget di posizione dove inserire coordinate o indirizzo. La piattaforma di guide digitali di ScanStay include una sezione Mappa locale per appuntare ristoranti, luoghi di interesse e bar su Google Maps; gli host dovrebbero quindi utilizzare i campi di posizione della piattaforma o le istruzioni del widget invece di incollare HTML arbitrario in un'area di testo.
Diagnostica il problema dal sintomo
| Sintomo dell'errore | Causa probabile | Soluzione |
|---|---|---|
| La mappa è vuota sul dominio live | La restrizione del referrer della chiave API esclude l'hostname | Aggiungi il dominio di produzione corretto ai referrer consentiti |
| Appare un avviso sopra la mappa | La fatturazione o la configurazione del progetto non è attiva | Controlla il progetto Google Cloud e lo stato della fatturazione |
| La mappa funziona in un editor ma non in un altro | La piattaforma rimuove il markup dell'iframe | Usa un blocco HTML personalizzato, un editor sorgente o un widget mappa nativo |
| La mappa si estende oltre lo schermo del telefono | Larghezza dell'iframe fissa o stili del contenitore mancanti | Imposta la larghezza dell'iframe al 100% e dai al suo genitore un aspect ratio responsive |
| L'area della mappa non ha un'altezza visibile | L'iframe o il contenitore sono collassati | Imposta un'altezza esplicita tramite il contenitore |
| Il contenuto non si carica su una pagina HTTPS | È coinvolta una risorsa non sicura o un reindirizzamento | Usa l'URL di incorporamento HTTPS e ispeziona la richiesta finale |
| Il codice aggiornato non appare | La cache della pagina o della CDN serve la vecchia versione | Svuota le cache pertinenti e prova in una finestra di navigazione privata |
Quando il sintomo non è ovvio, prova prima l'URL di incorporamento direttamente in un browser. Quindi controlla le restrizioni della chiave API, conferma che il progetto sia attivo, ispeziona la console del browser per errori di policy o di caricamento e verifica che le regole di sicurezza dei contenuti della pagina consentano il frame Google richiesto. Dopo aver modificato il codice, svuota le cache della pagina e della CDN prima di concludere che la correzione non abbia funzionato.
ScanStay consente agli host di inserire consigli locali, informazioni di arrivo e altre istruzioni per gli ospiti in una guida digitale mobile-friendly, con un'area Mappa locale per appuntare luoghi come ristoranti e attrazioni. Se desideri sostituire messaggi sparsi con una guida per gli ospiti accessibile tramite QR code, visita ScanStay e configura le informazioni della tua proprietà in un unico posto.