Easier-to-use Google Map & React integration
npm install @lucifer1004/react-google-map



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.
- node
- npm or yarn
- a valid Google Map API key
``javascript
import {
GoogleMapProvider,
HeatMap,
InfoWindow,
MapBox,
Marker,
Polygon,
} from '@lucifer1004/react-google-map'
// In your component
return (
opts={{
center: {lat: 39, lng: 116},
zoom: 14,
}}
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 🙌
}
)
`
Let's break it up.
- You need to wrap your components within GoogleMapProvider, so that they will
have access to the global state and work fluently.
Under the hood, React.Context is used.
Besides GoogleMapProvider, GoogleMapConsumer and GoogleMapContext are alsouseContext
exported. You can choose to use the consumer manner, or use hook,
to get access to the context contents in your custom components.
> #### What's inside the context?
>
> Currently, the context has two properties: state and dispatch. As thestate
> names suggest, stores the context state, and dispatch is the reducestate
> function.
>
> has 3 properties:map
>
> - , which is a reference to the google.maps.Map instance.objects
> - , which is a Map storing all google.maps.MVCObject instances asid
> -object pairsservice
> - , which is a reference to the google.maps.places.PlaceServiceusingPlaces
> instance. It will be automatically instantiated when is trueMapBox
> in .
>
> Users can manipulate Google Map objects directly via these properties.
- MapBox is a wrapper of a google.maps.Map instance.MapBox
- There can only be one within GoogleMapProvider. If you want to haveopts
multiple maps, you can handle them with multiple providers.
- Google Map options should be placed in .
- Marker is a wrapper of a google.maps.Marker instance.opts
- Google Map options should be placed in .id
- The prop is required and must be unique.
- InfoWindow is a wrapper of a google.maps.InfoWindow instance.opts
- Google Map options should be placed in .visible
- prop determines whether InfoWindow is visible.
- Polygon is a wrapper of a google.maps.Polygon instance.opts
- Google Map options should be placed in .id
- The prop is required and must be unique.
- HeatMap is a wrapper of a google.maps.visualization.HeatmapLayer instanceuseVisualization
- of the MapBox instance must be trueopts
- Google Map options should be placed in opts.data
> Note: is an array of {lat, lng, weight?}, which is
> different from Google Map API's definition.
- OverlayView is a wrapper of a google.maps.OverlayView instance. You canposition
overlay a custom DOM element on the map with this component.
- prop must be given, which is google.maps.LatLngLiteral, so thatOverlayView
can be locatedpane
- prop defines in which pane this OverlayView will be rendered, default"overlayMouseTarget"
is
(ref)
Instead of using the pre-designed components, you can also use the exported
hooks useGoogleAPI, useGoogleListeners in your own components.
`sh`
git clone https://github.com/lucifer1004/react-gmap
cd react-gmap
yarn install
The best way to learn how to use this package is to use the storybook.
`sh`
yarn storybook
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`
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.