React hooks and map context provider for Google Maps
npm install @ubilabs/google-maps-react-hooks
This is a JavaScript library to easily implement a Google Maps map into your React application. It comes with a collection of React hooks to access the Google Maps map instance all over your components and to use some of the Google Maps Services or Libraries.
#### Table of contents
- Requirements
- Installation
- Map Usage
- Documentation
- GoogleMapsProvider
- Hooks
- useGoogleMap
- useDirectionsService
- useDistanceMatrixService
- useElevationService
- useGeocodingService
- useMaxZoomService
- usePlacesService
- useAutocomplete
- useAutocompleteService
- Examples
- Basic Google Map
- Google Map with Markers
- Multiple Google Maps
- Directions Service
- Distance Matrix Service
- Elevation Service
- Geocoding Service
- Maximum Zoom Imagery Service
- Places Autocomplete Service
- Places Autocomplete Widget
- Places Service
- Places Service With Element
- Street View Panorama Map
- Street View Panorama With Element
You need to have React 16.8.0 or later installed to use the Hooks API.
``sh`
npm install @ubilabs/google-maps-react-hooks -D
NOTE FOR WINDOWS USERS:
We are using cross-env for environment variables to work on all platforms. There is an issue that npm uses cmd by default. The workaround is to add script-shell to powershell in your .npmrc. Please follow this setup to make it work.
Import the GoogleMapsProvider and wrap it around your components.GoogleMapsProvider
Make sure all components that should have access to the Google Maps map instance are nested inside the .
If you still can't see a map on your page, make sure that your map container has a height CSS property (by default it usually has no height) and that a center and zoom was set for your map.
`tsx
import React, {useState, useCallback, forwardRef} from 'react';
import {GoogleMapsProvider} from '@ubilabs/google-maps-react-hooks';
function App() {
const [mapContainer, setMapContainer] = useState(null);
const mapRef = useCallback(node => {
node && setMapContainer(node);
}, []);
const mapOptions = {
// Add your map options here
// center and zoom are required for every map to be displayed
center: {lat: 53.5582447, lng: 9.647645},
zoom: 6
};
return (
mapContainer={mapContainer}
mapOptions={mapOptions}>
);
}
export default App;
`
The GoogleMapsProvider makes the Google Maps map instance available to any nested components with the useGoogleMap hook.
`tsx
import React from 'react';
import {useGoogleMap} from '@ubilabs/google-maps-react-hooks';
const MyComponent = () => {
const map = useGoogleMap();
// Do something with the Google Maps map instance
return (...);
};
``
Explore our examples directory on GitHub for full implementation examples.