React hook to use Google Maps in your React apps
Install with npm
npm install use-gmaps
Install with yarn
yarn add use-gmaps
This custom hook uses @googlemaps/js-api-loader
to setup the map. More info at https://github.com/googlemaps/js-api-loader
Get Google Maps API key - More info https://developers.google.com/maps/documentation/javascript/get-api-key
Use the custom hook in your React app:
import React from 'react';
import useGoogleMaps from 'use-gmaps';
export default function App() {
const { mapRef } = useGoogleMaps({ apiKey: 'ABC-XYZ' });
return <div ref={mapRef} style={{ width: '100vw', height: '100vh' }} />;
}
If you are using Create React App (CRA) then you can also pass the key from environment variables (e.g. process.env.REACT_APP_GMAPS_API_KEY)
Another example to add a marker:
import React from 'react';
import useGoogleMaps from 'use-gmaps';
const { mapRef, map, isMapLoaded, currentCenter } = useGoogleMaps({
apiKey: 'ABC-XYZ'
});
export default function App() {
React.useEffect(() => {
if (isMapLoaded) {
// Just use native Google Maps API methods
new window.google.maps.Marker({
map,
position: currentCenter,
title: 'I am a marker'
});
}
}, [isMapLoaded, map]);
return <div ref={mapRef} style={{ width: '100vw', height: '100vh' }} />;
}
Here are other options that can be passed to the custom hook:
Load additional libraries by specifying a libraries
option.
...
const { map } = useGoogleMaps({
libraries: ['places']
});
More information at https://developers.google.com/maps/documentation/javascript/libraries
Set a version for Google Maps API. Default to weekly
...
const { map } = useGoogleMaps({
version: 'weekly'
});
More information at https://developers.google.com/maps/documentation/javascript/versions
Set and override default options for the Map
...
const { map } = useGoogleMaps({
mapOptions: {
center: { lat:123,lng:456 },
zoom: 18,
styles: [{ ... }]
...
}
});
More information at https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions
This custom hook API provides access to followings:
The React ref reference that can be attached to any HTML element in the React app.
The native Google Maps Map object for currently loaded map.
true
or false
providing current state of loading map.
Any errors from @googlemaps/js-api-loader
while loading the map.
Current location object e.g. { lat: 123, lng: 456 }
The value will update with map drag.
Run following commands to setup and start the test project using Create React App.
npm install
npm run setup
npm start
MIT License
© 2020–present Jabran Rafique