title: Display Directions with React Google Maps
body: <p>I am new to React and am attempting to use google maps to display directions. I have been able to get it to display a single marker but have not found how to reconfigure the code to display the directions. Below is my most recent attempt but it will only display the map... any assistance is appreciated:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { withGoogleMap, GoogleMap, DirectionsRenderer } from 'react-google-maps';
  class Map extends Component {
     render() {
     const GoogleMapExample = withGoogleMap(props =&gt; (
        &lt;GoogleMap
          defaultCenter = { { lat: 40.756795, lng: -73.954298 } }
          defaultZoom = { 13 }
        &gt;
  
  &lt;DirectionsRenderer origin={{ lat: 40.756795, lng: -73.954298 }} destination={{ lat: 41.756795, lng: -78.954298 }} /&gt;
        &lt;/GoogleMap&gt;
     ));
     return(
        &lt;div&gt;
          &lt;GoogleMapExample
            containerElement={ &lt;div style={{ height: `500px`, width: '500px' }} /&gt; }
            mapElement={ &lt;div style={{ height: `100%` }} /&gt; }
          /&gt;
        &lt;/div&gt;
     );
     }
  };
  export default Map;
  </code></pre>
  
  <p>I have the API key in a script tag in index.html</p>