How to access to the Map object with react-google-maps with functional components?

Question

I can't access to the Map object properties with the react-google-maps library

I want to get the vanilla methods, like "getBouds"

I couldn't find any information in the docs, I tried with ref, with onIdle.

import React, { useState, useMemo, useEffect, useRef } from 'react';
import { compose, withProps } from 'recompose';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} from 'react-google-maps';
import { MarkerWithLabel } from 'react-google-maps/lib/components/addons/MarkerWithLabel';

import classes from './map.module.scss';
import Test from './test';

const loger = () => console.log(google.maps.Map.getBounds());

const MyMapComponent = compose(
  withProps({
    googleMapURL:
      'https://maps.googleapis.com/maps/api/js?key=YOURKEY&libraries=drawing',
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div className={classes.test} />,
    mapElement: <div className={classes.subtest} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) => {
  const header = useRef();

  return (
    <GoogleMap
      defaultZoom={15}
      defaultCenter={{ lat: -34.5877058, lng: -58.4354737 }}
      // onBoundsChanged={() => console.log('test')}
      onIdle={props.onMapIdle}
    >
      <MarkerWithLabel
        position={{ lat: -34.5811123, lng: -58.4287612 }}
        labelAnchor={new google.maps.Point(0, 0)}
        clickable
        zIndex={0}
        // onClick={() => console.log('test')}
        labelStyle={{
          backgroundColor: 'white',
          fontSize: '16px',
        }}
      >
        <div>
          <h1
            onClick={loger}
            style={{ backgroundColor: 'red', zIndex: '1000000' }}
            ref={header}
          >
            Test
          </h1>
          <h2>other</h2>
          <h2>other</h2>
          <h2>other</h2>
          <h2>other</h2>
          <h2>other</h2>
        </div>
      </MarkerWithLabel>
    </GoogleMap>
  );
});

const MyFancyComponent = () => {
  const [isMarkerShown, setisMarkerShown] = useState(false);

  const delayedShowMarker = () => {
    setTimeout(() => {
      setisMarkerShown(true);
    }, 1000);
  };

  const handleMarkerClick = () => {
    // setisMarkerShown(false);
    // delayedShowMarker();
    console.log('test');
  };

  useEffect(() => {
    // delayedShowMarker();
  }, []);

  return (
    <MyMapComponent
      isMarkerShown={isMarkerShown}
      // onMarkerClick={handleMarkerClick}
      onMapIdle={() => console.log('map·is·ready')}

    />
  );
};

export default MyFancyComponent;

I want to access to the Map methods, like getBounds() to render only the markers that fits in the current bounds.

Answer 1

To call getBounds():

    <GoogleMap
        {...mapProps}
        ref={ref => {
            if (ref) {
                console.log(ref.getBounds());
            }
        }}
    >
        {children}
    </GoogleMap>