title: JavaScript pausing and resuming animation google map
body: <p>I am trying to pause <strong>Google Maps</strong> markers from animating when elements pushed into an array reaches a certain number. I have tried to clearing the timer and resuming it however i am having some problems. </p>
  
  <p>I have used <em>console.log()</em> to see where control is accessing however the only message i am getting from <em>console.log()</em> is <strong><em>'500 records saved'</em></strong>. The timer gets cleared however control does not access the else condition of the block to resume the timer.</p>
  
  <p>I have also looked at the SO question <a href="https://stackoverflow.com/questions/15363217/pause-and-play-google-map-marker-animation">Pause and play google map marker animation</a>
  However i am not using buttons to pause and play. </p>
  
  <p>Here is the code any guidance will be greatly appreciated.</p>
  
  <p><strong>Console.log()</strong>
  <em>'500 records saved'</em> and animation stops does not resume</p>
  
  <pre><code>var lastVertex = 1;
  var stepnum=0;
  var step = 90; //0.9 metres
  var tick = 100; // milliseconds
  var eol = [];
  </code></pre>
  
  <p><strong>StartAnimation</strong></p>
  
  <pre><code>function startAnimation(index) {
          if (timerHandle[index]) clearTimeout(timerHandle[index]);
            eol[index]=polyline[index].Distance();
            map.setCenter(polyline[index].getPath().getAt(0));
  
            poly2[index] = new google.maps.Polyline({path: [polyline[index].getPath().getAt(0)], strokeColor:"#FFFF00", strokeWeight:3});
  
            timerHandle[index] = setTimeout("animate("+index+",50)",2000);  // Allow time for the initial map display         
  
    }
  </code></pre>
  
  <p><strong>Animate</strong></p>
  
  <pre><code>function animate(index,d) {  
  
         if (d&gt;eol[index]) {
  
          marker[index].setPosition(endLocation[index].latlng);       
  
          if(marker[index].getPosition() == endLocation[index].latlng){
              console.log('Completed'+' '+index);
          }  
  
  
          return;
       }
  
           var p = polyline[index].GetPointAtDistance(d);
           marker[index].setPosition(p);
           updatePoly(index,d);
  
           timerHandle[index] = setTimeout("animate("+index+","+(d+step)+")", tick);
  
           citizens1.push({lat:marker[index].getPosition().lat(),lng:marker[index].getPosition().lng(),socialSecurityNumber:global_citizens[index].socialSecurityNumber});
  
           if(citizens1.length = 500){             
               console.log('500 records saved');          
               window.clearTimeout( timerHandle[index]);       
               citizens1 = []; //clear the array
           }
  
    }
  </code></pre>