Skip to content

Instantly share code, notes, and snippets.

@jaredatch
Created Apr 8, 2015
Embed
What would you like to do?
Prevent Google maps iframe embeds from hijacking scroll with zoom
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);
});
.section-map iframe {
pointer-events: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment