GoogleMap Component doesn't display map at the provided 'zoom' prop.

[benito7suriano]

Issue template

Please provide an explanation of the issue

The GoogleMap component is not initially rendering to the provided 'zoom' prop. In my case, it is zoomed in much further than I want it to. After the initial render, if I modify the 'zoom' prop, say from 8 to 9, the component then renders the map at a zoom of 9.

Your Environment

os: mac

node --version 18.9.0

react version 18.2.0

webpack version 3.8.1

@babel version 7.19.0

@react-google-maps/api version 2.13.1

How does it behave?

When I render the map for the first time, it's zoomed in excessively. If I go ahead and change the zoom prop after initial render, then the map gets rendered to the updated zoom level.

How should it behave correctly?

The map should render to the assigned 'zoom' prop from the very beginning.

Basic implementation of incorrect behavior in codesandbox.com

[erosai]

Have you been able to fix this issue yet ?

[ignaciodiazb]

Where can I see the implementation?

[h0uy1]

const [zoomReset, setZoomReset] = useState(0) const [map, setMap] = React.useState(null) const onLoad = React.useCallback(function callback(map:any) { const bounds = new window.google.maps.LatLngBounds(center); map.fitBounds(bounds); setMap(map) setTimeout(() => setZoomReset(9), 1000) }, []) use the setTimeout() to change the zoom level as default it wil be max and then u paste the zoomReset State to the google map component zoom property will be work

[codyscott1]

+1 to this issue. Also affecting our build. Any fix would be greatly appreciated. currently using this as a workaround, which works most of the time

useEffect(() => {
    setTimeout(() => {
      setZoom(10) 
    }, 100)
  }, [])

[ignaciodiazb]

@codyscott1 are you using the fitBounds method? If so, it sets the map viewport to contain the bounds you pass into that function, in turn taking precedence over the zoom property you may have added when creating the map instance.

[arnaudambro]

Just remove

const bounds = new window.google.maps.LatLngBounds(center); 
map.fitBounds(bounds);

and you should be fine

This is copy pasted from the example - it drove me nuts too - I removed it and 🥳