Google Maps - Animated Polyline -- Stop / Remove Animation - google-maps

Question

I'm plotting a polyline on Google Maps API V3, from a GPX file.
On mouseover of that polyline, I have an animated dot, moving along the polyline, using function animateRoute();
Currently however, I don't have a way to remove the animated dot on mouseout, and as a result, if you mouseover, mouseout, mouseover etc, you end up with multiple animated dots moving along the same line.
Code snippet: (see full working URL below too)
var gmarkers = [];
function loadGPXFileIntoGoogleMap(map, filename,recordNum, name, hex_code) {
$.ajax({
type: "GET",
url: filename,
dataType: "xml",
success: function(xml) {
var points = [];
var bounds = new google.maps.LatLngBounds ();
$(xml).find("trkpt").each(function() {
var lat = $(this).attr("lat");
var lon = $(this).attr("lon");
if((lat != 0) && (lon != 0))
{
var p = new google.maps.LatLng(lat, lon);
points.push(p);
bounds.extend(p);
}
});
var strokeColor = "#ff0000";
var poly = new google.maps.Polyline({
path: points,
strokeColor: strokeColor,
strokeOpacity: 1,
strokeWeight: 4,
recordNum: recordNum,
});
poly.setMap(map);
google.maps.event.addListener(poly, 'mouseover', function() {
var start = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#00ff00',
fillOpacity: 1,
strokeColor:'#000000',
strokeWeight: 4,
scale: 0.5
}
var end = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: 1,
strokeColor:'#000000',
strokeWeight: 4,
scale: 0.5
}
var markerStart = new google.maps.Marker({
position: poly.getPath().getAt(0),
icon: start,
map: map,
zIndex: 200,
scale: 1
});
gmarkers.push(markerStart);
var markerEnd = new google.maps.Marker({
position: poly.getPath().getAt(poly.getPath().getLength() - 1),
icon: end,
map: map,
zIndex: 200,
scale: 1
});
gmarkers.push(markerEnd);
var icons = this.setOptions({
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
strokeOpacity: 1,
strokeColor: "#000000",
strokeWeight: 2,
scale: 4
},
}]});
animateRoute(poly);
});
function animateRoute(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var icons = poly.get('icons');
icons[0].offset = (count / 2) + '%';
poly.set('icons', icons);
}, 60);
}
google.maps.event.addListener(poly, 'mouseout', function() {
removeMarkers();
});
// fit bounds to track
map.fitBounds(bounds);
}
});
}
function removeMarkers(){
for(i=0; i<gmarkers.length; i++){
gmarkers[i].setMap(null);
}
}
$(document).ready(function() {
var mapOptions = {
zoom: 17,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
loadGPXFileIntoGoogleMap(map, "cmsAdmin/uploads/blue_and_green_not_comfortable_.gpx","724","Example A","FFFF00");
loadGPXFileIntoGoogleMap(map, "cmsAdmin/uploads/taraweratrailrouterecce.gpx","431","Example B","4F4CBE");
});
Full working example:
https://www.wildthings.club/mapStack.php
Hover over the blue line and you'll see the animated dot.
Mouse off, and then after a few seconds hover again - a second dot will appear, and the first dot is still going.
Repeat and you'll soon have a bunch of jittery dots.
Ideally I'd like to remove all animated dots on mouseout.
Second option would be to not add a subsequent animated dot icon if there is already one on that polyLine (note there are multiple polyLines on the map).
Third option failing that would be to have the animated dot stop and remove once it reaches the end (position markerEnd) so at least it doesn't loop.
I have tried placing the icons into an array and then removing from there (like I have done with the gmarkers array and removeMarkers(), but no luck.
I also had a play with Animate google maps polyline but this just works with straight line point to point, rather than following a series of points from a GPX file.
Any help, most appreciated
Cheers

Answer 1

You should use the window.clearInterval() function to remove the interval you are using to animate the icon on the polyline. You should save the id when call window.setInterval() in animateRoute(). Here is a simple JSBin proof of concept adapted from the code on that website. In my code, I'm just simply using a global id variable, and updating that variable in animateRoute():
<!DOCTYPE html>
<html>
<head>
<title>Polyline path</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
height: 100%;
width: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var map;
var id;
var gmarkers = [];
var gmarkersicons = [];
function initMap() {
var mapOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: {lat: 9.291, lng: -157.821}
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var points = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var poly = new google.maps.Polyline({
path: points,
strokeColor: "red",
strokeOpacity: 1,
strokeWeight: 4,
recordNum: "test"
});
poly.setMap(map);
google.maps.event.addListener(poly, 'mouseover', function() {
var start = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#00ff00',
fillOpacity: 1,
strokeColor:'#000000',
strokeWeight: 4,
scale: 0.5
}
var end = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: 1,
strokeColor:'#000000',
strokeWeight: 4,
scale: 0.5
}
var go = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#000000',
fillOpacity: 1,
strokeColor:'#fff',
strokeWeight: 4,
scale: 0.5
}
var markerStart = new google.maps.Marker({
position: poly.getPath().getAt(0),
icon: start,
map: map,
zIndex: 200,
scale: 1
});
gmarkers.push(markerStart);
var markerEnd = new google.maps.Marker({
position: poly.getPath().getAt(poly.getPath().getLength() - 1),
icon: end,
map: map,
zIndex: 200,
scale: 1
});
gmarkers.push(markerEnd);
var icons = this.setOptions({
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
strokeOpacity: 1,
strokeColor: "#000000",
strokeWeight: 2,
scale: 4
},
}]});
this.setOptions({
strokeColor: "red",
scale: 1,
strokeWeight:15,
strokeOpacity:.6
});
var contentString = "Testing";
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, markerStart);
id = animateRoute(poly);
});
function animateRoute(line) {
var count = 0;
var id = window.setInterval(function() {
count = (count + 1) % 200;
var icons = poly.get('icons');
icons[0].offset = (count / 2) + '%';
poly.set('icons', icons);
}, 60);
return id;
}
google.maps.event.addListener(poly, 'mouseout', function() {
removeMarkers();
this.setOptions({strokeColor:"red",strokeWeight:4,strokeOpacity:1});
this.setOptions( { suppressMarkers: true } );
this.setOptions({
icons: [{}]});
window.clearInterval(id);
});
function removeMarkers(){
for(i=0; i<gmarkers.length; i++){
gmarkers[i].setMap(null);
}
}
}
$(document).ready(function() {
initMap();
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>