Google Maps React Component
Documentation
Here's some quick documentation on the component.
The Package
The package comes with two classes: GoogleMap and Marker.
GoogleMap is the React component that renders a Google Map.
Marker is an interface that GoogleMap uses to render Map Markers. You can subclass (extend) this, or just provide plain JavaScript object with the same shape.
Component Properites
GoogleMap takes the following component properties.
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 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 for development. This has been packaged up and put on a GitHub page for you to play with.
