How to Embed Google Map in HTML [Step-By-Step Guide]

Download Now: 25 Free HTML & CSS Hacks
Jamie Juviler
Jamie Juviler

Published:

Want to know how to embed a Google Map in HTML for your website? You’ve found the right blog post.

person learning how to embed a google map in HTML

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.

Download Now: 50 Code Templates [Free Snippets]

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.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

50 Free Coding Templates

Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.

  • Navigation Menus & Breadcrumbs Templates
  • Button Transition Templates
  • CSS Effects Templates
  • And more!
Loading your download form

You're all set!

Click this link to access this resource at any time.

Download Now
Learn more

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.

the share button on the google maps interface

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)

the embed a map menu in google maps

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:

See the Pen google maps in HTML by HubSpot (@hubspot) on CodePen.

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.

See the Pen google maps in HTML: responsive by HubSpot (@hubspot) on CodePen.

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.

If you’re just getting started with HTML and want to learn more, be sure to check out our free guide to HTML and CSS, linked below.

New Call-to-action

Topics: HTML

Related Articles

Pop up for DOWNLOAD NOW: 25 FREE HTML & CSS HACKS 25 FREE HTML & CSS HACKS

Tangible tips and coding templates from experts to help you code better and faster.

    CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

    START FREE OR GET A DEMO