Search code examples
flutterdartgoogle-mapspolyline

draw polylines between multiple predefined markers using direction api

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 thisenter image description here

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.

Solution

  • 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;
    }
  }