Skip to content
Tiny (1kb less) but very powerful React Google Map
JavaScript TypeScript
Branch: master
Clone or download

Latest commit

TrySound Use preset-env instead of experimental preset-modules (#13)
All preset-modules features are landed behind `bugfixes` flag in
preset-env. See here https://babeljs.io/blog/2020/03/16/7.9.0
Latest commit d9992d2 May 23, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
data Initial commit May 5, 2020
dev-src Upgrade flow and enable types-first mode (#10) May 18, 2020
flow-typed Initial commit May 5, 2020
pages Upgrade flow and enable types-first mode (#10) May 18, 2020
public Remove zeit icons May 9, 2020
src Use preset-env instead of experimental preset-modules (#13) May 23, 2020
.browserslistrc Use preset-env instead of experimental preset-modules (#13) May 23, 2020
.eslintrc.js Use preset-env instead of experimental preset-modules (#13) May 23, 2020
.flowconfig Upgrade flow and enable types-first mode (#10) May 18, 2020
.gitignore gh-pages May 5, 2020
.prettierignore Initial commit May 5, 2020
.prettierrc Initial commit May 5, 2020
LICENSE Create LICENSE May 9, 2020
LICENSE-EXAMPLES Create LICENSE-EXAMPLES May 9, 2020
README.md (docs): fixed small error (#11) May 16, 2020
babel.config.js Initial commit May 5, 2020
next-env.d.ts Add typescript support and ts example May 9, 2020
next.config.js Upgrade flow and enable types-first mode (#10) May 18, 2020
package.json Use preset-env instead of experimental preset-modules (#13) May 23, 2020
rollup.config.js Use preset-env instead of experimental preset-modules (#13) May 23, 2020
size-snapshot.txt Use preset-env instead of experimental preset-modules (#13) May 23, 2020
tsconfig.json Rename index into rgm May 9, 2020
yarn.lock Use preset-env instead of experimental preset-modules (#13) May 23, 2020

README.md

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.

You can’t perform that action at this time.