title: React-google-maps render directions
body: <p>I am working with the react-google-maps package <a href="https://github.com/tomchentw/react-google-maps" rel="nofollow noreferrer">https://github.com/tomchentw/react-google-maps</a> to make a request to the google maps javascript API directions service <a href="https://developers.google.com/maps/documentation/javascript/examples/directions-simple" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/examples/directions-simple</a>. I am getting the response back from the API as expected and can log it to the browser but I can not figure out how to get the polyline to render in the map component. </p>
  
  <p>This line of code 
     <code>directionsDisplay.setMap(map);</code>
  was returning an error  of </p>
  
  <blockquote>
    <p>"InvalidValueError: setMap: not an instance of Map  directions".</p>
  </blockquote>
  
  <p>So I commented it out because it seems that the map is set by passing the <code>handleMapLoad()</code> to the GoogleMap component through refs. Some guidance on how to display the polyline would be much appreciated.</p>
  
  <pre><code>    /*global google*/
      import React, { Component } from "react";
      import { withGoogleMap, GoogleMap } from "react-google-maps";
  
      const GettingStartedGoogleMap = withGoogleMap(props =&gt; (
        &lt;GoogleMap
          ref={props.onMapLoad}
          defaultZoom={5}
          defaultCenter={{lat: 41.85, lng: -117.65}}
        &gt;
        &lt;/GoogleMap&gt;
      ));
  
      export default class GettingStartedExample extends Component {
        handleMapLoad = this.handleMapLoad.bind(this);
  
        handleMapLoad(map) {
          this.mapComponent = map;
          if (map) {
            console.log(map.getZoom());
          }
          const directionsService = new google.maps.DirectionsService();
          const directionsDisplay = new google.maps.DirectionsRenderer(); 
  
          // directionsDisplay.setMap(map);
  
          const makeRequest = function() {
            calculateAndDisplayRoute(directionsService, directionsDisplay);
          };
          function calculateAndDisplayRoute(directionsService, directionsDisplay) {
             directionsService.route({
               origin: 'San Francisco',
               destination: 'Portland',
               travelMode: 'DRIVING'
            }, function(response, status) {
              if (status === 'OK') {
                directionsDisplay.setDirections(response);
                console.log(response)
              } else {
                window.alert('Directions request failed due to ' + status);
              }
            });
          }
          makeRequest();
        }
        render() {
          return (
            &lt;div style={{height: `500px`}}&gt;
              &lt;GettingStartedGoogleMap
                containerElement={&lt;div style={{ height: `100%` }} /&gt;}
                mapElement={&lt;div style={{ height: `100%` }} /&gt;}
                onMapLoad={this.handleMapLoad}
              /&gt;
            &lt;/div&gt;
           );
         }
       }
  </code></pre>