title: How to stop set Interval flickering using angular 2+
body: <p>Here i am displaying the dynamic data i.e lat and long on the google maps and here i am applying the setInterval() below is my code:</p>
  
  <pre><code>this.timer = setInterval(()=&gt;{this.getMapData();},30000);
  </code></pre>
  
  <p>here the issue is when ever the data is updating or calling the this.getMapData() then the map is also flickering.Is It possible to update the data for every 30 sec with out flickering the div/map</p>
  
  <pre><code>getMapData() {
      this.spinner.show();
      this.serv.getMapData(this.ds, this.ln).subscribe(res =&gt; {
        this.spinner.hide();
        this.deleteMarkers();
  
  
        if (res.Data &amp;&amp; res.Data.length &gt; 0) {
  
          this.mapData = res.Data;
          console.log(JSON.stringify(this.mapData));
  
  
          if (this.mapData != null &amp;&amp; this.mapData.length &gt; 0) {
            for (var i = 0; i &lt; 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=&gt;{
        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);
  
  
  
  
  
     // This is for 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 &lt; 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 = [];
    }
  </code></pre>