How to Move Marker Smoothly on Google Map in Flutter

In this example, you will learn how to move the position of the marker from one location to another location smoothly like running a vehicle on Google Maps in Flutter. Moving markers smoothly is a very important factor while you are making any app to show vehicles on Google Map. See the example below:

Read This Article First: How to Move Markers Position on Google Map in Flutter

First Declare these Delta variables:

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

Note, the numDeltas and delay will be the lower, the faster will be the speed of the moving marker.

Here is the initial location where the marker is shown:

Set<Marker> markers = Set(); //markers for google map

LatLng loc1 = LatLng(27.6602292, 85.308027);

Now add a marker:

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

Now set the value of position:

position = [loc1.latitude, loc1.longitude];

Declare these two Functions:

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,
      )
    };

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

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

Now to Move the marker, call the function with the new location position:

var result = [27.661838, 85.308543];
//latitude and longitute of new position

transition(result);
//start moving marker

Set markers on Google Map:

GoogleMap(
    markers: markers,
)

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

  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

  @override
  void initState() {
    position = [loc1.latitude, loc1.longitude]; //initial position of moving marker
    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,
        )
      };

      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
                  mapType: MapType.normal, //map type
                  onMapCreated: (controller) { //method called when map is created
                    setState(() {
                      mapController = controller; 
                    });
                  },
          )
       );
  }
}

In this way, you can move the marker position smoothly on Google map in Flutter.

Share This Facebook Twitter Reddit LinkedIn Pinterest

How to Move Markers Position on Google Map in Flutter

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