How to Embed Google Maps on Your Website and in WordPress

To embed Google Maps on your website, open the place in Google Maps, click Share, switch to Embed a map and click Copy HTML. Then paste that code into your page where the map should appear. In WordPress that's a Custom HTML block, in Elementor the HTML widget. This way of embedding a map is free and needs no API key.

Below are the exact steps, how to paste the code in WordPress and Elementor, how to show several locations on one map, and how to give each location page its own map when you have many of them.

Copy the embed code from Google Maps

1. Open Google Maps on a computer and search for your business name or address.
2. Click Share in the panel that opens for the place. You can also open the Menu at the top left and click Share or embed map.
3. Switch to the Embed a map tab.
4. Click Copy HTML.

The code you copied is an iframe: a small window on your page that loads the map from Google. Directions work the same way. Open the route in Google Maps, click Share, then Embed a map and Copy HTML.

Google's help lists a few maps you can't share or embed: a map of your saved places, a map with a distance measurement, and an image of the map itself.

Paste the code into your website

Paste the code into your page's HTML at the spot where the map should appear, save, and reload the page. Most website builders have a block or element for this, usually called HTML, Embed or Custom code.

WordPress block editor

1. Open the page and click where the map should go.
2. Type `/html` and press Enter to add a Custom HTML block.
3. Click Edit HTML, paste the code and click Update.
4. Save the page and open it to check the map.

In the classic editor, paste the code in the Text tab. The Visual tab shows it as text instead of a map.

Elementor

Elementor has two widgets for maps, and both come with the free version. The HTML widget takes the code from Google Maps as it is. The Google Maps widget only asks for a location, such as an address, and lets you set the zoom and height. Elementor's help says that widget needs a Google Maps API key, which you paste under Elementor > Settings > Integrations in the Google Maps Embed API field.

Other page builders have a code or HTML element that works the same way as the HTML widget.

Make the map fit on phones

The code from Google has a fixed width in pixels, such as `width="600"`. On a phone screen that's narrower than the map, it sticks out of the page. Change the value to `width="100%"` and keep the height. The map then fills the column it sits in, on any screen.

Show several locations on one map

The code from Share shows one place or one route. To show all your branches or job sites on one map, use Google My Maps:

1. Create a map in My Maps and add a pin for each location.
2. Make the map public in its sharing settings. Google's help says the embed only works for a public map.
3. In the left panel, click Share or the menu, then Embed on my site, and copy the code.

Use the Maps Embed API when the place changes

The code from Share always shows the place you picked when you copied it. When the place should come from text you control, for example one map per town or office, use Google's Maps Embed API. It's an iframe too, but its address takes the place as plain text. It starts with `google.com/maps/embed/v1/place`, followed by `?key=YOUR_API_KEY&q=` and the place, written like Google's example `Eiffel+Tower,Paris+France`.

Google says the Maps Embed API is free to use with unlimited requests, and every request needs an API key. You create the key in a Google Cloud project and turn on the Maps Embed API for it. Google recommends restricting the key, for example to your own website, so nobody else can use it. Besides places, the API can show directions, Street View, a plain map view and search results.

Add a map to every location page

If your site has one page per town or branch, adding a map to each page by hand takes a while and is easy to get wrong. With a template page, you write the map once and let each page fill in its own place.

This is how it works with LPagery, the WordPress plugin we make for creating pages from a spreadsheet. The free version from wordpress.org is enough for this.

1. Add a column to your spreadsheet for the map, for example `map_query`, and write each place the way Google's example does, such as `Lake+Oswego,OR`.
2. In your template page, add a Custom HTML block with the Maps Embed API iframe and put `{map_query}` right after `q=`. In Elementor, you can type the placeholder into the Google Maps widget's Location field instead.
3. Create the pages from the spreadsheet. LPagery fills in the placeholder on each page, so every page shows its own map.

The free version uses up to three placeholder columns, so the map column counts as one of them. For the full walkthrough with screenshots, see how to create service area pages in WordPress. If you create the pages with LPagery's Radius input, available from the Standard plan, every town also comes with `{latitude}` and `{longitude}` columns you can use for the map. More about the plugin on the LPagery Bulk Page Generator page.

Does an embedded Google Map help SEO?

Not on its own, as far as Google's documentation goes. Google says local results are mainly based on relevance, distance and popularity, and its explanation of those three is about your Business Profile and how well known your business is. A map on your website isn't part of it.

The map is there for visitors: it shows where you are and gets them directions in one tap. Write your address as text next to it too, so people can copy it and search engines can read it without the map. To improve how you rank in Maps, start with our guide to ranking higher in Google Maps and add local business schema to your site. Our free Google Maps rank checker shows where you rank today.

The map disappears after I save the page

WordPress removes iframe code for users who aren't allowed to post unfiltered HTML. WordPress's documentation gives a Contributor as an example: when that user saves a page, the iframe is stripped from the Custom HTML block. Ask an administrator to add the map.

The code shows up as text on the page

The code went into a normal paragraph block or the classic editor's Visual tab, and both show it as text. Delete it there and paste it into a Custom HTML block or the Text tab.

The map is cut off on phones

The iframe still has a fixed width. Change it to `width="100%"` as described above.

The Elementor map or Maps Embed API map doesn't load

Both need a working API key. Check that you pasted the whole key, that the Maps Embed API is turned on in the Google Cloud project the key belongs to, and, if you restricted the key to certain websites, that your domain is on that list.

FAQ

Is it free to embed Google Maps?

Yes. The code from Share and Embed a map costs nothing and needs no API key. The Maps Embed API is free with unlimited requests too, but it needs a key. Google's other Maps APIs have their own pricing.

Can I embed my Google Business Profile on my website?

Yes. Search for your business name in Google Maps, open your business, and use Share, Embed a map and Copy HTML. The embedded map then shows your business.

Do I need a plugin to embed Google Maps in WordPress?

No. A Custom HTML block in WordPress or the HTML widget in Elementor is all you need. A map plugin only helps when you want more than an embedded map can show, such as a store locator.

About the Author

Jonas Lindemann

I've worked in SEO for more than ten years and helped over 100 businesses rank higher, mostly local businesses, e-commerce stores and SaaS companies. As co-founder of LPagery I work on local SEO, programmatic SEO and AI search visibility, and I test the strategies in these articles on our own sites and with our customers.