Insert a Google map
This tutorial shows you how to insert an interactive Google Maps map within a page or blog post. It's ideal for showing the location of your office, a featured development, a coverage area, etc.
The map will be interactive: the visitor will be able to zoom, pan, view Street View, etc. — without leaving your website. It also works with Bing Maps, OpenStreetMap and any provider that offers an <iframe> embed code.
What you'll achieve
A page on your site that shows a Google Maps map centered on the location you choose, with the exact address marked.
Step 1 — Generate the map code on Google Maps
- Open Google Maps in your browser.
- Search for the address or location you want to show.
- When the result appears, press Share (usually found in the side panel or below the address).
- In the dialog, choose the "Embed a map" tab.
- Choose the map size (Small, Medium, Large, Custom) and copy the HTML code that appears.
The code will look like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
If Google Maps doesn't offer you the "Embed a map" option, you might be seeing the mobile version. Open Google Maps from a computer or use the "View full version" option.
Step 2 — Turn on HTML Mode on your page
From the page or post editor:
- Go to the Content Editing tab.
- Place the cursor where you want the map to appear.
- On the toolbar, press the
</>button (last group of icons). - Confirm the warning that appears.
The editor switches to HTML code mode.
Step 3 — Paste the map code
Paste the <iframe ...> code you copied from Google Maps exactly where you want the map to appear. For example, if it's after a paragraph:
<p>Our main office is located at:</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<p>We're waiting for you Monday to Friday from 9 am to 6 pm.</p>
Step 4 — Adjust the size (optional)
If the map turns out too small or too large, modify the width and height attributes of the <iframe>.
| Value | Meaning |
|---|---|
width="600" | Fixed width in pixels |
height="450" | Fixed height in pixels |
width="100%" | Takes up all the available width (recommended for mobile) |
General recommendation:
<iframe src="..." width="100%" height="400" style="border:0;"></iframe>
This way the map adapts to any screen size (desktop, tablet, phone).
Step 5 — Save the page
- Press the
</>button to go back to the visual editor (optional). - Press Save.
- Open your website in a new tab and check that the map appears and works.
If the map doesn't appear, go back to HTML Mode and check:
- That you copied the entire
<iframe>code, including the closing</iframe>tag. - That the quotes are straight (
") and not curly (""). - That the iframe code wasn't cut off when pasting.
Alternatives to Google Maps
The same procedure works with other map services that provide an <iframe> code:
- Bing Maps: "Share > Embed a map" option.
- OpenStreetMap: "Share > HTML" option (it's free and doesn't require an account).
- Mapbox: for professional cases with custom maps.