react-hook-google-maps
Version:
React useGoogleMaps hook
57 lines (39 loc) • 2.05 kB
Markdown
//img.shields.io/github/license/jmarceli/react-hook-google-maps.svg)](https://opensource.org/licenses/MIT)
[](https://www.npmjs.com/package/react-hook-google-maps)
[](https://david-dm.org/jmarceli/react-hook-google-maps)
[](https://circleci.com/gh/jmarceli/react-hook-google-maps)
[](https://codecov.io/gh/jmarceli/react-hook-google-maps)
Easiest way to use Google Maps in your React application.
For Google API documentation please check https://developers.google.com/maps/documentation/javascript/reference
```bash
npm install --save react-hook-google-maps
```
```jsx
import * as React from "react";
import { useGoogleMaps } from "react-hook-google-maps";
const App = () => {
const { ref, map, google } = useGoogleMaps(
// Use your own API key, you can get one from Google (https://console.cloud.google.com/google/maps-apis/overview)
"AIzaSyC4Z5Qz97EWcoCczNn2IcYvaYG0L9pe6Rk",
// NOTE: even if you change options later
{
center: { lat: 0, lng: 0 },
zoom: 3,
},
);
console.log(map); // instance of created Map object (https://developers.google.com/maps/documentation/javascript/reference/map)
console.log(google); // google API object (easily get google.maps.LatLng or google.maps.Marker or any other Google Maps class)
return <div ref={ref} style={{ width: 400, height: 300 }} />;
};
export default App;
```
[](https://codesandbox.io/s/priceless-shaw-o6e7x?fontsize=14&hidenavigation=1&theme=dark)
[ ](./LICENSE)
Jan Grzegorowski
> React useGoogleMaps hook
[![license](https: