useMapContext

useMapContext hooks read Map instance of the GoogleMap component.

Basic Example

function MapContent() {
  const map = useMapContext();

  console.log(map);

  useEffect(() => {
    setTimeout(() => { // refresh and watch the example below!
      map.fitBounds({
        south: 37.5211158,
        north: 37.5011158,
        west: 127.098167,
        east: 127.098167,
      })
    }, 3000);
  }, []);

  return (
    <Marker lat={37.5111158} lng={127.098167} title='Lotte World' />
  );
}

function MyMap() {
  return (
    <GoogleMap
      className='h-[400px]'
      center={{ lat: 37.5111158, lng: 127.098167 }}
    >
      <MapContent />
    </GoogleMap>
  );
}

Alternative

You can use GoogleMap event callbacks(onLoad, etc.) or ref props to get a Map instance.