RGM

react google map
GitHub icon

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>
);
}
EXAMPLES ARE PROVIDED UNDER THE BEER-WARE LICENSE