Popularity
4.1
Stable
Activity
0.0
Stable
314
5
69
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
Appwrite - The Open Source Firebase alternative introduces iOS support
Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
Promo
appwrite.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