My goal is to animate symbols through multiple geodesic polylines. I have attempted to achieve this using a for loop, but the lines are drawn while the circle (symbol) remains static at the starting point. Below is the code snippet that I've been working on.
var poly;
var geodesic;
var map;
var clickcount = 0;
function initialize() {
// Map styling and options
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'
};
for (var i = 0; i < 50; 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(polyline);
}
}
function animateCircle(polyline) {
var count = 0;
window.setInterval(function () {
count = (count + 1) % 200;
var icons = polyline.get('icons');
icons[0].offset = (count / 2) + '%';
polyline.set('icons', icons);
}, 20);
}
Please assist me with making this animation work as intended. Your help is greatly appreciated. Thank you!