How to stop animation?

[mackopu]

Example - http://econym.org.uk/gmap/example_cartrip2.htm
And now, how stop the animation?

[Martin Matysiak]

At the beginning of the script, add a global variable:

var jStop = false;

Then, change the last line of function animate(d) from

setTimeout("animate("+(d+step)+")", tick);

to

if (!jStop) {
    setTimeout("animate("+(d+step)+")", tick);
}

Next, add a new function to the script:

function stopAnimation() {
    jStop = true;
}

And at last a button with which you can trigger it:

<input type="button" onclick="stopAnimation()" value="Stop!" />

That's it! The animation will stop when you'll click on the button.

But on a side note, this example uses Maps API V2. This is the Maps API V3 group :)

[mackopu]

Simple and effective! Thanks.
Sorry, I'm in another group, but I have a Google Groups for the first
time ...
Just one more question: How, then go on again in the animation - ie,
not feet, but the rest?

[Martin Matysiak]

When stopping, you have to remember the parameter d of the method animate(). Then, set jStop to false and call the method animate again (with the remembered parameter d)

[mackopu]

OK. But this does not work:

<input id="togglepause" type="button" onclick="toggleAnimation(d)"
value="Pause" />
...
function toggleAnimation(d) {
GLog.write(d);
jStop = true;
if(!jStop) {
jStop = true;
document.getElementById("togglepause").value = "Play";
} else {
jStop = false;
animate(d);
}
}

Where am I doing wrong?

[Martin Matysiak]

When you call toggleAnimation(d), jStop will _always_ be true (line 2 of your method). I would suggest removing it :) And I'm not sure where the "d" will come from when you click on the button. Try saving it in another global variable (similar to jStop)?

[mackopu]

OK. Finally I solved it as follows:

var dd = 0;

function animate(d) {
...
dd = d;
...
}

function toggleAnimation(dd) {

if(!jStop) {
jStop = true;
document.getElementById("togglepause").value = "Play";
} else {
jStop = false;

document.getElementById("togglepause").value = "Pause";
animate(dd);
}
}

Complete example is here: http://gpssecurity.iszos.cz/gpstrack_2.php?id=3

Ask me please how to re-run the animation after it ends. I know that's
difficult, but it fails to resolve.

[Martin Matysiak]

Calling animate(0); should do the trick (i.e. d = 0). You can test this by running the animation. After it finishes, type this into your browser address field:

javascript:animate(0)

and you will see that the animation relaunches. But keep in mind that you have to consider some aspects when restarting the animation:

• If there is a running animation, stop it, clear the polyline and start over OR ignore the restart command and let it finish first.
  
• If a previous animation has finished, clear the polyline that has been created as it will continue drawing it when rerunning (so a straight line to the start and then a second layer of polylines)

I hope your problems are solved now ;-)

Regards,
  Martin

[mackopu]

Perfect. Thank you for your time.

Just one thing: how to do that, after the animation has become an
event, such as
document.getElementById("togglepause").innerHTML = '<input
type="button" onclick="start(0);" value="Replay" />' ?

Thank you very much :)

[Martin Matysiak]

I must admit that I didn't quite understand your question. But if you want to know how to replace the "Pause/Play" button with a "Replay" button, the code you gave might work, if you change your html a bit. Instead of:

<input type="button" value="Play" onclick="toggleAnimation(dd)" id="togglepause" />

You would need to have something like

<div id="togglepause"><input type="button" value="Play" onclick="toggleAnimation(dd)" id="togglebutton" /></div>

Now the innerHTML of the togglepause object represents the button for the user, thus your code lines will replace the old button with the new one. But remember to edit the toggleAnimation() method acordingly as you replace the ("togglepause").value attribute in there. Now it would be ("togglebutton").value!

[mackopu]

I understand. But it's all about me that, after the animation has
become an event.
For example, map.openInfoWindowHtml(routePoints[routePoints.length-1],
'End')

[mackopu]

Excuse my English, I use Google Translate :)

[xelawho]

I hope you find a solution... and that you post back here if you
do :D

I tried for a week or so and finally gave up - the best I could do was
to leave the user with no option but to reload the page after the
route had been run: http://xelawho.com/bus/

my code detects when the route has been completed with this:
if (lastVertex == poly.getVertexCount()) {

by the looks of it, that (or something similar) should work in yours

good luck!

[mackopu]

Very nice program and probably the only rational solution. Thank you!

[en4ce]

wow, thats very buggy, not only if you zoom the polyline dont get
resized and the pause button dont work (at least in chrome)....na it
even api V2...wtf?

[xelawho]

> wow, thats very buggy...

yes, even though I get the feeling the code is in development, it does
seem to be buggier than it needs to be. Here's an example that's quite
similar to OP's and seems to work fine: http://www.findbiblioteket.dk/librarybus/

we can move this over to the v2 group any time you like...