Popularity
4.0
Declining
Activity
0.0
Stable
318
8
68
Programming language: JavaScript
License: MIT License
Latest version: v1.9.0
react-gmaps alternatives and similar libraries
Based on the "Map" category.
Alternatively, view react-gmaps alternatives based on common mentions on social networks and blogs.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Promo
surveyjs.io
Do you think we are missing an alternative of react-gmaps or a related project?
README
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