First render starts at very high zoom

Please provide an explanation of the issue

First render starts at very high zoom. And when I save, the zoom gets normal

Your Environment

os: linux

node --version v16.15.0

react version ^18.2.0

webpack version not use

@babel version not use

@react-google-maps/api version ^2.12.2

How does it behave?

First render starts at very high zoom

How should it behave correctly?

should be started with zoom as I configured in prop zoom={17}

Basic implementation of incorrect behavior in codesandbox.com

video: when-I-save. The map zoom and center gets normal.webm

<video src="https://user-images.githubusercontent.com/16847836/187035122-42a4ab5d-fe04-40df-9333-6552a8b73c2a.webm"></video>

[carloscalage]

I’m getting the same problem here with the versions. I needed my project to be ready quickly, so I came up with probably a bad solution, but it worked, at least until we get an answer.

So I created a zoomReset state and gave it a random number as the initial state. After that I put a setTimeout function inside the onLoad function, after setting the map state. I gave it 1000ms of delay and after that I set the ZoomReset to the value I wanted and voilà, it takes a second to set the zoom back to where it should be.

Sorry if that could cause any problem, but here in Brazil we are masters of gambiarras

const [zoomReset, setZoomReset] = useState(0)
const [map, setMap] = useState(null)

const onLoad = useCallback(
   function callback(map) {
     const bounds = new window.google.maps.LatLngBounds(center)
     map.fitBounds(bounds)

     setMap(map)

     setTimeout(() => setZoomReset(14), 1000)
   },
   []
 )

[JustFly1984]

Yes. An example examples an onLoad prop. It is not required per se, it is just an example how to use map. There is an old google-maps-api lib, which used ref on class, to access map instance. It is not the case anymore. You can add comment to an example and improve it.