CODEWITHSUNDEEP
google-mapsreactjs
Sohil Pandya
Sohil Pandya

Reputation: 755

React Google Maps Unable to set scroll zoom off

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

Answers (3)

Razvan Dragos
Razvan Dragos

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

Dejan Markovic
Dejan Markovic

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

Sohil Pandya
Sohil Pandya

Reputation: 755

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

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

Upvotes: 9

Related Questions