Draw Route on Google Map - Flutter

Viewed 1418

I'm not sure how to pass custom latitudes and longitudes to draw a route.

I've used to following packages:

google_maps_flutter: ^2.0.1
flutter_polyline_points: ^0.2.6

I'm fetching the route using an API, which will be used in creating the actual Route on Google Map and it looks like the following:


    {
      "geoPoints": [
        {
          "latitude": <some_value>,
          "longitude": <some_value>
        }.
        {
          "latitude": <some_value>,
          "longitude": <some_value>
        }.
        {
          "latitude": <some_value>,
          "longitude": <some_value>
        }.
            ],
    }

My dart file has the following lines of codes:

onMapCreated() which calles the setPolines() below

void onMapCreated(GoogleMapController controller, LatLng origin, LatLng dest,) {
  _controller  =controller;
   setPolylines(origin, dest);
  }

setPolyLines() which is missing something. I'm not how to pass the polylines data that I'm fetching from the API

setPolylines(LatLng origin, LatLng dest) async {
  polylinePoints = PolylinePoints();

   PolylineResult result = await
      polylinePoints.getRouteBetweenCoordinates(
         'apiKey',
         PointLatLng(origin.latitude, origin.longitude), 
         PointLatLng(dest.latitude, dest.longitude),);
   if(result.points.isNotEmpty){
      // loop through all PointLatLng points and convert them
      // to a list of LatLng, required by the Polyline
      result.points.forEach((PointLatLng point){
         routeCoordinates.add(
            LatLng(point.latitude, point.longitude));
      });
   }

   PolylineId id = PolylineId('poly');

   Polyline polyline = Polyline(
    polylineId: id,
    color: Colors.red,
    points: routeCoordinates,
    width: 3,
  );
 
   polylines[id] = polyline;
}

Finally GoogleMap() where I think polylines property should be passing the route details as Google map is a child of FutureBuider()

         FutureBuilder(
            future: getTripPoints(widget.accessToken, widget.tripId),
            builder: (_, snapshot) {
              var arraySize = snapshot.data["geoPoints"].length;
              var initialLat = snapshot.data["geoPoints"][0]["latitude"];
              var initialLong = snapshot.data["geoPoints"][0]["longitude"];
              LatLng origin = LatLng(initialLat, initialLong);
              var finalLat = snapshot.data["geoPoints"][arraySize - 1]["latitude"];
              var finalLong = snapshot.data["geoPoints"][arraySize - 1]["longitude"];
              LatLng dest = LatLng(finalLat, finalLong);
              // routeCoordinates = snapshot.data["geoPoints"];
              print(origin);
              print(dest);
              return GoogleMap(
                markers: _markers,
                zoomGesturesEnabled: true,
                // zoomControlsEnabled: false,
                polylines: Set<Polyline>.of(polylines.values),
                mapType: MapType.normal,
                initialCameraPosition: CameraPosition(
                  target: origin,
                  zoom: 14,
                ),
                onMapCreated: (controller) => onMapCreated(controller, origin, dest,),
              );
            },
          ),

Can anybody guide me here?

1 Answers

It seems that you're missing the setState method inside the setPolyLines(). Use setState to trigger a rebuild so the updated values are reflected in the UI.

 setState(() {
     PolylineId id = PolylineId('poly');

   Polyline polyline = Polyline(
    polylineId: id,
    color: Colors.red,
    points: routeCoordinates,
    width: 3,
  );
 
   polylines[id] = polyline;
    });
Related