Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Responsive iframe (google maps) and weird resizing

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&amp;ctz=-480&amp;ie=UTF8&amp;msa=0&amp;msid=210840796990572645528.00049770919ccd6759de3&amp;t=m&amp;ll=30.751278,68.203125&amp;spn=84.446143,175.429688&amp;z=2&amp;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?

like image 594
Corinne Avatar asked Oct 01 '12 15:10

Corinne


People also ask

Can iframes be made responsive?

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.

How do I make HTML map full screen?

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 .


1 Answers

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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Seattle,+WA&amp;aq=0&amp;oq=seattle&amp;sll=37.822293,-85.76824&amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Seattle,+King,+Washington&amp;z=11&amp;ll=47.60621,-122.332071&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Seattle,+WA&amp;aq=0&amp;oq=seattle&amp;sll=37.822293,-85.76824&amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Seattle,+King,+Washington&amp;z=11&amp;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%; } 
like image 123
cpg Avatar answered Sep 22 '22 20:09

cpg