react-component-google-maps
Version:
A React Google Maps Component
58 lines (48 loc) • 2.39 kB
Markdown
#Google Maps React Component
[](https://badge.fury.io/js/react-component-google-maps)
##Documentation
Here's some quick documentation on the component.
###The Package
The package comes with two classes: **GoogleMap** and **Marker**.
**GoogleMap** is the [React](https://facebook.github.io/react/) component that renders a [Google Map](https://developers.google.com/maps/).
**Marker** is an interface that **GoogleMap** uses to render [Map Markers](https://developers.google.com/maps/documentation/javascript/markers). You can subclass (extend) this, or just provide plain JavaScript object with the same shape.
###Component Properites
**GoogleMap** takes the following component properties.
```javascript
static propTypes = {
center: PropTypes.shape({
lat: PropTypes.number,
lng: PropTypes.number
}),
containerStyle: PropTypes.object,
directionMarkers: PropTypes.shape({
origin: PropTypes.oneOfType([
PropTypes.object,
PropTypes.instanceOf(Marker)
]),
destination: PropTypes.oneOfType([
PropTypes.object,
PropTypes.instanceOf(Marker)
]),
waypoints: PropTypes.arrayOf(PropTypes.oneOfType([
PropTypes.object,
PropTypes.instanceOf(Marker)
]))
}),
mapOptions: PropTypes.object,
markers: PropTypes.arrayOf(PropTypes.oneOfType([
PropTypes.object,
PropTypes.instanceOf(Marker)
])),
subscribePanTo: PropTypes.func,
unsubscribePanTo: PropTypes.func,
zoom: PropTypes.number,
showDirections: PropTypes.bool,
showTraffic: PropTypes.bool
};
```
**mapOptions** is the [MapOptions](https://developers.google.com/maps/documentation/javascript/reference#MapOptions) object. Map styles can be passed through this property.
**center** and **zoom** are convenience properties that get rolled into **mapOptions** on initialization and update.
##Test Application
I have provided a test application built with [Redux](http://redux.js.org/) for development. This has been packaged up and put on a [GitHub page](https://pages.github.com/) for you to play with.
[View the Test App on GitHub Pages](https://paulrenenichols.github.io/react-component-google-maps/public/)