Easier-to-use Google Map & React integration
npm install @googlemap-react/core





Easier Google Map Integration for React projects.
There has been similar packages such as
tomchentw/react-google-maps,
google-map-react/google-map-react,
fullstackreact/google-maps-react,
so why bother writing a new library?
The aim is to make an easier-to-use Google Map library for React users,
empowered by React's latest features (React >= 16.8.0 is required) andTypeScript.
- Component position is free (generally)
- Direct access to Google Map objects
- More uniform API
- Type safe
- npm or yarn
``sh`
yarn add @googlemap-react/coreOr you can use
npm install --save @googlemap-react/core
- a valid Google Map API key (to replace the place holder in the code snippet
below)
`javascript
import {
GoogleMapProvider,
HeatMap,
InfoWindow,
MapBox,
Marker,
OverlayView,
Polygon,
} from '@googlemap-react/core'
// In your component
return (
opts={{
center: {lat: 39, lng: 116},
zoom: 14,
}}
style={{
height: '100vh',
width: '100%',
}}
useDrawing
useGeometry
usePlaces
useVisualization
onCenterChanged={() => {
console.log('The center of the map has changed.')
}}
/>
opts={{
draggable: true,
label: 'hello',
position: {lat: 39, lng: 116},
}}
/>
content: 'This is an info window',
position: {lat: 39.01, lng: 115.99},
}}
visible
/>
opts={{
path: [
{lat: 38.98, lng: 116.01},
{lat: 38.98, lng: 116.03},
{lat: 38.99, lng: 116.03},
],
strokeColor: 'cyan',
}}
/>
data: [
{lat: 38.982, lng: 116.037},
{lat: 38.982, lng: 116.035},
{lat: 38.985, lng: 116.047},
{lat: 38.985, lng: 116.045},
],
}}
/>
β This is a custom overlay π
)
`
For more detailed explanation, see the doc.
Instead of using the pre-designed components, you can also use the exported
hooks useGoogleAPI, useGoogleListeners in your own components.
First, you need to clone the repository and install the dependencies:
`sh`
git clone https://github.com/googlemap-react/googlemap-react
cd googlemap-react
yarn install
To read the styleguide locally, simply run:
`sh`
yarn styleguide
And you can then go to http://localhost:6060 to see the styleguide.
You can also run the example app. Before running it locally, you should copy the
sample dotenv file, and fill in your Google Map API key to replace the
placeholder.
`sh`
cd examples/CRA
cp .env.sample .env
Then you can run the example project by
`sh``
yarn start
This app combines Google Map API and Yelp API, helping users search nearby
businesses.

Thanks goes to these wonderful people
(emoji key):
Zihua Wu π» π π‘ π§ | Mehdi Saffar π€ | gilpanal π | myleftshoe π π€ | Esimov Miras π» π | Jessica Nguyen π€ | Plamen Hristov π€ |
zhouyihu π | Ivica BatiniΔ π» | moeka802 π |
This project follows the
all-contributors
specification. Contributions of any kind welcome!