Animating multiple icons on multiple polylines

Question

Currently, I'm working on a project that animates a polyline and a circle from one point to another: http://jsfiddle.net/sumeetbansal/7nmz788j/, but I've been having trouble adapting some code I found to run several of these animated polylines simultaneously.

function initialize() {
var mapOptions = {
    center: new google.maps.LatLng(22.291, 53.027),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

el = document.getElementById('map-canvas');
var map = new google.maps.Map(el,mapOptions);

var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
    };

var start = new google.maps.LatLng (32.291, 3.027);
var endpt = new google.maps.LatLng (12.291, 103.027);
var coord = [start, endpt];
var line = new google.maps.Polyline({
    path: coord,
    strokeColor: '#393',
    strokeOpacity: 1,
    strokeWeight: 1,
    geodesic: true,
    map: map,
    icons: [{
        icon: lineSymbol,
        offset: '100%'
    }],
});

 var startpt = new google.maps.Marker({
  position: start,
  icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 8,
      strokeColor: '#393'
      },
  map: map,
  });

animateCircle();
var step = 0;
var numSteps = 250; 
var timePerStep = 1; 
var interval = setInterval(function() {
    step += 1;
    if (step > numSteps) {
        clearInterval(interval);
    } else {
        var theMotion = google.maps.geometry.spherical.interpolate(start,endpt,step/numSteps);
        line.setPath([start, theMotion]);
    }
  }, timePerStep);
}

function animateCircle() {
    var count = 0;
    window.setInterval(function() {
        count = (count + 1) % 200;
        var icons = line.get('icons');
        icons[0].offset = (count / 2) + '%';
        line.set('icons', icons);
        }, 20);
    }

google.maps.event.addDomListener(window, 'load', initialize);

Here is the current version of that project: http://jsfiddle.net/sumeetbansal/39gmud42/. I included an array containing new coordinates for the polylines and used loops to go through each set of coordinates, but it doesn't seem to be working after I tried integrating the new code (from here: Plotting multiple polylines on Google Maps) and I've been stumped for the better part of 2 days. Here's the new code below:

var trackLine = [];
var trackLats = [
  [
    [14.735, -20.595],
    [-13.913, 8.188]
  ],
  [
    [-14.788, 20.562],
    [13.879, -8.230]
  ],
  [
    [14.784, -20.546],
    [-13.818, 8.288]
  ],
  [
    [-14.837, 20.513],
    [13.784, -8.329]
  ],
  [
    [14.892, -20.439],
    [-13.758, 8.350]
   ]
  ];
var trackLons = [
  [
    [76.480, 90.967],
    [68.509, 98.386]
  ],
  [
    [-115.254, -100.759],
    [-123.226, -93.342]
  ],
  [
    [53.036, 67.521],
    [45.065, 74.937]
  ],
  [
    [-138.698, -124.204],
    [-146.669, -116.791]
  ],
  [
    [29.567, 44.049],
    [21.570, 51.438]
  ]
];

function initialize() {
 var mapOptions = {
        center: new google.maps.LatLng(22.291, 53.027),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

  el = document.getElementById('map-canvas');
  var map = new google.maps.Map(el,mapOptions);

  var trackCoords = new google.maps.MVCArray;
  var i, j, k;

  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#0099FF'          
    };

 for (i = 0; i < 5; i++) {
    for (j = 0; j < 2; j++) {
      trackCoords = [];
      for (k = 0; k < 2; k++) {
        trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
          trackLons[i][j][k]));
      }
      trackLine.push(new google.maps.Polyline({
      path: trackCoords,
      strokeColor: '#0099FF',
      strokeOpacity: 1,
      strokeWeight: 1,
      geodesic: true,
      map: map,
      icons: [{
          icon: lineSymbol,
          offset: '100%'
      }],
  }));

  var startpt = new google.maps.Marker({
      position: start,
      icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 8,
          strokeColor: '#0099FF'
          },
      map: map,
      });

  animateCircle();
  var step = 0;
  var numSteps = 250;           
  var timePerStep = 1;          
  var interval = setInterval(function() {
      step += 1;
      if (step > numSteps) {
          clearInterval(interval);
      } else {
          var theMotion = google.maps.geometry.spherical.interpolate(start,endpt,step/numSteps);
          line.setPath([start, theMotion]);
          }
      }, timePerStep);
trackCoords.clear;
    }
 }

function animateCircle() {
    var count = 0;
    window.setInterval(function() {
        count = (count + 1) % 200;
        var icons = line.get('icons');
        icons[0].offset = (count / 2) + '%';
        line.set('icons', icons);
        }, 20);
    }

google.maps.event.addDomListener(window, 'load', initialize);

There is a missing "}" in your posted code. Once I fix that I get a javascript error `Uncaught ReferenceError: start is not defined` — geocodezip, Jul 02 '15 at 18:14

