This blog post by Steve Fenton came across my feeds the other day. I’d never heard of HERE maps before, but apparently they are embeddable somehow, like Google Maps. The problem is that you zoom and and out of HERE maps with the scrollwheel. So imagine you’re scrolling down a page, your cursor (or finger) ends up on the HERE map, and now you can’t continue scrolling down the page because that scrolling event is captured by the map and turns into map zooming.
Steve’s solution: put a “coverer” <div> over the map when a scroll event starts on the window, and remove it after a short delay (when scrolling “stops”). That solution resonates with me, as not only have I coded solutions like that in the past for embedded maps, we have a solution like that in place on CodePen today. On CodePen, you can resize the “preview” window, which is an <iframe> of the code you write. If you drag too swiftly, your mouse cursor (or touch event) might trigger movement off of the draggable element, possible onto the <iframe> itself. If that happens, the <iframe> will swallow the event, and the resizing you are trying to do stops working correctly. To prevent this, we put a “covered” <div> over top the <iframe> while you are dragging, and remove it when you stop dragging.
Thinking of maps though, it reminds me Brad Frost’s Adaptive Maps idea documented back in 2012. The idea is that embedding a map on a small screen mobile device just isn’t a good idea. Space is cramped, they can slow down page load, and, like Steve experienced nearly a decade later, they can mess with users scrolling through the page. Brads solution is to serve an image of a map (which can still be API-driven) conditionally for small screens with a “View Map” link that takes them to a full-screen map experience, probably within the map native app itself. Large screens can still have the interactive map, although, I might argue that having the image-that-links-to-map-service might be a smart pattern for any browser with less technical debt.
I’ve implemented Steve’s fix for the HERE maps that we use in our web platform, and it works a treat! :)
In case you are wondering, HERE formerly was Nokia Maps until it was aquired by some German carmakers. You will find it mostly powering automobile navigation systems accross a wide range of brands (from Toyota through Chevrolet to BMW), while the mobile/web use is only a side business from their point of view.
Map services provide settings to disable the scroll event on their maps (Here Maps too). Only the issue of a map container, sized too large on a small touch screen is problematic. The user can get in a situation where they are trapped in the map because there is noting from the website to grab (scroll) in the viewport.
Sebastian, the Here Maps disable scroll event setting is buggy in their latest version, hence why a temporary “fix” is required.
Why don’t use scrollwheel: false instead?