elg0nz / react-gmaps

A Google Maps component for React.js

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 {Gmaps, Marker, InfoWindow} from 'react-gmaps';

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

const App = React.createClass({

  onMapCreated() {
    console.log('onMapCreated', this.refs.Gmaps.getMap());
    this.refs.Gmaps.getMap().setOptions({
      disableDefaultUI: true
    });
  },

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

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

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

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

});

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

Test

$ npm test