react-googlemaps

A declarative React interface to Google Maps

Monthly Downloads: 0

Programming language: JavaScript

License: MIT License

Tags: UI Components     Map     React     React-component     Google Maps     Googlemaps     Maps    

Latest version: v0.4.0

README

React Google Maps

A declarative React interface to Google Maps.

Check it out:

• [Example usage](examples)
• [API docs](docs/api.md)
• [What's new](CHANGELOG.md)

Important Notes

This is an alpha release. The API and organizational structure are subject to change. Comments and contributions are much appreciated.

Installation

npm install react-googlemaps --save

This library is written with CommonJS modules. If you are using browserify, webpack, or similar, you can consume it like anything else installed from npm.

Usage

var React = require('react');
var ReactGoogleMaps = require('react-googlemaps');
var GoogleMapsAPI = window.google.maps;

var Map = ReactGoogleMaps.Map;
var Marker = ReactGoogleMaps.Marker;
var OverlayView = ReactGoogleMaps.OverlayView;

function handleClick(e) {
  console.log('Clicked at position', e.latLng);
}

React.render(
  <Map
    initialZoom={10}
    initialCenter={new GoogleMapsAPI.LatLng(-41.2864, 174.7762)}>

    <Marker
      onClick={handleClick}
      position={new GoogleMapsAPI.LatLng(-41.2864, 174.7762)} />

    <OverlayView
      style={{backgroundColor: '#fff'}}
      position={new GoogleMapsAPI.LatLng(-41.2864, 174.7762)}>
      <p>Some content</p>
    </OverlayView>
  </Map>,
  mountNode
);

Checkout the [API docs](docs/api.md) or the [examples](examples) directory for more detailed usage.

License

Licensed under MIT. [Full license here »](LICENSE)