Stop embedded Google Maps capturing the scroll wheel

The problem with full width google maps is that they capture the scroll wheel so the moment you hit them, instead of continuing to scroll the map itself starts zooming (in or out depending on the direction you’re scrolling). The simplest solution to stop this is to wrap the map in an identifiable div and use css to turn off pointer-events, you can then use javascript or jQuery (if you’re using it for other things) to turn pointer-events back on when the map is clicked (or if you really want, when it’s hovered over for a certain length of time.

HTML

<div id="map-wrapper">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2374.098323386507!2d-2.2167266842642874!3d53.48457298000822!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bb1b8da566dfd%3A0xca4bc976ee6a5635!2sHackspace+Manchester!5e0!3m2!1sen!2suk!4v1499636791682" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

CSS

#map-wrapper iframe {
    pointer-events: none;
}

jQuery

$('.map-wrapper').click(function(){
    console.log("clicked");
    $('iframe').css("pointer-events", "auto");
})

$('iframe').mouseleave(function(){
    $('iframe').css("pointer-events", "none");
})

THIS WILL BE BACK WHEN I HAVE TIME:

[codepen_embed height=”265” theme_id=”0” slug_hash=”MoPRER” default_tab=”result” user=”NotQuiteHere” preview=”true” data-preview=”true”]See the Pen MoPRER by Tamarisk Kay (@NotQuiteHere) on CodePen.[/codepen_embed] Shamelessly pinched from: https://stackoverflow.com/a/25588739 and reproduced here so I can remember what I did.

Disclosure

As an Amazon Associate I earn from qualifying purchases.