react-google-maps/api Remove need to hold ctrl to zoom

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>
            </>
        )
    }
}

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:

<GoogleMap
    options={{
        gestureHandling: "greedy"
    }}
>
</GoogleMap>

Advertisement

Answer