Displaying dynamic latitude and longitude data on Google Maps while using setInterval() function. Code snippet below:
this.timer = setInterval(()=>{this.getMapData();},30000);
An issue arises where the map flickers when updating the data with this.getMapData(). How can the data be updated every 30 seconds without causing flickering on the div/map?
getMapData() {
this.spinner.show();
this.serv.getMapData(this.ds, this.ln).subscribe(res => {
this.spinner.hide();
this.deleteMarkers();
if (res.Data && res.Data.length > 0) {
this.mapData = res.Data;
console.log(JSON.stringify(this.mapData));
if (this.mapData != null && this.mapData.length > 0) {
for (var i = 0; i < this.mapData.length; i++) {
var latlng = {lat: parseFloat(this.mapData[i].latitude), lng: parseFloat(this.mapData[i].longitude)};
this.addMarker(latlng, this.mapObject, this.mapData[i].Name);
this.markerName = this.mapData[i].Name;
}
}
} else {
this.toastr.error('No Data Found', 'Oops!');
}
},err=>{
this.spinner.hide();
});
}
addMarker(latlng, mapobj, markerLabel) {
var marker = new google.maps.Marker({
position: latlng,
label: '',
map: mapobj,
animation: google.maps.Animation.DROP,
});
var infowindow = new google.maps.InfoWindow({
content: markerLabel
});
google.maps.event.addListener(marker, 'click', function() {
// infowindow.open(Map,marker);
});
infowindow.open(Map,marker);
// Set postion for the marker after getting dynamic data it posittions to the point
mapobj.setZoom(17);
mapobj.panTo(marker.position);
this.markers.push(marker);
}
// Sets the map on all markers in the array.
setMapOnAll(map) {
for (var i = 0; i < this.markers.length; i++) {
this.markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
clearMarkers() {
this.setMapOnAll(null);
}
// Deletes all markers in the array by removing references to them.
deleteMarkers() {
this.clearMarkers();
this.markers = [];
}