Popularity
4.1
Stable
Activity
0.0
Stable
316
6
70
Monthly Downloads: 0
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.
-
google-map-react
Google map library for react that allows rendering components as markers :tada: -
react-geosuggest
A React autosuggest for the Google Maps Places API. -
react-googlemaps
A declarative React interface to Google Maps -
react-svg-map
A set of React.js components to display an interactive SVG map
AWS Cloud-aware infrastructure-from-code toolbox [NEW]
Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)
Promo
klo.dev
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