Scrolling Can Be Interrupted By Hovering A Google Map

Oct 2, 2014Ryan Burnette

While coding websites I have seen a few situations where a Google embedded map has a width of 100%. This might cover just a main container column or the whole browser viewport. Either way, it creates a situation where users are scrolling using either a touch gesture or the scroll wheel on their mouse. Once the mouse reaches a point where it is hovering the map, that action is intercepted and begins zooming the map rather than scrolling the page.

The scroll wheel zooming is a useful interface control for the map, but it must be expected by the user. In the case where the map is very wide, it can trap the user in that position with no way to use their normal scrolling gesture to initiate that action.

One solution is to disable scroll wheel zooming through the API. That is documented in this post on Stack Overflow.

Upon my last encountering of this concern, I wanted to retain scroll wheel zooming without inconveniencing my users. Let’s look at an example.

Here’s an example which demonstrates the issue. Try using your normal scrolling method and notice how once your house hovers the map that gesture’s purpose changes. It’s fine when you are expecting it, but for most users this behavior won’t be expected when encountered. It could be compared to driving one’s car on the highway then suddenly slowing down mired in quicksand.

See the Pen Scrolling can be interrupted when cursor hovers a Google embedded map by Ryan Burnette (@ryanburnette) on CodePen.

Now for the solution. This is a simplified version, but the finer details could be refactored into a production solution. The strategy is to wrap the map in a div and append an element to that wrapper. The appended “cover” element will be positioned so that it covers the entire map. It’s barely opaque to give the map a deadened appearance. An icon could also be added to make the effect clearer. This way the fully enabled map does not interrupt scrolling. If a user does which to interact with the map, their first click will remove the cover giving them full access to the map.

See the Pen Scrolling can be interrupted when cursor hovers a Google embedded map by Ryan Burnette (@ryanburnette) on CodePen.

To make the strategy more useful, an on/off button could be added so the cover could be restored.

I hope this strategy helps anyone who has considered the same situation. Please share and comment!

Blog Index