Flutter: How to clear polylines from Google Maps

Question

I have created a Google Maps widget with markers and polylines with the code below.

Everything works fine, except that when I draw a polyline between two coordinates, and later try to remove it, the polyline doesn't get removed (at least not permanently). When I use the methods below to try to remove the old polyline, and add a new one I get two polylines:

_polyLine.clear()
_polyLine.remove("id")
polylines.removeWhere((m) => m.polylineId.value == 'polyId$_randPolyId')

It gets removed and then added again in addition to the new one. This results in the picture below:

...

void showPinsOnMap() {        
      // _polylines.removeWhere(
      // (m) => m.polylineId.value == 'polyId$_randPolyId');
      // _polylines.clear()
      _polylines = {};
      print("\n\n\nPolyLines Lenght: ${_polylines.length}\n\n\n");

   var pinPosition = LatLng(_currentLocation.latitude,_currentLocation.longitude);

   var destPosition = LatLng(_destinationLocation.latitude,
   _destinationLocation.longitude);
   _markers.add(Marker(
      markerId: MarkerId('sourcePin'),
      position: pinPosition,
      icon: _sourceIcon
   ));
   _markers.add(Marker(
      markerId: MarkerId('destPin'),
      position: destPosition,
      icon: _destinationIcon,
   ));

   setPolylines();
   notifyListeners();
}

...

...
void setPolylines() async {
   List<PointLatLng> result = await _polylinePoints.getRouteBetweenCoordinates(
   _googleAPIKey,
   _currentLocation.latitude,
   _currentLocation.longitude,
   _destinationLocation.latitude,
   _destinationLocation.longitude).catchError((onError){
     print("\n\n\n An Error Occured Possibly dure to network issues\n\n\n");
   });

  if(result != null){
    print("Results not null");
   if(result.isNotEmpty){
      result.forEach((PointLatLng point){
         _polylineCoordinates.add(
            LatLng(point.latitude,point.longitude)
         );
      });
       _isLoadingData = false;
      _polylines.add(Polyline(
        width: 5, 
        polylineId: PolylineId('polyId$_randPolyId'),
        color:
        Color.fromARGB(255, 40, 122, 198), 
        points: _polylineCoordinates
        ));
  }
  }
  notifyListeners();
}
...

score 9 · Answer 1 · answered Mar 04 '20 at 16:20

9

you need to clear polylineCoordinates before plotting new paths.

polylineCoordinates.clear(); // call this before checking result value.

polylineCoordinates.clear();
    if(result != null){
    print("Results not null");
   if(result.isNotEmpty){
      result.forEach((PointLatLng point){
         _polylineCoordinates.add(
            LatLng(point.latitude,point.longitude)
         );
      });

  }
}

answered Mar 04 '20 at 16:20

elijah

109
3

The above didn't work for me. Instead, I did like this. `Polyline polyline = polylines.values.firstWhere( (line) => line.polylineId.value == currentPolyLineId, orElse: () => null); //remove exisitng polyline if (this.mounted) { setState(() { polylines.removeWhere((key, value) => key == polyline.polylineId); }); } ` – Musthafa Sep 02 '21 at 11:02

Flutter: How to clear polylines from Google Maps

1 Answers1