Responsive Google Maps

May
2016
23

Copy paste the embed code from google maps (if you do not know how to do this, read here: https://support.google.com/maps/answer/144361?co=GENIE.Platform%3DDeskto...), with a div wrapper
for example:

<div class="gmap-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52085.675957140v1463994936651" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>
</div>

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

.gmap-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.gmap-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

The 56.25% padding value comes from the aspect ratio 16:9. (9/16x100 = 56.25)
original post: https://www.ostraining.com/blog/coding/responsive-google-maps/?utm_conte...

Tags: 
Cats: 
this is an arrow pointing back to the top of the page