Preview of polyline drawing each coordinate by coordinate in google maps

Question

I have created an application in googlemap with poly-line, The application is working fine with the polyline drawn perfectly, But the problem is that i need to draw and show the preview of poly-line, drawing each coordinate by coordinate in google-maps

how can we achieve this? I have tried with setInterval(commented within my code) but its not working properly

Can anyone please tell me some solution for this

      $scope.autoRefresh = function() {
    try {
      //
      routePoints = [];
      if (!_.isEmpty(items)) {
        angular.forEach(items, function(cordinates) {
          //setInterval(function ()
          //{           
            routePoints.push(new google.maps.LatLng(cordinates.lat, cordinates.lng));
            var route = new google.maps.Polyline({
              path: routePoints,
              strokeColor: '#FF0000',
              strokeOpacity: 2.0,
              strokeWeight: 3,
              editable: false
            });
            route.setMap(map);
            moveMarker(map, marker, cordinates.lat, cordinates.lng);
            markLAT = cordinates.lat;
            markLNG = cordinates.lng;
          //}, 1000);
        });  
      }
      //  
    } catch (e) {
      console.log(e);
    }
  };

Plunker

Answer 1

1. setInterval is not the right method, you must use setTimeout, otherwise the functions will run endless(until the browser will crash)

2. you must increment the delay for setTimeout, otherwise you will not see an animation(all functions will be executed with a delay, but at the same time...after 1 second)

3. don't create a new Polyline on each function call, you'll have a lot of Polylines at the end(1 for each item) . Create a single Polyline and push the locations to the path of the Polyline

   $scope.autoRefresh = function() {
   try {
     var route = new google.maps.Polyline({
             path: [],
             strokeColor: '#FF0000',
             strokeOpacity: 2.0,
             strokeWeight: 3,
             editable: false,
             map:map
           }),
           index=0,
           marker=new google.maps.Marker({map:map,icon:icon});
   
     if (!_.isEmpty(items)) {
       angular.forEach(items, function(cordinates) {
         setTimeout(function ()
         {         
           route.getPath().push(new google.maps.LatLng(cordinates.lat, cordinates.lng));
   
           route.setMap(map);
           moveMarker(map, marker, cordinates.lat, cordinates.lng);
           markLAT = cordinates.lat;
           markLNG = cordinates.lng;
         }, 200*++index);
       });  
     }
     //  
   } catch (e) {
     console.log(e);
   }
   };
   

Plunker