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

by | February 26, 2021 | CSS, Website Development

This page may contain affiliate links to recommended products or services. If you choose to purchase after clicking a link, I may receive a commission at no additional cost to you.

Last updated on: February 7, 2023

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?

Using a little bit of CSS and HTML you can give an embedded Google Map a responsive appearance.

Styling the map itself is out of the question because it’s inside of an iframe. However, you can wrap the iframe in a container div and use CSS to style the container and the iframe itself — it’s pretty simple.

Adding a Google Map to Your Website

Choose a Map

First, get 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.

Floyd Hartford is a website developer from southern Maine. He's focused on creating and building WordPress websites and loves spending time digging into code like HTML, CSS, scss, jQuery, PHP, and MySQL.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

10 + fifteen =

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Looking for WordPress Help?

I’m a freelance web developer specializing in small business and corporate marketing websites.

Pin It on Pinterest