title: Google map with react-google-maps API
body: <p>I'm new with maps and I need to implement a route and also get the distance. I'm using react-google-map<strong>s</strong> API and I have found this way to show the map, and the route.</p>
  <p>It is the first time that I build a component like this and now I don't know how to access the data that is outside the class component. Basically, I would like to add the data from the search box (coordinates) to the origin in the DirectionService.route, and also to get the distance. Do you know how can I access that data?</p>
  <p>I've been reading that componentWillMount is being deprecated but it is the only way that I made it work, if you have any suggestions I'll be happy to try.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import  { compose, withProps, lifecycle } from 'recompose'
  import {withScriptjs, withGoogleMap, GoogleMap, DirectionsRenderer} from 'react-google-maps'
  const {
    StandaloneSearchBox
  } = require("react-google-maps/lib/components/places/StandaloneSearchBox");
  
  const DirectionsComponent = compose(
    withProps({
      googleMapURL: "https://maps.googleapis.com/maps/api/js?key='yourkey'&amp;libraries=geometry,drawing,places",
      loadingElement: &lt;div style={{ height: `400px` }} /&gt;,
      containerElement: &lt;div style={{ width: `100%` }} /&gt;,
      mapElement: &lt;div style={{height: `600px`, width: `600px` }}  /&gt;,
    }),
    
    withScriptjs,
    withGoogleMap,
    lifecycle({
      componentWillMount() {
        const refs = {};
  
        this.setState({
          places: [],
          onSearchBoxMounted: ref =&gt; {
            refs.searchBox = ref;
          },
          onPlacesChanged: () =&gt; {
            const places = refs.searchBox.getPlaces();
            console.log(places)
  
            this.setState({
              places
            });
          }
        });
      },
  
      componentDidMount() { 
        const google = window.google
        const DirectionsService = new google.maps.DirectionsService();
  
        DirectionsService.route({
          origin: new google.maps.LatLng(41.3851, -2.1734),
          destination: new google.maps.LatLng(40.4165, -3.70256),
          travelMode: google.maps.TravelMode.DRIVING,
        }, (result, status) =&gt; {
          console.log(result)
          if (status === google.maps.DirectionsStatus.OK) {
            this.setState({
              directions: {...result},
              markers: true
            })
            const distance = result.routes[0].legs[0].distance['text']
            console.log(distance)
          } else {
            console.error(`error fetching directions ${result}`);
          }
        });
      }
    })
  )(props =&gt;
    &lt;div data-standalone-searchbox=""&gt;
      &lt;StandaloneSearchBox
        ref={props.onSearchBoxMounted}
        bounds={props.bounds}
        onPlacesChanged={props.onPlacesChanged}
      &gt;
        &lt;input
          type="text"
          placeholder="Enter your destination"
          style={{
            boxSizing: `border-box`,
            border: `1px solid transparent`,
            width: `240px`,
            height: `32px`,
            padding: `0 12px`,
            borderRadius: `3px`,
            boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
            fontSize: `14px`,
            outline: `none`,
            textOverflow: `ellipses`
          }}
        /&gt;
      &lt;/StandaloneSearchBox&gt;
      &lt;ol&gt;
        {props.places.map(
          ({ place_id, formatted_address, geometry: { location } }) =&gt; (
            &lt;li key={place_id}&gt;
              {formatted_address}
              {" at "}
              ({location.lat()}, {location.lng()})
            &lt;/li&gt;
          )
        )}
      &lt;/ol&gt;
  
    &lt;GoogleMap defaultZoom={3}&gt;
      {props.directions &amp;&amp; &lt;DirectionsRenderer directions={props.directions} suppressMarkers={props.markers} /&gt;}
    &lt;/GoogleMap&gt;
  &lt;/div&gt;
    
  );
  
  class MyMapComponent extends React.PureComponent {
    constructor(props) {
      super(props)
      console.log(props)
      this.state = {
  
      }
    }
    
  
  render() {
      return (
        &lt;div&gt;
          
          &lt;DirectionsComponent/&gt;
        &lt;/div&gt;
        
      )
    }
  }
  export default MyMapComponent</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>