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:

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:

Thanks

Mike

Leave a Reply

Your email address will not be published. Required fields are marked *