[SOLVED]Google Map - Prevent Mouse Scroll

I want my users to be able to zoom on the map, but not with the scroll wheel. There is a way to do this with the Maps API. Can you please add the functionality? @emmanuel

1 Like

It would also be nice to be able to link to content on the map pins, instead of just showing the title.

What is the problem with scrolling? Isn’t it a better ux in general?

If your pins are linked to things, then you can use the click event to show a “details” box.

I have a large map at the top of a page. When a user scrolls with the mouse down the page, it takes focus and zooms in. I would like the users to be able to manually zoom if they want.

Sadly I don’t think the Google API has a clean way to do this, all ways I found online are quite hacky…

In version 3 of the Maps API you can simply set the scrollwheel option to false within the MapOptions properties:

options = $.extend({
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

Do you have a link to their docs?

https://developers.google.com/maps/documentation/javascript/3.24/reference

Okay we’ll add that later today.

2 Likes

You’re awesome. Thanks.

This is live.

5 Likes

Unfortunately, I can’t seem to get this to work, although the disable scrolling works great now.

@emmanuel sorry to be a pain, but can you add this functionality, as well? Can we customize the data that goes into what appears when we click the map marker? It would be great to be able to feed it dynamic data or a link. I can trigger a work flow to do it, but then the user doesn’t get to see where they are going before it redirects.

That’s a much bigger change, and @NigelG solution can get you pretty far to do this.

Brilliant!!!

I am trying to remove the satellite/default toggle on my Google map, and it seems like “mapTypeControl: false” is the best solution.

How/where did you implement this?

@emmanuel when you said you were adding this in, does that mean it’s accessible somewhere in the Bubble UI, or do I have to use CSS or HTML?