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.
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>