Google Maps Disable Scroll

[Justin]

Hi there,

I urgently need to disable scroll on my map. I know I need to modify embedded-map.js and I know that it will get over written but I have to modify it asap.

I have added ‘scrollwheel: false’ to the ‘initialize function but it isn’t working

function initialize() {
venueObject.map = new google.maps.Map( mapHolder, {
zoom : parseInt( tribeEventsSingleMap.zoom ),
scrollwheel: false,
center : position,
mapTypeId: google.maps.MapTypeId.ROADMAP
} );

new google.maps.Marker( {
map : venueObject.map,
title : venueTitle,
position: position
} );
}

Is there somewhere else I should be putting it?

Regards

Justin

[Justin]

Hi,

so I have worked out that it isn’t the embedded-map.js.

Could you please point me to the file I need to modify so I can stop the scrolling?

Thanks

[George]

Hey Justin,

This is a customization, so we can’t fully support it, but I’m really sorry to hear the urgency with which you’re trying to make this work as you’d like and I’m happy to try and help here. I haven’t tested this code personally yet but there are basically two steps you’ll need to do here:

First, you need to turn SCRIPT_DEBUG to “true” on your site. This will cause the un-minified scripts to load, which embedded-map.js is. To do this, head to your site’s wp-config.php file and find this bit of code:

define( 'WP_DEBUG', false );

Right after this bit of code, add this bit of code:

define( 'SCRIPT_DEBUG', true );

Next, you can modify that embedded-map.js file. Your addition of the scrollWheel: false option may actually work once you set SCRIPT_DEBUG to true, so check on this first to see if it works. If it still seems to not be helping, then try adding the following options in addition to scrollWheel: false:


navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,


I hope this helps!

Cheers,
George

[Justin]

Thanks for the reply,

unfortunately it didn’t work.

It seems that embedded-map.js must be caching somewhere. I deleted the entire contents of embedded-map.js and the events page loaded exactly the same.

So I have just had to leave it and make it narrower on smaller screen for people to have somewhere to swipe past.

I really hope you implement this feature in a future release as it a massive usability issue.

Regards

Justin

[George]

Hm, really sorry about that Justin – I’m not sure why we couldn’t get this working.

I’m really sorry that you find this to be a major usability issue! Can you elaborate on how this is one? I might be able to offer some alternative solution here to minimize how badly this affects your site.

I’m curious because I went to your events page at http://www.brewmanity.com.au/events/

There, the Map container is “responsive” and handles smaller screens very nicely.

As the viewport size decreases, however, the map container does get smaller and the “center” of the map gets shifted out of view.

Is this the usability problem you mean?

If so, then unfortunately even if we could stop map scrolling that would not fix this – in fact, it would make it worse. The map container will decrease in size around the map itself regardless of whether map allows scrolling or not – but if scrolling is not allowed, then the user wouldn’t be able to drag the map back into place if the marker is pushed out of sight…

Apologies if my understanding of your issue is not accurate – I just want to understand exactly what you’re trying to fix and why so I can hopefully try to offer some alternative solution here.

Thank you for your patience with this thread!

– George

[Justin]

Hi George,

thanks for getting back to me again.

The usability issue is that the map can not be scrolled or touched past. It is quite annoying when you first get to a page and want to browse the content.

It also means I can’t have a great looking full width map as there would be nothing for a person to grab at the sides on mobile.

I have created my own map for a different purpose on this page using the Google Maps API

http://www.brewmanity.com.au/where-to-find-brewmanity/

It looks so much better full width and doesn’t budge when scrolled past. Just go to that page and whiz up and down past the map to see what I mean. It makes the whole page feel faster and more pleasant for a reader to move around how they want to.

Overall I am pretty happy with The Events Calendar Pro with the community plug-in, it is just this one feature, or lack thereof, that is letting me down.

Regards

Justin

[George]

Thanks for elaborating on this Justin!

I’m sorry that we weren’t able to come up with a simple solution here for shutting off the scroll features of the map via JavaScript.

If you haven’t already seen it, however, we have a very handy “Themer’s Guide” that shows how to use The Events Calendar’s templating system. It’s a pretty nice templating system and you may find it easier here to just use that system to replace the maps provided by The Events Calendar itself, and add your own HTML and JavaScript for the map to sort of replicate the page you shared in your most recent reply.

Here’s a link to that Themer’s Guide if you’re interested → https://theeventscalendar.com/knowledgebase/themers-guide/

Just some thoughts. I’m glad that our plugins have been useful in other cases, and appreciate your kind words about them. Really sorry that the Map View is giving you trouble though 🙁

Let me know if you have any final thoughts on this matter or if there’s anything else I can help with Justin!

Sincerely,
George

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts