How can I get mapInstance properly ?

[ghost]

Hello everyone,

I need to access a function called getBounds from mapInstance but after load my map using the library it looks like the function is not available. I can print the whole mapInstance on the console and access this function from there but it not works from my code :(

I'm providing this minimum example to show you guys the problem I'm facing.

https://codesandbox.io/s/kind-jackson-i3z1r?file=/src/App.tsx

Am I doing something wrong ?

[ghost]

Sorry guys. It was a dumb question. The bounds are not settled yet when I'm trying to accessing it from my component. I'll check this and provide a sample for future readers.

Thank you all.

[ghost]

Hello guys,
As I said, this was a mistake I made using React, it's not related to this library. I solved it with this code:

/* global google */
export default function App() {
  const mapRef = useRef<google.maps.Map>();

  const onLoad = (map: any) => {
    mapRef.current = map;
  };

  const onBoundsChanged = () => {
    if (mapRef.current) {
      const bounds = mapRef.current.getBounds();
      console.log('onBoundsChange', bounds);
    }
  };

  return (
    <LoadScript
      googleMapsApiKey={API_KEY}
    >
      <GoogleMap
        onLoad={onLoad}
        onBoundsChanged={onBoundsChanged}
        center={center}
        zoom={12}
        mapContainerStyle={containerStyle}
      >
        <></>
      </GoogleMap>
    </LoadScript>
  );
}