Reputation: 755
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.
Upvotes: 8
Views: 6568
Reputation: 624
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
Upvotes: 2
Reputation: 59
To hide "use ctrl + scroll to zoom map" in React js put options={{ gestureHandling: "greedy" }}>
in
<GoogleMap
defaultZoom={15}
defaultCenter={{ lat: 44.814346, lng: 20.458047 }}
options={{ gestureHandling: "greedy" }}>
<Marker position={{ lat: 44.814346, lng: 20.458047 }} />
</GoogleMap>
Upvotes: 0
Reputation: 755
Solved it by putting the scrollwheel:false
as an option for GoogleMap component as such
<GoogleMap options={{ scrollwheel: false}}>
Upvotes: 9