title: Google Maps display route from json
body: <p>I have the next problem to display a route from basic JSON.</p>
  
  <ol>
  <li>I do a this call on backend side:
  <code>curl to https://maps.googleapis.com/maps/api/directions/json</code></li>
  <li>I send back the response json to frontend</li>
  <li>In frontend I try render the route just for visual, why I don't use the google v3 API to get routeResponse object is because I don't want duplicate the same config as backend use and translate to requestObejct in frontent</li>
  <li>I try to create the routeResponse json based on backend json from googleapi:</li>
  </ol>
  
  <blockquote>
  <pre><code>data.overviewRouteDirectionSteps.bounds = new google.maps.LatLngBounds(
  data.overviewRouteDirectionSteps.bounds.southwest,data.overviewRouteDirectionSteps.bounds.northeast);
  
  data.overviewRouteDirectionSteps.overview_path=google.maps.geometry.encoding.decodePath(data.overviewRouteDirectionSteps.overview_polyline.points);
  
  data.overviewRouteDirectionSteps.overview_polyline = data.overviewRouteDirectionSteps.overview_polyline.points;
  
  directionsDisplay.setDirections({
      request: {
          travelModel: 'DRIVING'
      },
      routes: [data.overviewRouteDirectionSteps]
  });
  </code></pre>
  </blockquote>
  
  <p>The problem is I see the start and end markers + legs points but don't see the line:</p>
  
  <p><a href="https://i.stack.imgur.com/NupfI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NupfI.png" alt="enter image description here"></a></p>
  
  <p>What should I do to have a correct display routes ?
  Similar with the flow code:</p>
  
  <pre><code>directionsService.route(request, function(response, status) {
      if (status === 'OK') {
          console.log(response);
          directionsDisplay.setDirections(response);
      } else {
          console.log('Directions request failed due to ' + status);
      }
  })
  </code></pre>