First, major props to the Events Organiser plugin. It is super nice and very developer-friendly. When I redesigned my friends’ website, thewagband.com, I found it to be a great solution for listing their upcoming gigs, which is probably the most important function of the site.
I liked how it displayed a nice big Google map of the venue each gig was to take place at. There was only one small issue that began to bug me as I interacted with the site: It was impossible to scroll past the map, lol. As soon as the mouse cursor moved over the map, the map would intercept it, and instead of scrolling down I was now zooming in on the map itself. I really dislike scrolljacking, so I wanted to figure out how to change that behavior.
It took me quite a while to find a fix for this, and a lot of dead-end Google searches. I found recommendations to disable pointer events using CSS (which would disable all map functionality and effectively make the map nothing but an image) to using iframes and jQuery to prevent the map from intercepting the scroll. Eventually I came across the Venue Map documentation for the plugin, and I experimented with turning off zoom control, which only removed the zoom controls from the map but did not prevent scrolljacking.
The solution turned out to be incredibly simple. Google Maps has a scrollwheel=false option, and the Events Organiser plugin has a scrollwheel attribute for the venue map, which I found out from here. What wasn’t clear from the documentation, however, was how to implement it in a template file. After much trial and error, I found that this worked:
<?php echo eo_get_venue_map(eo_get_venue(),array('width'=>'100%','scrollwheel'=>false)); ?>
One drawback is this still does not prevent scrolljacking on mobile, only setting draggable to false would do that. However I think that draggability is a pretty important map feature, so I decided to take the hit on mobile.