“The content has been copied by HubSpot.”
Want to know how to embed a Google Map in HTML for your website? You’ve found the right blog post.
With tens of millions of daily users, Google Maps is by far the leading navigation and maps platform on the web. There are many ways you could implement a map on your website. For instance, you could display the location(s) of your brick-and-mortar business so users can get directions.
A well-placed map gives users some extra help and improves the overall experience of your site, which is why Google Maps makes it pretty easy to embed its maps. In this guide, we’ll show you how to make both static maps and responsive maps, and then place them on your website.
How to Embed a Google Map in HTML
Embedding a static Google map on your website boils down to finding your address, copying the embed code, and pasting the code into your HTML. Note that these maps, while interactive, are somewhat basic.
For more complex capabilities such as directions and displaying location data, you need to access the Google Maps API.
But for a simple Google map, here’s the easiest method:
1. Go to the Google Maps website.
2. Search for the location you want to feature in your embedded map.
3. Click Share. Alternatively, you can click the three horizontal lines in the top left corner and choose Share or embed map from the menu that appears.
4. Click Embed a map to see a preview of the embed. Here, you can toggle the map area, zoom, type (street map or satellite map), and size (including a custom size if you’d like)
5. When ready to embed, click Copy HTML.
6. In your HTML file, paste the embed code where you want the map to appear on the page. The code will look something like this (it may look different depending on the size your chose for your map:
<iframe src="[your unique google URL] " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
7. Save the HTML file and open the file in a web browser to view the map in action.
Here’s what our example looks like embedded on a page:
At this point, the embedded map is static — it will retain a width of 600 pixels and a height of 400 pixels, no matter what device it’s displayed on or the size of the browser window.
However, this doesn’t make for the best user experience, since many visitors, especially those on mobile devices, won’t be able to see the entire map on their screen at once. They’ll need to scroll vertically and/or horizontally to view the map.
To solve this problem, we can make our embedded map responsive with a bit of extra HTML and CSS.
How to Make a Responsive Google Map in HTML
It’s widely considered a best practice to make your pages responsive, meaning all elements rearrange and change their size to fit on their screens.
The default Google Maps embed code is not responsive, but we don’t need to change much in the code to make the map scale up or down in response to the size of the viewport.
To make a responsive Google Map in HTML, take your existing embed code and place it in your HTML document. Then, wrap the <iframe> element (which represents the map) in a container <div> with the class google-map.
<div class="google-map">
<iframe src="[your unique google URL] " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
Next, in your CSS, add the following code:
.google-map {
padding-bottom: 50%;
position: relative;
}
.google-map iframe {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
}
Here’s the result. The map will scale proportionally to the size of your browser.
In the CSS, the padding-bottom property is what sets the height of the map. You can change the height by changing the percentage value of padding-bottom.
Embed a Google map, the easy way.
By following the above steps, even a novice site owner can place a basic or responsive Google map onto a website. They’re great for “about” or “contact” pages, and provide visitors with a bit more context about your business, meaning a greater chance of conversion.
