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.

  	// Prevent Google Maps from hijacking scroll
	var onMapMouseleaveHandler = function (event) {
		var that = $(this);
		that.on('click', onMapClickHandler);'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'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);

/* 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;

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

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

Let's Talk