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

importReactfrom'react';importReactDOMfrom'react-dom';import{Gmaps,Marker,InfoWindow,Circle}from'react-gmaps';constcoords={lat: 51.5258541,lng: -0.08040660000006028};constparams={v: '3.exp',key: 'YOUR_API_KEY'};classAppextendsReact.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(<Gmapswidth={'800px'}height={'600px'}lat={coords.lat}lng={coords.lng}zoom={12}loadingMessage={'Be happy'}params={params}onMapCreated={this.onMapCreated}><Markerlat={coords.lat}lng={coords.lng}draggable={true}onDragEnd={this.onDragEnd}/><InfoWindowlat={coords.lat}lng={coords.lng}content={'Hello, React :)'}onCloseClick={this.onCloseClick}/><Circlelat={coords.lat}lng={coords.lng}radius={500}onClick={this.onClick}/></Gmaps>);}};ReactDOM.render(<App/>,document.getElementById('gmaps'));

Test

$ npm test