1

I am new to google maps and Flutter and I was wondering if it is possible to retrieve the walking distance and duration when the user enters their destination.

For example, a user enters their workplace destination. The walking distance from this user's house to the bus stop would be the first distance and duration to retrieve and then when the user alights from the bus, the walk from the bus stop to the work place is another distance and duration to retrieve.

Here I am using the sample responses from the directions API documentation. https://developers.google.com/maps/documentation/directions/intro#DirectionsResponseElements

class GoogleMapsServices{
  Future<String> getRouteCoordinates()async{
    String url = "https://maps.googleapis.com/maps/api/directions/json? 
origin=Chicago,IL&destination=Los+Angeles,CA 
&waypoints=Joplin,MO|Oklahoma+City,OK &key=$apiKey";

    http.Response response = await http.get(url);
    print (response.body);

    Map values = jsonDecode(response.body);
    return values["routes"][0]["overview_polyline"]["points"];

  }

}

Currently I have these codes and looking at the response.body, I am able to retrieve the entire journey arrival time and so on but not the walking distance and duration to the bus stops and away from the bus stops. Is this possible to be done?

I am getting these results when I print the response.body

I/flutter (23129): {
I/flutter (23129):    "geocoded_waypoints" : [
I/flutter (23129):       {
I/flutter (23129):          "geocoder_status" : "OK",
I/flutter (23129):          "place_id" : "ChIJ7cv00DwsDogRAMDACa2m4K8",
I/flutter (23129):          "types" : [ "locality", "political" ]
I/flutter (23129):       },
I/flutter (23129):       {
I/flutter (23129):          "geocoder_status" : "OK",
I/flutter (23129):          "place_id" : "ChIJ69Pk6jdlyIcRDqM1KDY3Fpg",
I/flutter (23129):          "types" : [ "locality", "political" ]
I/flutter (23129):       },
I/flutter (23129):       {
I/flutter (23129):          "geocoder_status" : "OK",
I/flutter (23129):          "place_id" : "ChIJgdL4flSKrYcRnTpP0XQSojM",
I/flutter (23129):          "types" : [ "locality", "political" ]
I/flutter (23129):       },
I/flutter (23129):       {
I/flutter (23129):          "geocoder_status" : "OK",
I/flutter (23129):          "place_id" : "ChIJE9on3F3HwoAR9AhGJW_fL-I",
I/flutter (23129):          "types" : [ "locality", "political" ]
I/flutter (23129):       }
I/flutter (23129):    ],
I/flutter (23129):    "routes" : [
I/flutter (23129):       {
I/flutter (23129):          "bounds" : {
I/flutter (23129):             "northeast" : {
I/flutter (23129):                "lat" : 41.8781139,
I/flutter (23129):                "lng" : -87.6297872
I/flutter (23129):             },
I/flutter (23129):             "southwest" : {
I/flutter (23129):                "lat" : 34.0523523,
I/flutter (23129):                "lng" : -118.2435731
I/flutter (23129):             }
I/flutter (23129):          },
I/flutter (23129):          "copyrights" : "Map data ยฉ2019 Google, INEGI",
I/flutter (23129):          "legs" : [
I/flutter (23129):             {
I/flutter (23129):      

Thanks.

5
  • 1
    Why are you not able to get the walking distance? Did you inspect the response steps? Can you provide an example where you don't find it? Commented Nov 10, 2019 at 10:57
  • edited. There isn't any response steps. Thanks for the reply! Commented Nov 10, 2019 at 11:11
  • 1
    What you pasted above is obviously not the complete response... + you still haven't provided example origin and destination coordinates. Commented Nov 10, 2019 at 11:33
  • What do you mean that it is not the complete response? Sorry, I am new to this. Is printing response.body not getting all the responses out? Also, I followed the Sample Responses from the Directions API, which calculates the distance between Chicago, IL and Los Angeles and I still can't see the response steps. Thanks for the reply! Commented Nov 10, 2019 at 11:56
  • 1
    I don't know why, but your script only prints part of the response, or you copy-pasted only a portion of it but what you posted is not the complete response. Commented Nov 10, 2019 at 12:44

1 Answer 1

2

In your updated question you said you request TRANSIT directions from Chicago to LA. That will not include walking directions because for that kind of requests, the API considers the bus/train station as the origin and destination points in both cities.

If you enter a precise address though or coordinates (away from the departure/arrival stations), it will most likely include WALKING steps:

Here is an example using the JS API, but the result should be the same with the web service. Check below the map where I print the first and last step of the trip.

function initialize() {

  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();
  var center = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: center
  }

  var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  directionsDisplay.setMap(map);

  var start = "41.925704, -87.634690";
  var end = "34.021617, -118.355122";
  var method = 'TRANSIT';
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode[method]
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      console.log(response);
      directionsDisplay.setDirections(response);

      // Show first step
      $('.steps').append('<li>1. Distance: ' + response.routes[0].legs[0].steps[0].distance.text + '<br>Instructions: ' + response.routes[0].legs[0].steps[0].instructions + '<br>Travel mode: ' + response.routes[0].legs[0].steps[0].travel_mode + '</li>');
      
      var lastStep = response.routes[0].legs[0].steps.length -1;
      // Show last step
      $('.steps').append('<li>' + lastStep + '. Distance: ' + response.routes[0].legs[0].steps[lastStep].distance.text + '<br>Instructions: ' + response.routes[0].legs[0].steps[lastStep].instructions + '<br>Travel mode: ' + response.routes[0].legs[0].steps[lastStep].travel_mode + '</li>');
    }
  });

}
#map-canvas {
  height: 200px;
}

li {
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>

<ul class="steps"></ul>

2
  • I've tried using the coordinates you've provided but still I don't see the steps response. Perhaps I'll ask another question for the reason of the missing steps. Thanks for your help! Commented Nov 11, 2019 at 2:42
  • 1
    Hi I've managed to solve it already. Actually its just Flutter Android Studio limiting the print output. Your solution on the First and Last Step helped me a lot. Thanks! Commented Nov 11, 2019 at 15:39

Your Answer

By clicking โ€œPost Your Answerโ€, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.