googlemap-react




Easier Google Map Integration for React projects.

READ THE DOC

Why a new package

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) and
TypeScript.

What is different

- Component position is free (generally)
- Direct access to Google Map objects
- More uniform API
- Type safe

Example usage

$3

- npm or yarn

``sh
yarn add @googlemap-react/core


Or 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 (

apiKey="YOUR_GOOGLE_MAP_API_KEY"
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.')
}}
/>
id="marker"
opts={{
draggable: true,
label: 'hello',
position: {lat: 39, lng: 116},
}}
/>
opts={{
content: 'This is an info window',
position: {lat: 39.01, lng: 115.99},
}}
visible
/>
id="polygon"
opts={{
path: [
{lat: 38.98, lng: 116.01},
{lat: 38.98, lng: 116.03},
{lat: 38.99, lng: 116.03},
],
strokeColor: 'cyan',
}}
/>
opts={{
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.

Advanced usage

Instead of using the pre-designed components, you can also use the exported
hooks useGoogleAPI, useGoogleListeners in your own components.

See the examples

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
`

$3

To read the styleguide locally, simply run:

`sh
yarn styleguide
`

And you can then go to http://localhost:6060 to see the styleguide.

$3

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
``

Projects using this package

$3

This app combines Google Map API and Yelp API, helping users search nearby
businesses.

!Screenshot

Stargazers over time


Contributors ✨

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!