javascript - Google Maps display route from json - Stack Overflow

admin管理员组

文章数量:1356294

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

1. I do a this call on backend side: curl to
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);
    }
})

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./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);
    }
})

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow asked Nov 7, 2017 at 22:04 LaurentiuLaurentiu 58466 silver badges2727 bronze badges 4

• related question: error in displaying Directions webservice result on to the google map – geocodezip Commented Nov 8, 2017 at 1:12
• Hi, in your suggestion the correct response use the javascript google object that are return from directionsService.route, for I must create manual that object, and my question how to create this object correctly ? – Laurentiu Commented Nov 8, 2017 at 16:11
• What have you tried? What errors do you get doing that? – geocodezip Commented Nov 8, 2017 at 18:10
• I don't get error, I just want to parse the JSON from https://maps.googleapis./maps/api/directions/json and display the route not just show the step points – Laurentiu Commented Nov 8, 2017 at 20:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Given you made a backend request to Directions webservice, and you're passing the plete response to your frontend, you'll need to process the results for them to bee 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.

本文标签： javascriptGoogle Maps display route from jsonStack Overflow