Google map methods

As like as using useMap at Map children Components you can use ref to map instance and apply any operation on google map instance imperatively.

Using ref and useEffect you can make any property controllable if needed.

// @flow
import * as React from 'react';
import { Map } from 'rgm';
import { Flex, Box } from 'react-system';
import { useGoogleApiLoader } from '../dev-src/hooks';
import { Ratio } from '../dev-src/controls';
// https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions
const MAP_OPTIONS = {
  zoom: 9,
  center: {
    lat: 59.936,
    lng: 30.314,
  },
};
const getSize = elt => {
  const rect = elt.getBoundingClientRect();
  return {
    width: rect.width,
    height: rect.height,
  };
};
export default function Imperative() {
  const api = useGoogleApiLoader();
  const [map, setMap] = React.useState(null);
  const getOptions = React.useCallback(
    elt =>
      getSize(elt).width < 500
        ? { ...MAP_OPTIONS, disableDefaultUI: true }
        : MAP_OPTIONS,
    [],
  );
  return (
    <div>
      <Flex p={3}>
        <button
          onClick={() => {
            map?.panBy(
              200 * (Math.random() - 0.5),
              200 * (Math.random() - 0.5),
            );
          }}
        >
          Move
        </button>
        <Box width={'16px'} />
        <button
          onClick={() => {
            map?.setOptions({
              disableDefaultUI: true,
            });
          }}
        >
          Disable ui
        </button>
        <Box width={'16px'} />
        <button
          onClick={() => {
            map?.setOptions({
              disableDefaultUI: false,
            });
          }}
        >
          Enable ui
        </button>
      </Flex>
      <Ratio value={3 / 4}>
        {api && <Map ref={setMap} api={api} options={getOptions}></Map>}
      </Ratio>
    </div>
  );
}