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");
})