Can't set zoom or initial center on GoogleMap component.

I updated the package and applied the method in the example on the NPM doc, setting center and zoom props but they don’t seem to have any effect.

   <GoogleMap
        mapContainerStyle={containerStyle}
        center={{
          lat: 46.13033,
          lng: -90.346771,
        }}
        zoom={1}
        options={{
          styles: isDark ? darkMapStyle : lightMapStyle,
        }}
        onLoad={onLoad}
        onUnmount={onUnmount}
    ></GoogleMap>

Your Environment

os: windows

node --version

react version 16.13.1

webpack version

@babel version

@react-google-maps/api version 1.13.0

How is it behave?

initial center is in another coordinate, and zoom is not the zoom I set.

How should it behave correctly?

Map should have the center position entered, and the zoom.

basic implementation of incorrect behavior in codesandbox.com

[joobacca]

As @candrescastel mentioned already, you should check your onLoad function! I had the same issue because I copy pasted the whole Maps component at first.

const onLoad = React.useCallback(function callback(map) {
  const bounds = new window.google.maps.LatLngBounds();
  map.fitBounds(bounds); // Omit this line
  setMap(map);
}, []);

[CamTheWebGuy]

As @candrescastel mentioned already, you should check your onLoad function! I had the same issue because I copy pasted the whole Maps component at first.

const onLoad = React.useCallback(function callback(map) {
  const bounds = new window.google.maps.LatLngBounds();
  map.fitBounds(bounds); // Omit this line
  setMap(map)
}, [])

This is the answer OP. I had the same issue, this is how I fixed it. Thank you @joobacca