Responsive Google Map

We want the map to stay proportional as it scales down. So take the map’s height and divide by width (example below uses 450px height and 600px width), then set that percentage as the padding-bottom. Padding scales with width, so this will make the div scale down proportionally.

Then absolutely position the iframe in the div, forcing 100% width and height. This ensures the map itself matches the size of its containing div.

The `pointer-events: none;` added to the iframe ensures that scrolling down the page doesn’t also zoom in/out the map. This can be very annoying when you have a full width map.

Finally, the Javascript allows the map to be manipulated once you click it.

jQuery(function($){
// Prevent Google Maps from hijacking scroll
var onMapMouseleaveHandler = function (event) {
var that = $(this);
that.on('click', onMapClickHandler);
that.off('mouseleave', onMapMouseleaveHandler);
that.find('iframe').css("pointer-events", "none");
}
var onMapClickHandler = function (event) {
var that = $(this);
// Disable the click handler until the user leaves the map area
that.off('click', onMapClickHandler);
// Enable scrolling zoom
that.find('iframe').css("pointer-events", "auto");
// Handle the mouse leave event
that.on('mouseleave', onMapMouseleaveHandler);
}
// Enable map zooming with mouse scroll when the user clicks the map
$('.responsive-map').on('click', onMapClickHandler);
});
view raw global.js hosted with ❤ by GitHub
/* Map
--------------------------------------------- */
.responsive-map {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%; /* 450/600 */
}
.responsive-map iframe {
position: absolute;
pointer-events: none;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
view raw style.css hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk