https://github.com/jmarceli/react-hook-google-maps
React useGoogleMaps hook for easy integration with Google Maps API https://www.npmjs.com/package/react-hook-google-maps
https://github.com/jmarceli/react-hook-google-maps
google hooks maps react react-use react-usegooglemaps-hook
Last synced: 15 days ago
JSON representation
React useGoogleMaps hook for easy integration with Google Maps API https://www.npmjs.com/package/react-hook-google-maps
- Host: GitHub
- URL: https://github.com/jmarceli/react-hook-google-maps
- Owner: jmarceli
- License: mit
- Created: 2020-01-18T22:18:44.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T02:07:33.000Z (almost 2 years ago)
- Last Synced: 2025-10-06T21:25:21.697Z (4 months ago)
- Topics: google, hooks, maps, react, react-use, react-usegooglemaps-hook
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-hook-google-maps
- Size: 1.3 MB
- Stars: 23
- Watchers: 1
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-hook-google-maps
> React useGoogleMaps hook
[](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
## Install
```bash
npm install --save react-hook-google-maps
```
## Usage examples
Check `example` dir in this repo for most up to date examples.
### Simple
```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: You should always set initial 'center' and 'zoom' values
// even if you plan to change them 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
;
};
export default App;
```
Check live example on CodeSandbox:
[](https://codesandbox.io/s/priceless-shaw-o6e7x?fontsize=14&hidenavigation=1&theme=dark)
### Map with marker
```jsx
import React from "react";
import { useGoogleMaps } from "react-hook-google-maps";
// based on https://developers.google.com/maps/documentation/javascript/adding-a-google-map
const uluru = { lat: -25.344, lng: 131.036 };
export const MapWithMarker = React.memo(function Map() {
const { ref, map, google } = useGoogleMaps(
"AIzaSyC4Z5Qz97EWcoCczNn2IcYvaYG0L9pe6Rk",
{
zoom: 4,
center: uluru,
},
);
console.log("render MapWithMarkers");
if (map) {
// execute when map object is ready
new google.maps.Marker({ position: uluru, map });
}
return (
);
});
```
Check live example on CodeSandbox:
[](https://codesandbox.io/s/funny-wood-twb4t?fontsize=14&hidenavigation=1&theme=dark)
### Map with external controls
```jsx
import React, { useState, useEffect } from "react";
import { useGoogleMaps } from "react-hook-google-maps";
export const Map = React.memo(function Map() {
const [value, setValue] = useState(0);
const { ref, map, google } = useGoogleMaps(
"AIzaSyC4Z5Qz97EWcoCczNn2IcYvaYG0L9pe6Rk",
{
center: { lat: 0, lng: 0 },
zoom: 3,
},
);
console.log("render Map");
useEffect(() => {
if (!map) {
return;
}
setValue(map.getZoom());
const listener = map.addListener("zoom_changed", () => {
setValue(map.getZoom());
});
return () => google.maps.event.removeListener(listener);
}, [map, google]);
const handleZoomUpdate = (zoomChange = 1) => {
const nextZoom = value + zoomChange;
if (nextZoom < 0) {
return;
}
map.setZoom(nextZoom);
};
return (
External zoom controls example
handleZoomUpdate(1)}>Zoom In
handleZoomUpdate(-1)} disabled={value < 1}>
Zoom Out
{value}
);
});
```
Check live example on CodeSandbox:
[](https://codesandbox.io/s/funny-wood-twb4t?fontsize=14&hidenavigation=1&theme=dark)
## License
[MIT](./LICENSE)
## Author
Jan Grzegorowski