Responsive Iframe (Google Maps) and Weird Resizing

Responsive iframe (google maps) and weird resizing

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%;
}

Centering Responsive Google Maps

I don't think your second code snippet will work in conjunction with the first as you're embedding your map using an iFrame. This means you have no access to the map to manipulate it via its API (which is what the second code snippet is attempting to do).

I'd suggest you take a look at the Google maps API 3 getting started guide which will give you all the information you need to get going. You should be able to combine the 'hello world' example with your responsive CSS and the event handler above to make the map do exactly what you want.

It's a really intuitive API and the documentation is fantastic, so I don't think you'll have any trouble. If you do run into difficulties you know exactly where to come!

quick and easy way to make google maps iframe embed responsive

If your just using the google maps (or any other embed such as youtube, soundcloud etc.) IFRAME embed you can make it responsive by simply adding this to your CSS.

iframe, object, embed{max-width: 100%;}

If your container/theme is responsive this will work great. Essentially this will work with ANY iframe and not just limited to google maps. But keep in mind if you have other iframes on your site they will as well become responsive.

Resizing google map according to browser resizing

i guess you have to resize your map_canvas as well.

so just add this to your resize()

//its maybe better to attach this handler to the window instead of the document
$(window).resize(function(){
        $('#map_canvas').css("height",$(window).height());
        $('#map_canvas').css("width",$(window).width());
        google.maps.event.trigger(map, 'resize');
        map.setZoom( map.getZoom() );
   });

so you have track of the resizing of your browserwindow :)

Google map V3 no resizing the center and also it repeats

You could use the idle or bounds_changed event listener on the map to call your AutoCenter function again:

http://jsfiddle.net/48jTZ/3/

google.maps.event.addListener(map, 'idle', function() {
    AutoCenter();
});

You actually don't need to call AutoCenter anywhere else anymore.

Edit:

http://jsfiddle.net/upsidown/r4wSy/

There you go. It will now use AutoCenter after the map is loaded and then, if the window is resized (I did it with jQuery, but you get the idea).

$(window).resize(function() {
    AutoCenter();
});

But I find this behavior a bit strange. If the user loads the page, then zooms in to some location, then resizes the window, the map will kind of reset. Well you should know what you want there...

---

Related Topics