How to Use CSS to Embed Responsive Google Maps on Your Website

How to Use CSS to Embed Responsive Google Maps on Your Website

In this article, let's learn how to use CSS to embed responsive Google Maps on your website.

Out-of-the-box, Google Maps embeds come as fixed sized iFrame HTML elements. That means there's a defined height and width that doesn't change. It's really easy to copy+paste the embed code on your website, but it's not going to resize for mobile-browsers or different screen sizes, so it can cause a problem – especially since most modern websites are responsive to screen size. Non-responsive elements create poor user experiences and look bad, too. Like, why would you have everything on your website working perfectly except that map?

The good news is you can use a little bit of CSS and HTML markup to give an embedded Google Map a responsive appearance.

If you're familiar with iframes then you know you can't use CSS to style what's inside of the iframe from outside of the iframe. Styling the map itself is out of the question. However, you can wrap the iframe in a container div and use CSS to style the container and the iframe itself – sounds like a lot, but it's pretty simple.

Adding a Google Map to Your Website

Choose a Map

First, get yourself a Google Map you'd like to embed.

  • Go to Google Maps
  • Search for the location you want to embed
  • Click the Share link

Get the Embed Code

Clicking the Share link opens a pop-up where you can get the Embed a map code.

Add the Code

Next, add the map's embed code to your web page and wrap it with a containing div HTML element like this:

<div class="map-container">

  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13004078.75648254!2d-104.6568059439823!3d37.275602428659404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited%20States!5e0!3m2!1sen!2sus!4v1614377791913!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
  
</div><!-- closing of div.map-container -->

Notice that what you copied from google is only an iframe that looked something like this:

<iframe src="[specific-location-url]" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

We've taken it an extra step and wrapped it inside of a div, using opening and closing div tags, with the CSS class of map-container.

<div class="map-container">
	...iframe embed code goes here...
</div>

Styling the Map

Last, but not least – you need to sprinkle on some CSS to style the map's container and iframe. Add these styles to your website's CSS stylesheet.

.map-container {
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
    height: 0;
}

.map-container iframe {
    position:absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

Here, the containing div acts as a viewport for the map. Specifying zero height and 56.25% padding-bottom gives the container a responsive aspect ratio of 16:9. Regardless of the width of the container – which is currently going to fill 100% of wherever it is on the screen – it will have a relative height that is 56.25% of how wide it is.

Inside, the iframe has been set to fill the space. It will always fill 100% of the container's width and 100% of the container's height, so just like the container div it will display with an aspect ratio of 16:9 – responsively resizing to fit your screen.

Try it Out

The embedded Google Map on your website should now be responsive. Test resizing your web browser to try it out.