Prevent Google Maps irame embeds from hijacking scroll with zoom code snippet

	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
	$('.section-map').on('click', onMapClickHandler);
	});

view raw global.js hosted with ❤ by GitHub

view raw style.css hosted with ❤ by GitHub

Questions, comments, or suggestion for improvement? Leave a comment on the GitHub Gist page.

Prevent Google Maps irame embeds from hijacking scroll with zoom