When Embedded Maps Hijack the Scroll
Interactive maps embedded in web pages have a well-known usability problem: the scroll wheel. As soon as the cursor or a touch event lands on the map, scrolling the page becomes impossible because the map captures that input and converts it into zooming. Users suddenly find themselves stuck, unable to continue down the page until they move the pointer off the map entirely.
This is exactly the issue Steve Fenton encountered with HERE Maps. After embedding the map in a page, scrolling over it triggered zoom instead of page scroll. His workaround uses a simple overlay: a div that sits on top of the map only while a scroll event is happening on the window. The moment the window starts scrolling, the cover appears and stays there for a short delay after scrolling stops, after which it is removed. The cover intercepts the scroll-wheel input, and because it is a plain element rather than an interactive map, it lets the page scroll normally.
This is the same pattern CodePen uses for its resizable preview iframe. Without the overlay, a quick drag can slip off the resize handle onto the iframe itself. The iframe then consumes the mouse or touch event, and the resizing operation silently breaks mid-drag. Completely covering the iframe during the drag prevents that, removing the overlay only when, say, the dragging ends.
An Older, Cleaner Idea
Before Steve’s 2021 post, Brad Frost proposed a different approach to embedded-map scroll problems and more. His “Adaptive Maps” idea, documented in 2012, targets small-screen mobile devices. Embedding an interactive map there creates a poor mobile experience: a cramped interface, slower page load, and messy scrolling behavior exactly like the one Steve later encountered. For smaller screens, Brad’s solution replaces the interactive map with an image — still potentially API-driven — containing a “View Map” link that sends users to a native map app or full-screen experience. Larger screens could keep a live interactive map, though the same treat-i-it-like-an-image may be a smarter choice for any browser-only page.
