Menu
I am trying to add a Google Map to my design, that is supposed to be responsive. I've used the same code that works out for images... But for some reason, the map's iframe resizes with dimensions I didn't pick.
HTML
<iframe src="http://maps.google.com/maps/ms?vpsrc=6&ctz=-480&ie=UTF8&msa=0&msid=210840796990572645528.00049770919ccd6759de3&t=m&ll=30.751278,68.203125&spn=84.446143,175.429688&z=2&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300"> </iframe> and the CSS
iframe { max-width: 100%; height: auto; width: auto; /*IE8 bug fix*/ vertical-align: middle;} Or you can view it live and fiddle with it here: http://jsfiddle.net/corinne/pKUzU/ (if you cut away the CSS, you will see what i mean).
My question is how to make this iframe/map be responsive without losing its wanted height?
594
The iframe itself ('the box') can be responsive. But everything inside the iframe is a separate page, and therefore not in the domain of your CSS nor JS.
In the below example, applying style="height: 100%;" to the body and html makes google maps full height because the div the map loads in to is a child of body . In your case, you need to add style="height: 100%;" to the relevant parent elements of #map .
This solution is from Dave Rupert / Chris Coyier (I think). It requires a wrapper div but works pretty well.
HTML
<div class="iframe-rwd"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Seattle,+WA&aq=0&oq=seattle&sll=37.822293,-85.76824&sspn=6.628688,16.907959&t=h&ie=UTF8&hq=&hnear=Seattle,+King,+Washington&z=11&ll=47.60621,-122.332071&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Seattle,+WA&aq=0&oq=seattle&sll=37.822293,-85.76824&sspn=6.628688,16.907959&t=h&ie=UTF8&hq=&hnear=Seattle,+King,+Washington&z=11&ll=47.60621,-122.332071" style="color:#0000FF;text-align:left">View Larger Map</a></small> </div> CSS
.iframe-rwd { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .iframe-rwd iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
