A Google Maps component for React.js
Clone or download
Latest commit 279c653 Mar 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Polygon (#119) Mar 10, 2018
dist upgrade browserify Mar 10, 2018
src Polygon (#119) Mar 10, 2018
.babelrc create entity Aug 9, 2015
.eslintrc getEntity method Aug 13, 2015
.gitignore heroku Feb 11, 2015
.npmignore add .babelrc to .npmignore - fixes #42 Mar 22, 2016
.travis.yml Polyline (#118) Mar 4, 2018
LICENSE initial commit Jan 31, 2015
Procfile heroku Feb 11, 2015
README.md Update README.md Oct 8, 2017
package.json v1.9.0 Mar 10, 2018
server.js heroku Feb 11, 2015
yarn.lock upgrade browserify Mar 10, 2018

README.md

Build Status

React Gmaps

A Google Maps component for React.js

Features

  • Lazy Google Maps loading
  • Easy to use

Installation

$ npm install react-gmaps --save

Demo

http://react-gmaps.herokuapp.com/

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {Gmaps, Marker, InfoWindow, Circle} from 'react-gmaps';

const coords = {
  lat: 51.5258541,
  lng: -0.08040660000006028
};

const params = {v: '3.exp', key: 'YOUR_API_KEY'};

class App extends React.Component {

  onMapCreated(map) {
    map.setOptions({
      disableDefaultUI: true
    });
  }

  onDragEnd(e) {
    console.log('onDragEnd', e);
  }

  onCloseClick() {
    console.log('onCloseClick');
  }

  onClick(e) {
    console.log('onClick', e);
  }

  render() {
    return (
      <Gmaps
        width={'800px'}
        height={'600px'}
        lat={coords.lat}
        lng={coords.lng}
        zoom={12}
        loadingMessage={'Be happy'}
        params={params}
        onMapCreated={this.onMapCreated}>
        <Marker
          lat={coords.lat}
          lng={coords.lng}
          draggable={true}
          onDragEnd={this.onDragEnd} />
        <InfoWindow
          lat={coords.lat}
          lng={coords.lng}
          content={'Hello, React :)'}
          onCloseClick={this.onCloseClick} />
        <Circle
          lat={coords.lat}
          lng={coords.lng}
          radius={500}
          onClick={this.onClick} />
      </Gmaps>
    );
  }

};

ReactDOM.render(<App />, document.getElementById('gmaps'));

Test

$ npm test