A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the fullstack react team.

First, install the library:

npm install --save google-maps-react

Usage:

<Map google={this.props.google} zoom={14}>

  <Marker onClick={this.onMarkerClick}
          name={'Current location'} />

  <InfoWindow onClose={this.onInfoWindowClose}>
      <div>
        <h1>{this.state.selectedPlace.name}</h1>
      </div>
  </InfoWindow>
</Map>

The <Map /> component requires a google prop be included to work. Without the google prop, it will explode.

<Map google={window.google} />

The library includes a helper to wrap around the google maps API. The GoogleApiWrapper Higher-Order component accepts a configuration object which must include an apiKey. See lib/GoogleApi.js for all options it accepts.

import {GoogleApiWrapper} from 'GoogleMapsReactComponent'

// ...

export class Container extends React.Component {}

export default GoogleApiWrapper({
  apiKey: __GAPI_KEY__
})(Container)

The GoogleApiWrapper automatically passes the google instance loaded when the component mounts (and will only load it once).

If you prefer not to use the automatic loading option, you can also pass the window.google instance as a prop to your <Map /> component.

git clone https://github.com/fullstackreact/google-maps-react.git
cd google-maps-react
npm install
make dev

The Google Map React component library uses React and the Google API to give easy access to the Google Maps library. This Google Map React component library was built alongside the blog post blog.fullstack.io/articles/react-google-map-component/.

fullstackreact.com