How to display Google Maps in React


I will walk through the process of diplaying Google Maps using React, Alt, and ES6. Alt is a user friendly library for managing data within your JavaScript applications. With Alt you can control the data flow in the React application like this:

Views ---> Actions ---> Stores ^---------------------------|

There are two main components in this example. The MapBox component, which is the source of states and props, and the Maps component, where we are going to render the actual Google Maps.

Components

Let's start coding the MapBox component:

// The MapBox component
import React from 'react';
import MapStore from 'stores/MapStore';
import MapActions from 'actions/MapActions';
import Maps from 'components/Maps';

export default class MapBox extends React.Component {
  constructor(props) {
    super(props);
    /* Declare the state of the app with Alt */
    this.state = MapStore.getState();
  }
  componentDidMount() {
    MapStore.listen(this._onChange);
  }
  componentWillUnmount() {
    MapStore.unlisten(this._onChange);
  }
  render() {
    return (
          <Maps mapOptions={this.state.mapOptions} mapInstance={this._handleMapInitialization} />
           );
 _handleMapInitialization = (mapReference) => {
   MapActions.setMapInstance(mapReference);
 }
}

And the Maps component:

// The Maps component
import React from 'react';
export default class Maps extends React.Component {
  componentDidMount() {
    const mapOptions = this.props.mapOptions;
    // ** Instantiating the Map ** //
    const map = new google.maps.Map(document.getElementById('map'), mapOptions);
    this.props.mapInstance(map);
  }
  render() {
    return (
         <div className="map-container">
           <div id="map"></div>
         </div>
    );
  }
}

Maps.propTypes = {
  mapOptions: React.PropTypes.object,
  mapInstance: React.PropTypes.func
};

Actions

The created map instance will be dispatched from here:

// MapActions.js
import alt from 'altInstance';
class MapActions {
  setMapInstance(mapInstance) {
    this.dispatch(mapInstance);
  }
}
export default alt.createActions(MapActions);

Stores

With Alt, instance variables declared anywhere in the store will become the state. In our case, this.map and this.mapOptions are both states. We can access these states in the views (components) once we call MapStore.getState();. When we dispatch the mapInstance from the 'MapActions', the 'MapStores' is listenting to these actions. That's what bindListeners are for. Both the state declaration and binding listeners are inside the constructor function.

// MapStore.js
import alt from 'altInstance';
class MapStore {
  /** STATES **/
  constructor () {
    this.map = {};
    this.mapOptions = {
      center: /* Map center object*/,
      zoom: /* Map zoom value */,
      styles: /* Map styles array*/
    };
    /** EVENTS LISTENERS **/
    this.bindListeners({
      handleMapInstance: MapActions.SET_MAP_INSTANCE
    });
  }
  handleMapInstance(mapInstance) {
    this.map = mapInstance;
  }
}
export default alt.createStore(MapStore, 'MapStore');