zoom prop not working, always showing zoomed at maximum value

[spanjwani2106]

Issue template

You can donate or became a sponsor https://opencollective.com/react-google-maps-api#category-CONTRIBUTE

If you want to ask question, please ask it in Github Discussions, Spectrum.chat or Slack channel

Please do not post unformatted code into issues, and please do not ask questions. Only real issues, PR's or feature requests are allowed. Minimal reproduction in codesandbox.io is required.

Please provide an explanation of the issue

Your Environment

os: mac/linux/windows/android/ios

node --version

react version

webpack version

@babel version

@react-google-maps/api version

How does it behave?

How should it behave correctly?

Basic implementation of incorrect behavior in codesandbox.com

[ioanna0]

had the same issue and solved it by passing minZoom, zoom and maxZoom to google map options

[TanveerMughal]

I solved it by calling the function 'setZoom' in map instance.

in onLoad function of google maps, before setting map instance:

const onLoad = useCallback(function callback(mapInstance) { mapInstance.setZoom(20); setMap(map); }, []);

you can also call setZoom later on useState's map object while panning to a specific location.

[Keoooo]

still having this issue!!

[gkpradhnani1998]

I did fixed it by using @TanveerMughal answer and a little trick. here is the code. useEffect(()=>{ setTimeout(() => { map?.setZoom(9) }, 1000) }, [map])

map is instance object which is set in state.

[ahsansher]

set zoom in the options should fix this issue. e.g

<GoogleMap
        mapContainerStyle={containerStyle}
        center={loc}
        zoom={14}
        onLoad={onLoad}
        onUnmount={onUnmount}
        options={{
          disableDefaultUI: preview,
          fullscreenControl: false,
          streetViewControl: false,
          mapTypeControl: false,
          zoom: 16,
        }}
        onClick={(e) => {
          const j = e.latLng?.toJSON();
          if (j?.lat && j?.lng) {
            setLoc({ lat: j.lat, lng: j.lng });
          }
        }}
      >
        <Marker position={loc} />
   </GoogleMap>

[DeoThemes]

@ahsansher Doesn't work, unfortunately. Tried with minZoom: 7, maxZoom: 20, etc., and the same result, the map always zoomed to the maxZoom value. So if maxZoom is set to 14, the map is rendered with zoom 14 and a user can't zoom more.

[ericuldall]

Was having this issue after copying the sample code. The problem I found was the sample onLoad event was using map.fitBounds. Replacing that with map.setCenter fixes the issue for me.