title: How to access google.maps.Map object with react-google-maps
body: <p>I have a pretty simple react application using <a href="https://github.com/tomchentw/react-google-maps" rel="nofollow noreferrer">https://github.com/tomchentw/react-google-maps</a> but I'm having difficulty understanding how to get a reference to my current map or how to access the <code>google.maps.Map</code> object in a custom component.</p>
  <p>I found <a href="https://github.com/tomchentw/react-google-maps/issues/161" rel="nofollow noreferrer">this</a> on the repo, but after reading through the posts I'm still a little confused.</p>
  <p>I'm starting my application building off of the <a href="https://tomchentw.github.io/react-google-maps/#directionsrenderer" rel="nofollow noreferrer">DirectionsRenderer</a> example.</p>
  <p>What I want to do next is add my own custom components for picking the starting point and using the Google Maps autocomplete API.</p>
  <blockquote>
  <p>Yes, I know that the package has a component for that already, but I
  need to do a little more than just search for a location on the map.</p>
  </blockquote>
  <p>In order to accomplish my needs I will do something like</p>
  <pre><code>const autocomplete = new google.maps.places.Autocomplete(node);
  autocomplete.bindTo('bounds', map);
  </code></pre>
  <p>Where <code>node</code> is the element I'm binding the autocomplete functionality and <code>map</code> is an instance of the <code>google.maps.Map</code> object.</p>
  <p>My application thus far:</p>
  <p><strong>App.jsx</strong></p>
  <pre><code>const App = ({ store }) =&gt; (
    &lt;Provider store={store}&gt;
      &lt;div&gt;
        &lt;Sidebar&gt;
          &lt;StartingPoint defaultText=&quot;Choose starting point&amp;hellip;&quot; /&gt;
        &lt;/Sidebar&gt;
        &lt;GoogleApiWrapper /&gt;
      &lt;/div&gt;
    &lt;/Provider&gt;
  );
  </code></pre>
  <p><strong>GoogleApiWrapper</strong></p>
  <pre><code>const GoogleMapHOC = compose(
    withProps({
      googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=geometry,drawing,places&amp;key=__GAPI_KEY',
      loadingElement: &lt;div style={{ height: '100vw' }} /&gt;,
      containerElement: &lt;div style={{ height: '100vh' }} /&gt;,
      mapElement: &lt;div style={{ height: '100%' }} /&gt;,
    }),
    withScriptjs,
    withGoogleMap,
    lifecycle({
      componentDidMount() {
        const DirectionsService = new google.maps.DirectionsService();
  
        // make google object available to other components
        this.props.onLoad(google);
  
        DirectionsService.route({
          origin: new google.maps.LatLng(41.8507300, -87.6512600),
          destination: new google.maps.LatLng(41.8525800, -87.6514100),
          travelMode: google.maps.TravelMode.DRIVING,
        }, (result, status) =&gt; {
          if (status === google.maps.DirectionsStatus.OK) {
            this.setState({
              directions: result,
            });
          } else {
            console.error(`error fetching directions ${result}`);
          }
        });
      },
    }),
  )(props =&gt; (
    &lt;GoogleMap
      ref={props.onMapMounted}
      defaultZoom={13}
      defaultCenter={new google.maps.LatLng(37.771336, -122.446615)}
    &gt;
      {props.directions &amp;&amp; &lt;DirectionsRenderer directions={props.directions} /&gt;}
    &lt;/GoogleMap&gt;
  ));
  </code></pre>
  <p>If I'm unable to access the <code>google.maps.Map</code> object outside of the wrapper I would alternatively like to access a reference to the element that contains the map so that I may instantiate a <code>new google.maps.Map(ref_to_elem, options);</code></p>
  <p>Any help would be greatly appreciated!</p>