Responsive Google Maps

Create Responsive Google Maps on Any Website.

(Image Source - Google Images)

Google Maps makes it easy to insert/embed a map into your own website.

However, by default, Google Maps does not provide responsive support.

In my Blog, I will show you how to make your maps responsive, using just a few lines of CSS.

This technique will work on any website platform.

1. Get the embed code from Google Maps

• Go to Google Maps.
• Find the area of the map you want to use on your website.
• Click on the "Share" link.

(Image Source - Google Images)

• Choose "Embed map".
• Select the iframe code.
• Right-click and copy the embed code.

(Image Source - Google Images)

2. Use the Google Maps Embed Code

Paste the embed code on your website. It will look similar to this:

<iframe src="/" width="600" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

2.1.Modify the Embed Code

Add a div tag around the embed code. Use the CSS class (map-responsive) that responds to the map so that your code now looks like this:

<div class="map-responsive">

    <iframe src="/" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

3. Add your CSS from Google Maps

Now add some CSS properties inside one of your stylesheet files:

.map-responsive{

    overflow:hidden;

    padding-bottom:50%;

    position:relative;

    height:0;

}

.map-responsive iframe{

    left:0;

    top:0;

    height:100%;

    width:100%;

    position:absolute;

}

Your maps will now be responsive. Try resizing your browser to see it in action.