Embedding a Google Map on a web page can be done in a few different ways, depending on your needs. The simplest and most common method is to use an iframe with a map generated through the Google Maps website. This is the method we recommend if you are setting up Location Pages on your website to target different parts of the UK (or, indeed, any country). You don’t need any coding or technical knowledge to do this so it’s simple and also free!
If you want to be able to customise your map with markers and interactions then there is a more advanced method using the Google Maps JavaScript API but you will most likely need a web developer to do this for you.
We’ve given step-by-step instructions for both of these methods below.
Method 1: Embed Google Maps Using an iframe
Steps:
- Go to Google Maps:
- Visit https://maps.google.com
- Search for a Location:
- Type an address or place name in the search bar.
- Click the “Share” Button:
- It’s located in the sidebar (desktop) or in the location info card.
- Choose “Embed a map”:
- In the share window, click on the tab called “Embed a map”.
- Copy the HTML iframe Code:
- Choose the map size from the dropdown (Small, Medium, Large, Custom size).
- Copy the iframe code shown, which will look something 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>
- Paste into Your HTML File:
- Insert the iframe code in your web page where you want the map to appear.
- Example:
<html> <body> <h2>Our Location</h2> <div> <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> </div> </body> </html>
Method 2: Embed with Google Maps JavaScript API
If you want to customise the map (zoom, markers, interactivity), you can use the Google Maps JavaScript API.
Steps:
- Get an API Key:
- Go to https://console.cloud.google.com
- Create a project → Enable “Maps JavaScript API” → Generate an API key.
- Include the API Script in HTML:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> - Create the HTML and JS to Load the Map:
<html> <head> <title>Google Map Example</title> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <h3>My Google Map</h3> <div id="map"></div> <script> function initMap() { const location = { lat: 37.7749, lng: -122.4194 }; // Example: High Wycombe const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: location, }); const marker = new google.maps.Marker({ position: location, map: map, }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer> </script> </body> </html>
Established as an SEO specialist since 2009, after a career as a software engineer in the oil industry and investment banking. Michelle draws on her technical experience to develop best-practice processes for implementing successful SEO strategies. Her pro-active approach to SEO enables businesses to reach new audiences, both nationally and internationally. She has a wealth of cross-industry experience from startups to Fortune 500 companies.
