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);

});

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