Step 1. Find the place on Google Maps
Open Google Maps on a computer and search for your business by name. If your business has a Google Business Profile, embed that: the map will then show the name, rating and a directions button rather than just a pin at an address. If the profile isn’t verified yet, the article on verifying your Business Profile will help.
Step 2. Copy the code
- In the place card, click Share. If you just need a section of the map without the card, open the menu at the top left and choose Share or embed map.
- Switch to the Embed a map tab.
- If you like, pick a size and move the map so the place is centred.
- Click Copy HTML.
You’ll get code like <iframe src="https://www.google.com/maps/embed?pb=…"></iframe>.
Step 3. Add the code to your site
Paste the code where you want it on the page. Most visual editors have an HTML mode or a dedicated code block for this. Note that some editors and CMS filters strip iframe tags for security reasons. If the map is missing after saving, check the text filter settings for your user group.
Step 4. Make the map responsive
The code from Google Maps has a fixed width, such as width="600". On a phone, a map like that overflows the screen. The simplest fix is to change the width to 100%:
<iframe src="https://www.google.com/maps/embed?pb=…"
width="100%" height="400" style="border:0;"
loading="lazy" referrerpolicy="no-referrer-when-downgrade"
title="Our office on the map"></iframe>
The loading="lazy" attribute delays loading the map until the visitor scrolls to it, which speeds up the page. The title attribute lets screen readers name the map.
How to embed directions
Get directions in Google Maps, choose a route, then click Share → Embed a map → Copy HTML. It’s a handy way to show, for example, how to reach your office from the station or car park.
When you can’t do without an API key
A map from Share is fine for one location or one route. You need a Google Maps Platform key if you want to:
- show several branches or locations on one map with your own markers;
- suggest addresses as people type in an order or delivery form;
- calculate distance or delivery cost;
- style the map in your brand colours.
For embedding maps via the API, Google offers the Maps Embed API: according to Google, all its requests are free with unlimited usage. The other APIs are paid beyond the free allowance, so keys are restricted to your domain and costs are monitored.
Privacy. An embedded map loads from Google’s servers and may set cookies. On sites for EU visitors, this is reflected in the cookie banner and privacy policy — for example, by showing the map after consent or on click.
Common mistakes
- A pin at an address is embedded instead of the Business Profile — customers don’t see the name or reviews.
- A fixed width breaks the layout on phones.
- The map is on every page of the site — unnecessary loading; the Contact page is enough.
- A screenshot instead of a real map — you can’t get directions from it.
In short
- Find your business on Google Maps, ideally its Business Profile.
- Share → Embed a map → Copy HTML.
- Paste the code in your editor’s HTML mode.
- Change the width to 100% and keep
loading="lazy".
- For multiple locations, address suggestions and delivery calculations, you need an API key.
If you need a map with several locations, address suggestions in forms or directions to a customer, we can connect Google Maps to your website via the API: set up access, secure the key and cap the costs.
