React Google Maps Unable to set scroll zoom off

Question

I have been trying to set the zoom on scroll param to off, but having no luck in turing the feature off.

I am using react-google-maps component. Linked below.

https://github.com/sohilpandya/Bidlt/blob/master/src/js/components/builder/overview-google-map.js

Would appreciate it if someone can cast an eye on it and help me figure out where to put the zoomscroll to off.

Answer 1

Solved it by putting the scrollwheel:false as an option for GoogleMap component as such

<GoogleMap options={{ scrollwheel: false}}>

Answer 2

The best solution here is to set
<GoogleMap options={{ gestureHandling: 'none'}}>

If you also want to hide the +/- zoom buttons you can add an additional option <GoogleMap options={{ gestureHandling: 'none', disableDefaultUI: true}}>

Documentation for scrollwheel option: Note: This property is not recommended. To disable zooming using scrollwheel, you can use the gestureHandling property, and set it to either "cooperative" or "none"

https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions.scrollwheel