How to Move Markers Position on Google Map in Flutter

In this example, you will learn to move or change the position of the marker among many markers from one location point to another location point. Here, I have shown to move one marker from one longitude and latitude to another. See the example below:

First, Declare two Variables for Markers:

Set<Marker> markers = Set(); //markers for google map
var mymarkers = [];

Here we have two locations to show markers:

LatLng loc1 = LatLng(27.6602292, 85.308027);  
LatLng loc2 = LatLng(27.6599592, 85.3102498); 

Now, we will add markers to mymarkers List:

mymarkers.add(
  {"id": "loc1",
    "marker": Marker( 
    markerId: MarkerId(loc1.toString()),
    position: loc1, 
    icon: BitmapDescriptor.defaultMarker
  )}
);

mymarkers.add(
  {"id": "loc2",
    "marker": Marker( 
    markerId: MarkerId(loc2.toString()),
    position: loc2, 
    icon: BitmapDescriptor.defaultMarker
  )}
);

Here, we have set the id on the map for the different markers, so that in the future we can retrieve the marker to change the location among many markers by ID.

Now, we will populate these map marker elements to another list for Google map:

markers = {};
for(var i = 0; i < mymarkers.length; i++){
    markers.add(
        mymarkers[i]["marker"]
    );
}

Now we will set this marker list to Google Maps:

GoogleMap( 
    markers: markers
)

Now we will change the position of marker location 2 like below:

int index = mymarkers.indexWhere((item) => item["id"] == "loc2");
mymarkers[index] = {
  "id": "loc2",
  "marker": Marker( 
  markerId: MarkerId(loc2.toString()),
  position: LatLng(27.661838, 85.308543), //move to new location
  icon: BitmapDescriptor.defaultMarker
)};

markers = {};
for(var i = 0; i < mymarkers.length; i++){
    markers.add( //repopulate markers
      mymarkers[i]["marker"]
    );
}

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

If you want to move markers smoothly, see this example: How to Move Marker Smoothly on Google Map in Flutter

The output Will look like below:

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
  var mymarkers = [];

  LatLng loc1 = LatLng(27.6602292, 85.308027);  
  LatLng loc2 = LatLng(27.6599592, 85.3102498); 

  @override
  void initState() {
    addMarkers();
    super.initState();
  }

  addMarkers() async {
      mymarkers.add(
        {"id": "loc1",
          "marker": Marker( 
          markerId: MarkerId(loc1.toString()),
          position: loc1, 
          icon: BitmapDescriptor.defaultMarker
        )}
      );

      mymarkers.add(
        {"id": "loc2",
          "marker": Marker( 
          markerId: MarkerId(loc2.toString()),
          position: loc2, 
          icon: BitmapDescriptor.defaultMarker
        )}
      );

        markers = {};
        for(var i = 0; i < mymarkers.length; i++){
            markers.add(
               mymarkers[i]["marker"]
            );
        }

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

  
  @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: (){ //moving marker with loc2,
                 int index = mymarkers.indexWhere((item) => item["id"] == "loc2");
                 mymarkers[index] = {
                    "id": "loc2",
                    "marker": Marker( 
                    markerId: MarkerId(loc2.toString()),
                    position: LatLng(27.661838, 85.308543), //move to new location
                    icon: BitmapDescriptor.defaultMarker
                  )};

                  markers = {};
                  for(var i = 0; i < mymarkers.length; i++){
                      markers.add( //repopulate markers
                        mymarkers[i]["marker"]
                      );
                  }

                  setState(() {
                      //refresh UI
                  });
             },
          ),
          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 from one place to another among many markers on Google map in Flutter.