Disable zooming/scrollwheel on "Map View"

[Thomas]

Hello @all,

i would like to disable the scroll function on the large google “Map View” on our homepage. I had modifyed the embedded-map.js from this topic: https://theeventscalendar.com/support/forums/topic/google-maps-disable-scroll/

But the embedded-map.js solution disable only the scroll function for the maps on the single event page.

My Question: Where can i disable the scroll function for the large google “Map View” on our Event Overview page?

Thx in advanced for your helping.

Regards,
Tom

• This topic was modified 9 years, 8 months ago by Thomas.

[George]

Hey Thomas,

Apologies for the delayed reply!

When it comes to disabling the scroll function, first you must add this line of code to your site’s wp-config.php file:


define( 'SCRIPT_DEBUG', true );


Next, head to this file within Events Calendar Pro:


/events-calendar-pro/src/resources/js/tribe-events-ajax-maps.js


In this file, you want to look for where the Map is finally initialized. This happens around line 122 (in the most recent version of Events Calendar Pro at the time of writing). The line of code looks like this:

tg.map = new google.maps.Map( document.getElementById( 'tribe-geo-map' ), options );

A few lines above this line, you’ll see where that options parameter is defined. It is a block of code that looks like this:


var options = {
zoom : 5,
center : new google.maps.LatLng( TribeEventsPro.geocenter.max_lat, TribeEventsPro.geocenter.max_lng ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
};


To disable all scrolling / zooming, make that options block of code look instead like this:

var options = {
zoom : 5,
center : new google.maps.LatLng( TribeEventsPro.geocenter.max_lat, TribeEventsPro.geocenter.max_lng ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
navigationControl: false,
scaleControl: false,
draggable: false
};

Now, the actual “+” and “-” buttons that Google Maps provides by default will still up there. These can still be clicked to zoom in and out. If you want to hide these, then you need to add a bit more code so that the options block looks like this instead:

var options = {
zoom : 5,
center : new google.maps.LatLng( TribeEventsPro.geocenter.max_lat, TribeEventsPro.geocenter.max_lng ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
navigationControl: false,
scaleControl: false,
draggable: false,
disableDefaultUI: true
};

I hope this helps!
George

[Thomas]

Dear George, your solution works perfect for us. Thx.

[George]

Glad to hear it!

Be sure to make back-ups of these code changes and/or possible bookmark this thread for future reference.

Best of luck with your project,
George

[Author]

Posts