[Syed Shadab MParticipant]

This is the code that I am trying to use in the customizer to disable/enable the auto scrolling feature in Google maps when the user clicks. I would not prefer creating a child theme for this.

jQuery(document).ready(function($) {
  $('#googleMaps').toggle(function() {
  $(this).css("pointer-events","all");
});
})

I appreciate your support!

[NicoModerator]

Hi There,

Thanks for writing in!

You can try adding your jquery code in your Customizer’s Custom Javascript:

$('#googleMaps').toggle(function() {
  $(this).css("pointer-events","all");
});

Hope it helps!

Thanks!

[Syed Shadab MParticipant]

Hey,

I did. It is not working.

[DarshanaModerator]

Hi there,

Could you please try implementing the solution here (https://theme.co/x/member/forums/topic/scrollwheel-engaging-google-maps-embed/#post-23549).

If that doesn’t help, please provide us with a URL to your page.

Thanks!

[Syed Shadab MParticipant]

I did even with the classic map embed. However here is the URL: bistro-e.com

[RadModerator]

Hi there,

Thanks for writing in.

I can’t drag or zoom your map which I think is what you’re trying to do? So not sure why still need to do that. Your iframe contains draggable that is set to false, which is okay I think.

As for jQuery, please note that in wordpress, it should be jQuery and not $. Or wrap your code just like this.

jQuery ( function($) () {

$('#googleMaps').toggle(function() {
  $(this).css("pointer-events","all");
});

} );

Hope this helps.

[Syed Shadab MParticipant]

The above code did not work. You used extra () in the function. The proper code should be:

jQuery(function($){
$('#googleMaps').click(function() {
  alert('This is nice.')
});
});

Except this does not work either. Anyway, I can set an option to the map object, as in the Maps API docs, or pass a perameter to the iframe. I currently have pointer events set to none however I do not think that us user friendly.

[SenthilMember]

Hi There,

Thanks for writing again!
I’m sorry to hear that you’re still having this issue.

You can add the pointer-events attribute to the element using Custom CSS & try that if it works.
Please add the following CSS in your Appearance > Customize > Custom > CSS and check again.

div#gmap_canvas iframe {
     pointer-events: all;
}

Hope it helps, thanks!

[Syed Shadab MParticipant]

Hey,

Thanks for your reply. How will it solve the auto scrolling on the map though?

[ThaiModerator]

Hi There,
Try adding following Javascript under Appearance > Customize > Custom > Javascript:

jQuery(document).ready(function($) {
	$(window).scroll(function() {
		$('div#gmap_canvas iframe').css('pointer-events', 'none');
	});
});

Hope it helps.

[Author]

Posts