Skip to content

Instantly share code, notes, and snippets.

@profstein
Last active July 26, 2021 10:32
Show Gist options
  • Save profstein/50e3c121f6adcb85c17f to your computer and use it in GitHub Desktop.
Save profstein/50e3c121f6adcb85c17f to your computer and use it in GitHub Desktop.
Responsive Google Map Embed
/*
=====================================
CSS for <iframe> embedded Google Map
=====================================
*/
.mapWrapper {
position: relative;
/*
Do math with the height of your iframe divided by the width, then converted to percent
In this example the height is 400 and the width is 600
400 / 600 = .66666667
which is 66.6666667% */
padding-bottom: 66.6666667%;
height: 0;
}
.mapWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* This sets an overlay element that covers the map and helps prevent people from zooming the map while scrolling. */
.overlay {
background:transparent;
position:relative;
width:100%;
height:100%;
z-index: 1;
}
<div class="mapWrapper">
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3023.9704865667854!2d-74.0118683!3d40.7186662!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a1e0db46837%3A0x97328f4c4e77998f!2s199+Chambers+St%2C+New+York%2C+NY+10007!5e0!3m2!1sen!2sus!4v1414997345912" width="600" height="400" frameborder="0" style="border:0"></iframe>
</div> <!-- end .mapWrapper-->

Responsive Google Maps Embed

This HTML and CSS shows how to embed a Google Map so that it is responsive and resizes with the window. To use it in your project you need to change two things:

  1. The iframe in the map.html on line 2. You would copy and paste this from the Google Map you wanted to embed
  2. The padding bottom on line 13 of map.css Read the instructions on lines 9–12 of that file.
@cesarkohl
Copy link

Perfect, thanks!

@jukomol
Copy link

jukomol commented Sep 11, 2019

It worked. Thanks💻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment