[Resolved] Google Maps: toggle disable scroll zoom/enable pointer events

[J]

Hi there, I have a problem integrating a Google Maps iframe. By using style="pointer-events:none" in the iframe the annoying zoom effect is gone when the user scrolls the page. By adding the toggle (see code below, found elsewhere) the map should be accessible when the user clicks the map. I added the function to wp_footer (using GP Hooks). Doesn’t seem to work. Also tried to embed the script directly in the page. No luck either. What am I doing wrong?

$function() {
  $('#gmap-holder').click(function(e) {
    $(this).find('iframe').css('pointer-events','all');
  }).mouseleave(function(e) {
    $(this).find('iframe').css('pointer-events','none');
  });
})

Edit: title, added ‘zoom’.

[Tom]

Try adding this into wp_footer:

<script>
jQuery(function($) {
  $('#gmap-holder').click(function(e) {
    $(this).find('iframe').css('pointer-events','all');
  }).mouseleave(function(e) {
    $(this).find('iframe').css('pointer-events','none');
  });
});
</script>

[J]

Works!

Thanks

[Tom]

You’re welcome 🙂

[Author]

Posts