Google Maps display route from json

Question

I have the next problem to display a route from basic JSON.

1. I do a this call on backend side: curl to https://maps.googleapis.com/maps/api/directions/json
2. I send back the response json to frontend
3. 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
4. I try to create the routeResponse json based on backend json from googleapi:

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]
});

The problem is I see the start and end markers + legs points but don't see the line:

What should I do to have a correct display routes ? Similar with the flow 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);
    }
})

Answer 1

Given you made a backend request to Directions webservice, and you're passing the complete response to your frontend, you'll need to process the results for them to become a valid DirectionResult object. This is how I'd do it:

if (response.status === 'OK') {


  var bounds = new google.maps.LatLngBounds(response.routes[0].bounds.southwest, response.routes[0].bounds.northeast);
  response.routes[0].bounds = bounds;

  response.routes[0].overview_path = google.maps.geometry.encoding.decodePath(response.routes[0].overview_polyline.points);


  response.routes[0].legs = response.routes[0].legs.map(function (leg) {
    leg.start_location = new google.maps.LatLng(leg.start_location.lat, leg.start_location.lng);
    leg.end_location = new google.maps.LatLng(leg.end_location.lat, leg.end_location.lng);
    leg.steps = leg.steps.map(function (step) {
      step.path = google.maps.geometry.encoding.decodePath(step.polyline.points);
      step.start_location = new google.maps.LatLng(step.start_location.lat, step.start_location.lng);
      step.end_location = new google.maps.LatLng(step.end_location.lat, step.end_location.lng);
      return step;
    });
    return leg;
  });

  directionsDisplay.setDirections(response);
}

Basically, when you use the google.maps.DirectionsService class, the library takes care, on your behalf, to transform to and from two actors:

1. The routing service (backend Directions API) in charge of providing a route solution for the question "how do I get from A to B"? It makes no assumptions about the way you will use its result.

2. The drawing service (frontend google.maps.DirectionsRenderer class) in charge of showing the user the visual representation of a generic (but detailed) route. It makes no assumptions on where did you get the routing solution from as long as you feed it the right structure (it is expecting an instance of google.maps.DirectionsResult).

When you chose to use curl or any other server side library to request for directions, you filled the gap to translate the frontend google.maps.DirectionsRequest object into a properly URL encoded Directions API Request. Now you need to translate the Directions API Response back into an instance of google.maps.DirectionsResult.

Even if the JSON result is mostly an object, the renderer does not and should not assume that a plain object should be used to instance paths, routes, positions or legs.