How to Embed a Google Map Using the Odoo Embed Code Module
Copy the iframe embed code from Google Maps, open your Odoo Website editor, drag the Embed Code block from the Dynamic Content section onto your page, paste the iframe into the block's editor, and...
To embed a Google Map in Odoo using the built-in Embed Code module, first get the iframe snippet from Google Maps, then add the Embed Code block to your page in the Website editor and paste the code. The map renders on the live site without any custom development.
How the Embed Code Block Works
The Embed Code block is a core Odoo Website feature. It stores any HTML snippet you paste into it. When a visitor loads the page, Odoo renders that snippet directly in the page layout. No server-side processing happens. The block acts as a container for raw HTML, including iframes, scripts, or custom styles.
This block is perfect for third-party integrations like Google Maps, YouTube videos, or booking widgets. You do not need to edit template files or write Python code. The block respects the page's responsive grid. You can place it inside columns, sections, or any container.
Odoo does not sanitize the snippet. So you can paste any valid HTML. But be careful. Malicious code could break your site. Always paste code from trusted sources like Google Maps.
Prerequisites
- An Odoo instance with the Website app installed (standard in Odoo Online, Odoo.sh, and on-premise).
- Editor access to the page where you want the map.
- A Google Maps embed link — no API key is required for the basic "Embed a map" iframe.
Step-by-Step Walkthrough (with Source Pack Details)
- Get the Google Maps embed code. Open Google Maps in a browser, search for the address or place, click Share → Embed a map, choose a size (small, medium, large, or custom), then click Copy HTML. The clipboard now holds an
<iframe>tag. - Log in to your Odoo account and access the "Website" module. From the dashboard, click Website. Then navigate to the page you wish to edit and click the Edit button to open the editing panel.
- Locate the Embed Code module. In the editing panel, scroll through the Blocks panel until you reach the Dynamic Content section. The block is labeled Embed Code.
- Drag the block onto the page. Drop it where you want the map to appear — inside a column, a section, or directly on the grid.
- Once the module is placed, click on the "Edit" button located in the right panel to input the code. A pop-up window appears.
- In the pop-up window that appears, paste the code snippet provided by Google Maps into the designated area, then click "Save" to apply the changes. The block now contains the iframe.
- Optional: Adjust visibility. Still in the right panel, open the Visibility section. You can enable Hide on Desktop or Hide on Mobile if the map should only show on certain devices. Click Save again.
- Publish. Exit the editor and click Publish (or Save if the page is already live). Visit the front-end URL to confirm the map loads.
Getting a Clean Google Maps Iframe
The "Embed a map" dialog produces an iframe with a fixed width and height. For responsive layouts, replace the pixel dimensions with width="100%" and a reasonable height (e.g., height="400"). Example:
<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>Adding loading="lazy" defers the map until the visitor scrolls near it, improving page-speed scores.
Common Issues and Quick Fixes
- Map shows "This page can't load Google Maps correctly." The iframe src may be truncated. Recopy the full embed code from Google Maps; the URL is long and easy to cut off.
- Map is too small or overflows on mobile. Ensure the iframe has
width="100%"and the parent column/section has no fixed pixel width that forces overflow. - Block not found in Dynamic Content. In Odoo 17+, the block is still called Embed Code. If you use a custom theme that hides core blocks, check the theme's block list or temporarily switch to the default theme to verify.
- HTTPS mixed-content warning. Google Maps embed URLs are HTTPS. If your Odoo site runs HTTP locally (e.g.,
localhost), the browser may block the iframe. Use a valid domain with SSL for testing.
Practical Scenarios for Using the Embed Code Block
Contact page – Show your office location. Drop the map near the contact form. Visitors can see exactly where you are.
Event page – Embed a map of the venue. Attendees can get directions without leaving your site.
Store locator – If you have one location, a static embed works fine. For multiple locations, you need a custom solution.
Real estate listing – Place a map of the property. Use Street View if available.
Tourist info page – Show points of interest. Use multiple embed blocks for different places.
Limitations and When to Use a Custom Module
- No dynamic markers or routes. The static iframe shows one location. For multiple markers, directions, or custom styling you need the Maps JavaScript API and a custom module.
- No server-side control. The iframe loads entirely from Google; you cannot filter map layers or restrict zoom from Odoo.
- Cookie consent. The iframe sets Google cookies. If you run a strict GDPR banner, the map may not load until the visitor accepts marketing/analytics cookies.
- Rate limits. The free embed endpoint is generous but not unlimited. High-traffic sites (millions of map loads/month) should migrate to the Maps JavaScript API with a billing account.
| Need | Recommended approach | Effort |
|---|---|---|
| Single static location, zero code | Embed Code block + Google Maps iframe (this article) | Low |
| Multiple locations, filterable list | Custom Odoo module using Maps JavaScript API | Medium–High |
| Directions button, custom pins, clustering | Maps JavaScript API + custom widget | High |
| Store locator with geolocation | Dedicated store-locator module (OCA/web_widget_google_maps or third-party) | Medium |
Key Facts
| Item | Detail |
|---|---|
| Odoo block name | Embed Code |
| Block location | Blocks panel → Dynamic Content |
| Configuration step | Click Edit in right panel → paste iframe → Save |
| Visibility options | Hide on Desktop, Hide on Mobile |
| Google Maps source | Share → Embed a map → Copy HTML |
| API key required | No (for basic embed iframe) |
| Responsive tip | Set iframe width="100%" and fixed height |
Frequently Asked Questions
Do I need a Google Cloud API key for the basic embed?
No. The "Embed a map" iframe works without an API key. Keys are only required for the Maps JavaScript API, Geocoding API, or Places API.
Can I embed a Street View panorama instead of a map?
Yes. In Google Maps, open Street View, click Share → Embed a map, and copy that iframe. The same Embed Code block handles it.
Why does the map not appear in the backend editor preview?
Odoo's editor sometimes sanitizes iframes in the live preview. Publish the page and view the front-end URL; the map will render there.
How do I center the map on a coordinate instead of an address?
In Google Maps, right-click the exact spot → "What's here?" → copy the latitude/longitude from the bottom card → search for those coordinates → Share → Embed a map.
Can I restrict the map to certain zoom levels?
Not with the embed iframe. The Maps JavaScript API supports minZoom and maxZoom options, which require a custom module.
Will the embed code survive Odoo upgrades?
Yes. The Embed Code block is a core Website feature. Your pasted iframe is stored in the page content (ir.ui.view) and is preserved across version upgrades.
What if I need the map inside a product page or contact form template?
Edit the relevant QWeb template (e.g., website_sale.product or website.contact) in Developer Mode, drop an <iframe> directly in the XML, or create a computed field that returns the iframe HTML and render it with t-out="0". That goes beyond the no-code Embed Code block.
Can I embed multiple maps on one page?
Yes. Drag multiple Embed Code blocks onto the page. Each block holds one iframe. Make sure the iframe src includes unique place IDs to avoid duplicates.
Does the map work on mobile devices?
Yes. The iframe is responsive if you set width="100%". Google Maps adjusts the view automatically for small screens.
How do I make the map load faster?
Add loading="lazy" to the iframe. Also, set a low-res placeholder image until the map loads. But the embed code does not support custom placeholders.
Further reading and comparison sources
These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.
Further reading and comparison sources
These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.
Learn more
Visit the website for more information.