react-component-google-maps

#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.

View the Test App on GitHub Pages