draw polylines between multiple predefined markers using direction api - flutter

Question

This is my url
https://maps.googleapis.com/maps/api/directions/json?key={My api key}&units=metric&origin=27.671690422260465,84.40326005320367&destination=27.6764151316667,84.41106864336271&mode=driving&waypoints=27.671690422260465,84.403260053203670|27.677023212852635,84.406927312726400|27.676814185326755,84.409158910582240|27.677004210366814,84.410972083840110|27.676415131666700,84.411068643362710
This is my code to draw polylines
void drawPolyLines() async {
// getAddressFromLatLng();
String origin = "";
String url = "";
http.Response? response;
var ltLn = latLag
.toString()
.replaceAll(",", "|")
.replaceAll(":", ",")
.replaceAll("[", "")
.replaceAll("]", "")
.replaceAll(" ", "");
List<Placemark> placemarks = [];
for (int i = 0; i < latLen.length; i++) {
placemarks = await placemarkFromCoordinates(
latLen[i].latitude, latLen[i].longitude);
}
log("second for vhitra");
url =
"https://maps.googleapis.com/maps/api/directions/json?key=${Keys.googleApiKey}&units=metric&origin=${latLen.first.latitude},${latLen.first.longitude}&destination=${latLen.last.latitude},${latLen.last.longitude}&mode=driving&waypoints=$ltLn}";
response = await http.post(Uri.parse(url));
pResponse = pRes.polylineResponseFromJson(response.body);
log("This is url>>>>>>>>>>>>>>>>>>>>>>>>>> $url");
log("THis is response ${response.body}");
try {
//PolylinePoints polylinePoints = PolylinePoints();
for (int i = 0; i < pResponse.routes![0].legs![0].steps!.length; i++) {
polylin.add(Polyline(
polylineId: PolylineId(
pResponse.routes![0].legs![0].steps![i].polyline!.points!),
points: [
LatLng(
pResponse.routes![0].legs![0].steps![i].startLocation!.lat!,
pResponse.routes![0].legs![0].steps![i].startLocation!.lng!),
LatLng(pResponse.routes![0].legs![0].steps![i].endLocation!.lat!,
pResponse.routes![0].legs![0].steps![i].endLocation!.lng!),
],
width: 3,
color: Colors.red));
}
} catch (e) {
rethrow;
}
//}
//log("This is map response ${response.body}");
}
in my api call when i use wayPoints then a polyline is drawn between start and end point leaving other markers like this
but i want to connect the polylines which is shown in google map in the same order which markers are shown but i am unable to do so need some help in here.

Answer 1

Do it like this i found the solution i am posting it so that it might may come in handy to others.
void drawPolyLines() async {
http.Response? response;
var ltLn = latLag
.toString()
.replaceAll(",", "|")
.replaceAll(":", ",")
.replaceAll("[", "")
.replaceAll("]", "")
.replaceAll(" ", "");
String origin = "${latLen.first.latitude},${latLen.first.longitude}";
String destination = "${latLen.last.latitude},${latLen.last.longitude}";
String url =
"https://maps.googleapis.com/maps/api/directions/json?key=${Keys.googleApiKey}&origin=$origin&destination=$destination&mode=driving&waypoints=$ltLn";
response = await http.post(Uri.parse(url));
pResponse = pRes.polylineResponseFromJson(response.body);
try {
PolylineId id = PolylineId(DateTime.now().microsecond.toString());
for (int i = 0; i < (pResponse.routes![0].legs ?? []).length; i++) {
for (int j = 0; j < pResponse.routes![0].legs![i].steps!.length; j++) {
final Polyline polyline = Polyline(
polylineId: PolylineId(
pResponse.routes![0].legs![i].steps![j].polyline!.points!),
width: 2,
color: Colors.blue,
startCap: Cap.roundCap,
endCap: Cap.buttCap,
points: [
LatLng(
pResponse.routes?[0].legs?[i].steps?[j].startLocation?.lat ??
0.0,
pResponse.routes?[0].legs?[i].steps?[j].startLocation?.lng ??
0.0),
LatLng(
pResponse.routes?[0].legs?[i].steps?[j].endLocation?.lat ??
0.0,
pResponse.routes?[0].legs?[i].steps?[j].endLocation?.lng ??
0.0),
],
);
polylin.add(polyline);
polyLines[id] = polyline;
update();
}
update();
}
} catch (e) {
rethrow;
}
}