How to change the positions of markers on the google map every 10 seconds in Flutter? - google-maps

Question

Inside the 10 seconds Timer function which calls the API CONTINOUSLY, the markers (positions - latitudes and longitudes) on the google map are loaded properly at the FIRST TIME. But, the problem is that the updated markers are NOT EFFECTING at the SECOND TIME in the Widget.
FIRST TIME refers to the Timer function which executes the codes after 10 seconds at the first time.
SECOND TIME refers to the Timer function which executes the codes after 10 seconds at the second time.
class _MyAppState extends State<Monitor> {
// Initialize the markers
late Set<Marker> _markers = new Set();
// Initialize the Google Map
late Completer<GoogleMapController> _controller = Completer();
// Initialize the camera possition
late CameraPosition _currentPosition;
// Initialize the time to be displayed
late String? time = "";
// At the very beginning of the app
#override
void initState() {
super.initState();
// Set the camera possition of the google map
_currentPosition = CameraPosition(
target: LatLng(7.8731, 80.7718),
zoom: 7.5,
);
// Start initializing the variables for GIS information
dynamic lat = "";
dynamic lon = "";
dynamic id = "";
dynamic vehicle = "";
dynamic mtime = "";
dynamic speed = "";
// End initializing the variables for GIS information
// Start the Timer which executes the codes for each 10 seconds **************************************************************************
Timer mytimer = Timer.periodic(Duration(seconds: 10), (timer) async {
//get current date and time
DateTime timenow = DateTime.now();
time = timenow.hour.toString() + ":" + timenow.minute.toString() + ":" + timenow.second.toString();
// Call the API which sends back the GIS Information
MonitorProcess monitorProcess = new MonitorProcess();
http.Response response = await monitorProcess.getMapDetailsForMonitorProcess();
// Get the GIS information
dynamic responseBody = jsonDecode(response.body);
// Set state to change the states and behavoirs
setState(() {
// Cear old markers before new markers comming
_markers.clear();
// Start storing makers for google map -------------------------------------------------
for (var i = 0; i < responseBody['response'].length; i++) {
lat = responseBody['response'][i]['lat'];
lon = responseBody['response'][i]['lon'];
id = responseBody['response'][i]['id'].toString();
vehicle = responseBody['response'][i]['vehicle'];
mtime = responseBody['response'][i]['mtime'];
speed = responseBody['response'][i]['speed'].toString();
_markers.add(Marker(
markerId: MarkerId(id.toString()),
position: LatLng(double.parse(lat), double.parse(lon)),
infoWindow: InfoWindow(
title: vehicle,
snippet: lat +
"," +
lon +
"Time: " +
mtime +
"Speed: " +
speed.toString() +
"vehicle: " +
vehicle,
)));
}
// End storing makers for google map ---------------------------------------------------
});
//mytimer.cancel() //to terminate this Timer
});
// End the Timer which executes the codes for each 10 seconds ******************88********************************************************
}
// Start displaying the google map markers in the widget ---------------------------------------
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "Test GIS 001",
home: Scaffold(
appBar: AppBar(
title:Text("Display GIS Information Every 10 Seconds"),
backgroundColor: Colors.redAccent,
),
body: Container(
//height: 260,
color: Colors.red.shade50,
child: /*Center(
child: Text(time, style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),),
//show time on UI
)*/
GoogleMap(
initialCameraPosition: _currentPosition,
markers: _markers,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
)
)
);
}
// End displaying the google map markers in the widget ---------------------------------------
}
There is nothing wrong with the API because the updated latitudes and longitudes and other details are coming for each 10 seconds continuously.
I tried to change the state of the widget using setState() method, BUT HERE THE PROBLEM is that the widget is not updating the contents which holds google map markers.