Google Maps embed change pointer-events

Question

I'm trying to make my google maps embed scrolling be disabled by default but when they click on the map it enables the scrolling for that map. Then when they click back out, it disables the scrolling for that map again.

$(document).ready(function() {
  $('iframe').css('pointer-events', 'none');
  
  $('iframe').click(function() {
    $(this).css('pointer-events', 'auto');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d359427.6556816937!2d-76.8851736!3d45.26743345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cd6bcb2596a82c9%3A0x620b1817e3906bc9!2sGreater+Madawaska%2C+ON%2C+Canada!5e0!3m2!1sen!2sus!4v1428983425474" width="400" height="300" frameborder="0" style="border:0"></iframe>

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2718.6871219669715!2d-53.297594999999994!3d47.046369999999996!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4b0d19207be73853%3A0x43c8554901e80797!2sAvalon+Wilderness+Reserve!5e0!3m2!1sen!2sus!4v1428983463691" width="400" height="300" frameborder="0" style="border:0"></iframe>

However my code doesn't work. I would also like to disable pointer-events if the user clicks on anything other than the map.

Answer 1

I didn't really look after it, but I think if there are no pointer-events on the iframe, then there will be no click event on the iframe, thus, you cannot attach an event handler to it. I've put a div around the iframe and attached the handler to that:

<script type="text/javascript">
    $(document).ready(function() {
        $('#map_container').click(function() {
            $(this).find("iframe").css('pointer-events', 'auto');
        });
    });
</script>

<div id="map_container" title="Click on the map to interact">
    <iframe style="pointer-events: none;" src="https://www.google.com/maps/embed/v1/place?key=YOURKEY&q=YOURADDRESS" allowfullscreen>
    </iframe>
</div>