React Gmaps

Provide a component, state management, and effect for rendering a list of markers on a map.

TODOS:

• Create a basic map component that accepts props
• Provide a state reducer and context so the implementors can access the google.maps.map object.
• Accept a list of markers
• useEffect for autozooming on marker update/load
• Memoize marker creation.
• Implement InfoWindow
• Implement MarkerClusterer

Usage

We use a custom Context hook to provide state information about the map instance.

<GmapProvider defaultState={{
  map: null,
}}>
  <Map apiKey="YOURKEY" />
</GmapProvider>

There is a very simple test application in demo/index.html. It loads index.jsx. You can run the webpack dev server with:

$ npm run start

Test with:

$ npm run test