After thoroughly reading through the react-google-maps documentation, examples, and issues I have come to learn that the package does not support a lot of the things I will need to do for my application.

That being said, I have begun writing my own Google Maps API wrapper based off of the work done by Fullstack React. I've omitted a lot of the utilities used in the below mentioned as they can be found here or here.

That being said my solution is to wrap the google maps container in a higher order component and expose the Map Object via the window object:

App

const App = ({ store }) => (

  <Provider store={store}>

    <div>

      <Sidebar>

        <StartingPoint />

        {/* TODO */}

      </Sidebar>

      <GoogleMap />

    </div>

  </Provider>

);

containers/GoogleMap/wrapper.jsx Google Map Higher Order Component wraps GoogleMap Container

const defaultCreateCache = (options) => {

  const opts = options || {};

  const apiKey = opts.apiKey;

  const libraries = opts.libraries || ['places'];

  const version = opts.version || '3.24';

  const language = opts.language || 'en';



  return ScriptCache({

    google: GoogleApi({

      apiKey,

      language,

      libraries,

      version,

    }),

  });

};



const wrapper = options => (WrappedComponent) => {

  const createCache = options.createCache || defaultCreateCache;



  class Wrapper extends Component {

    constructor(props, context) {

      super(props, context);



      this.scriptCache = createCache(options);

      this.scriptCache.google.onLoad(this.onLoad.bind(this));



      this.state = {

        loaded: false,

        google: null,

      };

    }



    onLoad() {

      this.GAPI = window.google;



      this.setState({ loaded: true, google: this.GAPI });

    }



    render() {

      const props = Object.assign({}, this.props, {

        loaded: this.state.loaded,

        google: window.google,

      });

      const mapRef = (el) => { this.map = el; };



      return (

        <div>

          <WrappedComponent {...props} />

          <div ref={mapRef} />

        </div>

      );

    }

  }

  Wrapper.propTypes = {

    dispatchGoogleAPI: PropTypes.func,

  };

  Wrapper.defaultProps = {

    dispatchGoogleAPI: null,

  };



  return Wrapper;

};



export default wrapper;

containers/GoogleMap/index.jsx Google Map Container

class Container extends Component {

  constructor(props) {

    super(props);



    this.loadMap = this.loadMap.bind(this);

    this.calcRoute = this.calcRoute.bind(this);

  }



  componentDidUpdate() {

    const { origin, destination, route } = this.props;



    this.calcRoute(origin, destination);

  }



  loadMap(node) {

    if (this.props && this.props.google) {

      const { google } = this.props;



      // instantiate Direction Service

      this.directionsService = new google.maps.DirectionsService();



      this.directionsDisplay = new google.maps.DirectionsRenderer({

        suppressMarkers: true,

      });



      const zoom = 13;

      const mapTypeId = google.maps.MapTypeId.ROADMAP;

      const lat = 37.776443;

      const lng = -122.451978;

      const center = new google.maps.LatLng(lat, lng);



      const mapConfig = Object.assign({}, {

        center,

        zoom,

        mapTypeId,

      });



      this.map = new google.maps.Map(node, mapConfig);



      this.directionsDisplay.setMap(this.map);



      // make the map instance available to other components

      window.map = this.map

    }

  }



  calcRoute(origin, destination) {

    const { google, route } = this.props;



    if (!origin && !destination && !route) return;



    const waypts = [];



    waypts.push({

      location: new google.maps.LatLng(37.415284, -122.076899),

      stopover: true,

    });



    const start = new google.maps.LatLng(origin.lat, origin.lng);

    const end = new google.maps.LatLng(destination.lat, destination.lng);



    this.createMarker(end);



    const request = {

      origin: start,

      destination: end,

      waypoints: waypts,

      optimizeWaypoints: true,

      travelMode: google.maps.DirectionsTravelMode.DRIVING,

    };



    this.directionsService.route(request, (response, status) => {

      if (status === google.maps.DirectionsStatus.OK) {

        this.directionsDisplay.setDirections(response);

        const route = response.routes[0];

        console.log(route);

      }

    });



    this.props.calculateRoute(false);

  }



  createMarker(latlng) {

    const { google } = this.props;



    const marker = new google.maps.Marker({

      position: latlng,

      map: this.map,

    });

  }



  render() {

    return (

      <div>

        <GoogleMapView loaded={this.props.loaded} loadMap={this.loadMap} />

      </div>

    );

  }

}



const GoogleMapContainer = wrapper({

  apiKey: ('YOUR_API_KEY'),

  version: '3', // 3.*

  libraries: ['places'],

})(Container);



const mapStateToProps = state => ({

  origin: state.Trip.origin,

  destination: state.Trip.destination,

  route: state.Trip.route,

});



const mapDispatchToProps = dispatch => ({

  dispatchGoogleMap: (map) => {

    dispatch(googleMap(map));

  },

  calculateRoute: (route) => {

    dispatch(tripCalculation(route));

  },

});



const GoogleMap = connect(mapStateToProps, mapDispatchToProps)(GoogleMapContainer);



export default GoogleMap;