Responsive Google Map Embed

map.css

/*
  =====================================
  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;
}

map.html

<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-MAP.md

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.

Perfect, thanks!

It worked. Thanks💻