I’ve setup a map in my react app with react-google-maps/app, but there’s something that’s annoying me. To zoom the map with the scroll wheel, you have to hold down the control key. Is there a way I can disabled this so that I can zoom without holding control. Is there a way to do this?
Here’s the code I have for my map:
JavaScript
x
22
22
1
class MapContainer extends React.Component {
2
render() {
3
return (
4
<>
5
<LoadScript googleMapsApiKey="API-KEY" >
6
<GoogleMap
7
zoom={14}
8
mapContainerStyle={{width: window.innerWidth, height: window.innerHeight}}
9
// Using placeholder lat/lng coords here, they're real in my actual code
10
center={{
11
lat: 0.00000000,
12
lng: 0.00000000
13
}}
14
onClick={(e) => {console.log(`${e.latLng.lat()} ${e.latLng.lng()}`)}}
15
>
16
</GoogleMap>
17
</LoadScript>
18
</>
19
)
20
}
21
}
22
Advertisement
Answer
After looking at the docs for the google maps javascript API, I found that you can do this using the options
prop of the GoogleMap component, and setting gestureHandling
to greedy
, like so:
JavaScript
1
7
1
<GoogleMap
2
options={{
3
gestureHandling: "greedy"
4
}}
5
>
6
</GoogleMap>
7