RGM

Tiny 1kb less but very powerful React Google Map.

It allows you to render any React component on the Google Map, and provides easy access to native google map api.

examples, examples source

Example

import { Map, Overlay, Marker } from 'rgm';
...

<Map api={api} options={MAP_OPTIONS}>
  <Overlay debug={debug}>
    <Marker lat={lat} lng={lng}>
      <ReactComponent />
    </Marker>
  </Overlay>
</Map>

Install

yarn add rgm
# or
npm install rgm

API

Map

Draws google map.

properties:

• api non nullable value of window.google.maps

• options see MapOptions or (elt:HTMLDivElement) => MapOptions where elt is map holder element.

• ref exposes instance of google.maps.Map

Overlay

Creates overlay to place React components inside.

properties:

• debug to control React component placements in dev mode see example

Marker

Wrapper around your component to pass lat, lng into Overlay in a type safe way without touching props of your component.

properties:

• lat latitude
• lng longitude

useMap

hook to get access to instances of google.maps.Map and window.google.maps.

returns:

• { api, map } object, where api is equal to window.google.maps and map is instance of google.maps.Map

Types

Flowtype, Typescript.

For typescript usage you probably need to add @types/googlemaps into your project.

Contribute

Get your api key at Google

Then start dev environment.

GOOGLE_API_KEY=<YOUR GOOGLE API KEY> yarn dev

Why

Why another library having that one of current library authors is also creator of google-map-react

React map libraries along with the ability to draw react on a map are also trying to provide access to google map via declarative API. It needs a lot of hacks, code and opinionated decisions.

We created a library with ability to draw react components on a map providing minimal subset of properties needed to use native api or create any additional declarative api.

Soon will be 1 year as we are happy with it. Small amount of code makes it easy to support and extend.