Making Google Map Embeds Responsive

This tip originally comes from Amit Agarwal on http://www.labnol.org/.

To make a Google Map responsive, first wrap your <iframe> Google Map embed code with a new <div> tag like so:

<div class='google-map'>
YOUR GOOGLE MAP EMBED HERE
</div>

Then, go to Admin Custom CSS and add the following CSS.

.google-map {
position:relative;
padding-bottom:75%; /* This is the aspect ratio */
height:0;
overflow:hidden;
}

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

Your map should be responsive after this.

Updated June 28, 2023 16:09