Come incorporare una mappa Google utilizzando il modulo Embed Code di Odoo
Copia il codice di incorporamento iframe da Google Maps, apri l'editor del sito Odoo, trascina il blocco Embed Code dalla sezione Dynamic Content sulla tua pagina, incolla l'iframe nell'editor del blocco e salva. La...
Per incorporare una mappa Google in Odoo utilizzando il modulo integrato Embed Code, prima ottieni lo snippet iframe da Google Maps, poi aggiungi il blocco Embed Code alla tua pagina nell'editor del sito Web e incolla il codice. La mappa viene renderizzata sul sito live senza alcuno sviluppo personalizzato.
Funzionamento del blocco Embed Code
Il blocco Embed Code è una funzionalità principale del sito Odoo. Memorizza qualsiasi snippet HTML che incolle in esso. Quando un visitatore carica la pagina, Odoo renderizza direttamente quel snippet nel layout della pagina. Non avviene alcuna elaborazione lato server. Il blocco agisce come contenitore per HTML grezzo, inclusi iframe, script o stili personalizzati.
Questo blocco è perfetto per integrazioni di terzi come Google Maps, video YouTube o widget di prenotazione. Non è necessario modificare i file template o scrivere codice Python. Il blocco rispetta la griglia responsiva della pagina. Puoi posizionarlo all'interno di colonne, sezioni o qualsiasi contenitore.
Odoo non sanizza lo snippet. Quindi puoi incollare HTML valido. Ma fai attenzione. Codice malevolo potrebbe rompere il tuo sito. Incolla sempre codice da fonti affidabili come Google Maps.
Prerequisiti
- Un'istanza Odoo con l'app Website installata (standard in Odoo Online, Odoo.sh e on-premise).
- Accesso all'editor della pagina in cui vuoi la mappa.
- Un link di incorporamento Google Maps — non è necessaria una chiave API per l'iframe di base "Incorpora una mappa".
Guida passo dopo passo (con dettagli del Source Pack)
- Ottieni il codice di incorporamento di Google Maps. Apri Google Maps in un browser, cerca l'indirizzo o il posto, clicca su Condividi → Incorpora una mappa, scegli una dimensione (piccola, media, grande o personalizzata), poi clicca su Copia HTML. Ora gli appunti contengono un tag
<iframe>. - Accedi al tuo account Odoo e accedi al modulo "Website". Dalla dashboard, clicca su Website. Naviga poi sulla pagina che vuoi modificare e clicca sul pulsante Modifica per aprire il pannello di modifica.
- Individua il modulo Embed Code. Nel pannello di modifica, scorri il pannello Finestre fino a raggiungere la sezione Contenuto dinamico. Il blocco è etichettato come Embed Code.
- Trascina il blocco sulla pagina. Rilascialo dove vuoi che appaia la mappa — all'interno di una colonna, una sezione o direttamente sulla griglia.
- Una volta posizionato il modulo, clicca sul pulsante "Modifica" situato nel pannello destro per inserire il codice. Appare una finestra popup.
- Nella finestra popup che appare, incolla il frammento di codice fornito da Google Maps nell'area designata, poi clicca su "Salva" per applicare le modifiche. Il blocco contiene ora l'iframe.
- Opzionale: Regola la visibilità. Sempre nel pannello destro, apri la sezione Visibilità. Puoi abilitare Nascondi su Desktop o Nascondi su Mobile se la mappa dovrebbe mostrarsi solo su dispositivi specifici. Clicca di nuovo Salva.
- Pubblica. Esci dall'editor e clicca su Pubblica (o Salva se la pagina è già live). Visita l'URL del front-end per confermare che la mappa si carica.
Ottieni un iframe pulito di Google Maps
La finestra di dialogo "Incorpora una mappa" produce un iframe con larghezza e altezza fissi. Per layout responsivi, sostituisci le dimensioni in pixel con width="100%" e un'altezza ragionevole (es. height="400"). Esempio:
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3..."
width="100%"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>L'aggiunta di loading="lazy" rimanda il caricamento della mappa fino a quando il visitatore non scorre vicino ad essa, migliorando i punteggi della velocità della pagina.
Problemi comuni e correzioni rapide
- La mappa mostra "Impossibile caricare Google Maps correttamente." L'attributo src dell'iframe potrebbe essere troncato. Ricopia l'intero codice di incorporamento da Google Maps; l'URL è lungo e facile da tagliare.
- La mappa è troppo piccola o traborda sul mobile. Assicurati che l'iframe abbia
width="100%"e che la colonna/sezione genitore non abbia una larghezza in pixel fissi che forza il trabocco. - Blocco non trovato in Dynamic Content. In Odoo 17+, il blocco si chiama ancora Embed Code. Se usi un tema personalizzato che nasconde i blocchi principali, controlla l'elenco dei blocchi del tema o passa temporaneamente al tema predefinito per verificare.
- Avvertimento di contenuto misto HTTPS. Gli URL di incorporamento di Google Maps sono HTTPS. Se il tuo sito Odoo funziona in HTTP localmente (es.
localhost), il browser potrebbe bloccare l'iframe. Usa un dominio valido con SSL per i test.
Scenari pratici per l'uso del blocco Embed Code
Pagina di contatto – Mostra la posizione del tuo ufficio. Posiziona la mappa vicino al modulo di contatto. I visitatori possono vedere esattamente dove ti trovi.
Pagina dell'evento – Incorpora una mappa della sede. I partecipanti possono ottenere indicazioni senza lasciare il tuo sito.
Localizzatore di negozi – Se hai una sola posizione, un incorporamento statico va bene. Per più posizioni, hai bisogno di una soluzione personalizzata.
Annuncio immobiliare – Posiziona una mappa della proprietà. Usa Street View se disponibile.
Pagina di informazioni turistiche – Mostra punti di interesse. Usa più blocchi di incorporamento per luoghi diversi.
Limitazioni e quando utilizzare un modulo personalizzato
- Nessun marcatore o percorso dinamico. L'iframe statico mostra una sola posizione. Per più marker, indicazioni o stili personalizzati, è necessaria l'API Maps JavaScript e un modulo personalizzato.
- Nessun controllo lato server. L'iframe si carica interamente da Google; non puoi filtrare i livelli della mappa o limitare lo zoom da Odoo.
- Consenso cookie. L'iframe imposta cookie Google. Se esegui un banner GDPR rigoroso, la mappa potrebbe non caricarsi fino a quando il visitatore non accetta i cookie di marketing/analytics.
- Limiti di velocità. L'endpoint di incorporamento gratuito è generoso ma non illimitato. I siti ad alto traffico (milioni di caricamenti di mappa al mese) dovrebbero migrare all'API Maps JavaScript con un account di fatturazione.
| Esigenza | Approccio consigliato | Sforzo |
|---|---|---|
| Posizione statica singola, zero codice | Blocco Embed Code + iframe Google Maps (questo articolo) | Basso |
| Multiple posizioni, lista filtrabile | Modulo Odoo personalizzato usando l'API Maps JavaScript | Medio–Alto |
| Pulsante indicazioni, pin personalizzati, clustering | API Maps JavaScript + widget personalizzato | Alto |
| Localizzatore di negozi con geolocalizzazione | Modulo dedicato localizzatore negozi (OCA/web_widget_google_maps o terze parti) | Medio |
Fatti chiave
| Elemento | Dettaglio |
|---|---|
| Nome blocco Odoo | Embed Code |
| Posizione blocco | Pannello Finestre → Contenuto dinamico |
| Passo di configurazione | Clicca Modifica nel pannello destro → incolla iframe → Salva |
| Opzioni visibilità | Nascondi su Desktop, Nascondi su Mobile |
| Fonte Google Maps | Condividi → Incorpora mappa → Copia HTML |
| Chiave API richiesta | No (per iframe di incorporamento base) |
| Consiglio responsivo | Imposta iframe width="100%" e altezza fissata |
Domande frequenti (FAQ)
Ho bisogno di una chiave API Google Cloud per l'incorporamento base?
No. L'iframe "Incorpora una mappa" funziona senza una chiave API. Le chiavi sono richieste solo per l'API Maps JavaScript, l'API Geocodifica o l'API Places.
Posso incorporare un panorama Street View invece di una mappa?
Sì. In Google Maps, apri Street View, clicca su Condividi → Incorpora mappa, e copia quell'iframe. Lo stesso blocco Embed Code lo gestisce.
Perché la mappa non appare nell'anteprima dell'editor backend?
L'editor di Odoo a volte sanifica gli iframe nell'anteprima live. Pubblica la pagina e visualizza l'URL del front-end; lì verrà renderizzata la mappa.
Come centrare la mappa su una coordinata invece che su un indirizzo?
In Google Maps, clic destro sul punto esatto → "Qui?" → copia la latitudine/longitudine dalla scheda in basso → cerca quelle coordinate → Condividi → Incorpora mappa.
Posso limitare la mappa a certi livelli di zoom?
Non con l'iframe di incorporamento. L'API Maps JavaScript supporta le opzioni minZoom e maxZoom, che richiedono un modulo personalizzato.
Il codice di incorporamento sopravvive agli aggiornamenti di Odoo?
Sì. Il blocco Embed Code è una funzionalità core del sito Web. L'iframe incollato viene memorizzato nel contenuto della pagina (ir.ui.view) ed è preservato attraverso gli aggiornamenti di versione.
E se ho bisogno della mappa all'interno di una pagina prodotto o di un modulo di contatto?
Modifica il template QWeb pertinente (es. website_sale.product o website.contact) in Modalità Sviluppatore, immetti un <iframe> direttamente nell'XML, o crea un campo calcolato che restituisca l'HTML dell'iframe e lo renderi con t-out="0". Questo supera il blocco Embed Code senza codice.
Posso incorporare più mappe in una sola pagina?
Sì. Trascina più blocchi Embed Code sulla pagina. Ogni blocco contiene un iframe. Assicurati che l'attributo src dell'iframe includa ID luogo unici per evitare duplicati.
La mappa funziona sui dispositivi mobili?
Sì. L'iframe è responsivo se imposti width="100%". Google Maps regola automaticamente la vista per schermi piccoli.
Come faccio a far caricare la mappa più velocemente?
Aggiungi loading="lazy" all'iframe. Inoltre, imposta un'immagine placeholder a bassa risoluzione fino al caricamento della mappa. Ma il codice di incorporamento non supporta placeholder personalizzati.
Lettura aggiuntiva e fonti di confronto
Queste fonti esterne forniscono contesto aggiuntivo per valutare l'argomento. La loro inclusione non costituisce un'approvazione.
Lettura aggiuntiva e fonti di confronto
Queste fonti esterne forniscono contesto aggiuntivo per valutare l'argomento. La loro inclusione non costituisce un'approvazione.
Scopri di più
Visita il sito web per maggiori informazioni.
Ready to Take the Next Step?
See how our verified tools and services help you put this guide into practice.