title: Animate symbol on multiple geodesic polylines
body: <p>I want to animate symbols though multiple geodesic polylines...i tired to do this in a  for loop. the lines get drawn but the circle (symbol) does not animate..it just stays at the starting point here is my code.</p>
  
  <pre><code>    var poly;
      var geodesic;
      var map;
      var clickcount = 0;
  
      function initialize() {
  
  
          var styles = [{ featureType: "landscape", stylers: [{ color: "#000514"}] }, { featureType: "administrative.country", stylers: [{ weight: 0.1 }, { color: "#009acd"}] }, { featureType: "water", stylers: [{ color: "#1f4fa5dc"}] }, { featureType: "road", stylers: [{ color: "#000514"}] }, { featureType: "administrative.locality", stylers: [{ color: "#7cfc00" }, { visibility: "off"}] }, { featureType: "landscape.man_made", stylers: [{ visibility: "off"}] }, { featureType: "poi", stylers: [{ visibility: "off"}] }, { featureType: "administrative.province", stylers: [{ visibility: "on"}]}];
          var mapOptions = {
              center: new google.maps.LatLng(7.3, 80.6333),
              zoom: 3,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
          map.setOptions({ styles: styles });
  
          var lineSymbol = {
              path: google.maps.SymbolPath.CIRCLE,
              scale: 2,
              strokeColor: '#FF0000'
          };
  
  
          var i;
          for (i = 0; i &lt; 50; i = i + 5) {
  
  
              var flightPlanCoordinates = [
              new google.maps.LatLng(7.3, 80.6333),
              new google.maps.LatLng(23.772323 + i, -102.214897 - i)];
              var polyline = new google.maps.Polyline({
                  path: flightPlanCoordinates,
                  icons: [{ icon: lineSymbol, offset: '100%'}],
                  strokeColor: "#FF0000",
                  strokeOpacity: 1.0,
                  strokeWeight: 1,
                  geodesic: true                  
              });
  
              polyline.setMap(map);
              animateCircle();
          }
      }
  
      function animateCircle() {
          var count = 0;
          offsetId = window.setInterval(function () {
              count = (count + 1) % 200;
  
              var icons = polyline.get('icons');
              icons[0].offset = (count / 2) + '%';
              polyline.set('icons', icons);
          }, 20);
      }
  </code></pre>
  
  <p>please help me on this one..i would love to see this work :) thank you very much.</p>