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:
class MapContainer extends React.Component {
render() {
return (
<>
<LoadScript googleMapsApiKey="API-KEY" >
<GoogleMap
zoom={14}
mapContainerStyle={{width: window.innerWidth, height: window.innerHeight}}
// Using placeholder lat/lng coords here, they're real in my actual code
center={{
lat: 0.00000000,
lng: 0.00000000
}}
onClick={(e) => {console.log(`${e.latLng.lat()} ${e.latLng.lng()}`)}}
>
</GoogleMap>
</LoadScript>
</>
)
}
}
CodePudding user response:
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:
<GoogleMap
options={{
gestureHandling: "greedy"
}}
>
</GoogleMap>