Google Embedded Map Mouse Scroll Fix

The Problem

If you have an embedded Google map on your site, and somebody uses the mouse wheel to scroll the page; if the mouse pointer happens to enter the Google map, the map will grab the mouse events and start zooming the map. This is not an intuitive behaviour. The page instantly stops scrolling as the Google map does this. I found it irritating. There are solutions elsewhere, but none I saw came close to getting it right.

The Solution

You’ll need to use jQuery and also a jQuery library called unevent (https://yckart.github.io/jquery.unevent.js/ and also https://github.com/yckart/jquery.unevent.js/blob/master/jquery.unevent.js)

Unevent allows a callback to be triggered if an event doesn’t happen after so many milliseconds.

My code to stop the embedded Google map from grabbing the mouse scroll event, as the mouse pointer enters the map. This is better than other solutions that either completely disabled mouse events on the map, or force temporarily disabled mouse events on the map while forcing you to click on the map to stop disabling mouse events. Both of these feel wrong from a user interface perspective, as they are inefficient or non-standard.

My solutions solves the problem while maintaining the expected functionality of Google maps. Add this code to your web page:

<script type="text/javascript">
	$(document).ready(function() {
		/* When the user is scrolling, disable pointer events in the Google map. */
		$(window).on('scroll', function(e) {
		      $('.maps iframe').css("pointer-events", "none"); 
		});

		/* When the user stops scrolling, enable pointer events in the Google map. */
		/* Note: 'Stopped scrolling' is defined as the user not scrolling for 150ms */
		$(window).on('scroll', function(e) {
		   	$('.maps iframe').css("pointer-events", "auto");
		}, 150);

		/* 350ms after the mouse has entered the map area, emable pointer events. */
		$(window).on('mouseenter', function(e) {
		   	$('.maps iframe').css("pointer-events", "auto");
		}, 350);
	});
</script>

jQuery Unevent

This is available here (https://yckart.github.io/jquery.unevent.js/), however if for any reason this library disappears, I’ve left it here:

/*!
 * jquery.unevent.js 0.2
 * https://github.com/yckart/jquery.unevent.js
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/07/26
**/
;(function ($) {
    var on = $.fn.on, timer;
    $.fn.on = function () {
        var args = Array.apply(null, arguments);
        var last = args[args.length - 1];

        if (isNaN(last) || (last === 1 && args.pop())) return on.apply(this, args);

        var delay = args.pop();
        var fn = args.pop();

        args.push(function () {
            var self = this, params = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn.apply(self, params);
            }, delay);
        });

        return on.apply(this, args);
    };
}(this.jQuery || this.Zepto));

Thanks