geocodezip · Answer 1 · 2022-01-11T14:29:19.887

You need to reference all the polylines in the animateCircle function. Modify it to use the array trackLines.

function animateCircle() {
  var count = 0;
  window.setInterval(function() {
    for (var i = 0; i < trackLine.length; i++) {

      count = (count + 1) % 200;
      var icons = trackLine[i].get('icons');
      icons[0].offset = (count / 2) + '%';
      trackLine[i].set('icons', icons);
    }
  }, 200);
}

To animate the lines as well, you need to keep track of the dynamic polylines and the complete result polyline.

Change the anonymous "setInterval" function in you code:

var interval = setInterval(function () {
    step += 1;
    if (step > numSteps) {
        clearInterval(interval);
    } else {
        for (var i = 0; i < trackLineM.length; i++) {
            var lastIdx = trackLineM[i].getPath().getLength() - 1;
            var theMotion = google.maps.geometry.spherical.interpolate(trackLineM[i].getPath().getAt(0), trackLineM[i].getPath().getAt(lastIdx), step / numSteps);
            trackLine[i].setPath([trackLineM[i].getPath().getAt(0), theMotion]);
            trackLine[i].setMap(map);
        }
    }
}, timePerStep);

proof of concept fiddle

code snippet:

var trackLine = [];
var trackLineM = [];
var trackLats = [
  [
    [14.735, -20.595],
    [-13.913, 8.188]
  ],
  [
    [-14.788, 20.562],
    [13.879, -8.230]
  ],
  [
    [14.784, -20.546],
    [-13.818, 8.288]
  ],
  [
    [-14.837, 20.513],
    [13.784, -8.329]
  ],
  [
    [14.892, -20.439],
    [-13.758, 8.350]
  ]
];
var trackLons = [
  [
    [76.480, 90.967],
    [68.509, 98.386]
  ],
  [
    [-115.254, -100.759],
    [-123.226, -93.342]
  ],
  [
    [53.036, 67.521],
    [45.065, 74.937]
  ],
  [
    [-138.698, -124.204],
    [-146.669, -116.791]
  ],
  [
    [29.567, 44.049],
    [21.570, 51.438]
  ]
];

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-22.291, 53.027),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  el = document.getElementById('map-canvas');
  var map = new google.maps.Map(el, mapOptions);

  var trackCoords = new google.maps.MVCArray;
  var i, j, k;

  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#0099FF'
  };

  for (i = 0; i < 5; i++) {
    for (j = 0; j < 2; j++) {
      trackCoords = [];
      for (k = 0; k < 2; k++) {
        trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
          trackLons[i][j][k]));
      }
      trackLineM.push(new google.maps.Polyline({
        path: trackCoords,
        strokeColor: '#0099FF',
        strokeOpacity: 1,
        strokeWeight: 1,
        geodesic: true,
        // map: map,
        icons: [{
          icon: lineSymbol,
          offset: '100%'
        }]
      }));
      trackLine.push(new google.maps.Polyline({
        strokeColor: '#0099FF',
        strokeOpacity: 1,
        strokeWeight: 1,
        geodesic: true,
        // map: map,
        icons: [{
          icon: lineSymbol,
          offset: '100%'
        }]
      }));

      animateCircle();
      var step = 0;
      var numSteps = 250;
      var timePerStep = 200;
      var interval = setInterval(function() {
        step += 1;
        if (step > numSteps) {
          clearInterval(interval);
        } else {
          for (var i = 0; i < trackLineM.length; i++) {
            var lastIdx = trackLineM[i].getPath().getLength() - 1;
            var theMotion = google.maps.geometry.spherical.interpolate(trackLineM[i].getPath().getAt(0), trackLineM[i].getPath().getAt(lastIdx), step / numSteps);
            trackLine[i].setPath([trackLineM[i].getPath().getAt(0), theMotion]);
            trackLine[i].setMap(map);
          }
        }
      }, timePerStep);
      trackCoords.clear;
    }
  }
}

function animateCircle() {
  var count = 0;
  window.setInterval(function() {
    for (var i = 0; i < trackLineM.length; i++) {

      count = (count + 1) % 200;
      var icons = trackLineM[i].get('icons');
      icons[0].offset = (count / 2) + '%';
      trackLineM[i].set('icons', icons);
    }
  }, 200);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

Thanks, but why doesn't it animate the polyline as well? The polyines seem fixed but the circles keep looping. Is that just because of how the FOR loops are structured? — , Jul 02 '15 at 18:36
Because the "animateCircle" function in your "new" code doesn't animate the polyline. — geocodezip, Jul 02 '15 at 18:59
You should be able to change the function that animates the polylines the same way I did with `animateCircle` if that is what you want. — geocodezip, Jul 02 '15 at 20:14

Animating multiple icons on multiple polylines

1 Answers1