How to Draw Polyline Trails of Moving Maker on Google Map in Flutter

In this example, you will learn how to draw polyline trails behind the marker while moving it from one location to another location on Google Map in Flutter. This feature is an important factor if you are making any GPS tracking or vehicle tracking app.

See the Example First: How to Move Marker Smoothly on Google Map in Flutter

Read this example, because we are going to put the extra feature of drawing polylines trails behind while moving marker smoothly from on position to another on Google map.

First, declare the polylines list variable:

Set<Polyline> polylines={};

Our initial location:

LatLng loc1 = LatLng(27.6602292, 85.308027); 

Now, declare two position variables for start and end position of polylines:

late LatLng pos1; //positions for polylines
late LatLng pos2;

Now,

pos1 = loc1;
pos2 = loc1;

While moving marker:

pos1 = pos2;
pos2 = LatLng(new latitude, new longitude);

Now, on every movement we will add new polyline to list:

polylines.add(Polyline(
    polylineId: PolylineId(pos2.toString()),
    visible: true,
    width: 5, //width of polyline
    points: [
        pos1,
        pos2,
    ],
    color: Colors.deepPurpleAccent, //color of polyline
));

Now, show the polylines on Google Map:

GoogleMap( 
     polylines: polylines, //polylines list
)

Full App Example:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  GoogleMapController? mapController; //contrller for Google map
  Set<Marker> markers = Set(); //markers for google map
  Set<Polyline> polylines={};

  LatLng loc1 = LatLng(27.6602292, 85.308027);  

  int numDeltas = 50; //number of delta to devide total distance
  int delay = 50; //milliseconds of delay to pass each delta
  var i = 0;
  double? deltaLat; 
  double? deltaLng;
  var position; //position variable while moving marker

  late LatLng pos1; //positions for polylines
  late LatLng pos2;

  @override
  void initState() {
    position = [loc1.latitude, loc1.longitude]; //initial position of moving marker
    pos1 = loc1;
    pos2 = loc1;
    addMarkers();
    super.initState();
  }

  addMarkers() async {
      markers.add(
        Marker( 
          markerId: MarkerId(loc1.toString()),
          position: loc1, 
          icon: BitmapDescriptor.defaultMarker
        )
      );

      setState(() {
          //refresh UI
      });
  }

  transition(result){
      i = 0;
      deltaLat = (result[0] - position[0])/numDeltas;
      deltaLng = (result[1] - position[1])/numDeltas;
      moveMarker();
  }

  moveMarker(){
      position[0] += deltaLat;
      position[1] += deltaLng;
      var latlng = LatLng(position[0], position[1]);
      
      markers = {
        Marker(
            markerId: MarkerId("movingmarker"),
            position: latlng,
            icon: BitmapDescriptor.defaultMarker,
        )
      };

        pos1 = pos2;
        pos2 = LatLng(position[0], position[1]);
        
        polylines.add(Polyline(
            polylineId: PolylineId(pos2.toString()),
            visible: true,
            width: 5, //width of polyline
            points: [
               pos1,
               pos2,
            ],
            color: Colors.deepPurpleAccent, //color of polyline
        ));

      setState(() {
         //refresh UI
      });
    

      if(i!=numDeltas){
          i++;
          Future.delayed(Duration(milliseconds: delay), (){
              moveMarker();
          });
      }
  }

  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Move Marker Position on Google Map"),
             backgroundColor: Colors.deepPurpleAccent,
          ),
          floatingActionButton: FloatingActionButton(
             child: Text("Move"),
             onPressed: (){
                 var result = [27.661838, 85.308543];
                 //latitude and longitude of new position

                 transition(result);
                 //start moving marker
             },
          ),
          body: GoogleMap( //Map widget from google_maps_flutter package
                  zoomGesturesEnabled: true, //enable Zoom in, out on map
                  initialCameraPosition: CameraPosition( //innital position in map
                    target: loc1, //initial position
                    zoom: 14.0, //initial zoom level
                  ),
                  markers: markers, //markers to show on map
                  polylines: polylines, //polylines list
                  mapType: MapType.normal, //map type
                  onMapCreated: (controller) { //method called when map is created
                    setState(() {
                      mapController = controller; 
                    });
                  },
          )
       );
  }
}

In this way, you can draw polyline trails behind marker while moving marker from one location to another location on Google Map.