Quick & Easy Responsive Google Maps

Embedding Google Maps on your website requires set width and height attributes. As a result, the map does not scale to fit the width of its container. Therefore, no responsive goodness....until now!

FitVids.JS, a jQuery plugin developed by Chris Coyier and the team at Paravel, does all of the heavy lifting. Note: Requires jQuery.

Simply wrap your <iframe> in a <div> and give your <div> a class of mapWrap. Then initialize FitVids.JS with the following code:

$(document).ready(function() {
    $('.mapWrap').fitVids({ customSelector: "iframe[src*='maps.google.com']" });
});

Pretty painless, right?

View the demo