How to animate the Google marker using play, pause, stop, forward, rewind, first and last buttons

JavaScript
1

Hi, can I ask I need to achieve on how to animate the Google marker using the 6 buttons (historical playback) like play,pause,stop,forward,rewind,first and last button…I just want to know the idea on how can i achieve this. I have date from ,time from,date to and time to, when user choose specified date and time this will query to my table and return the result as json,then I animate this using setTimeout it shows moving vehicle…but the problem is that how can I apply those 6 buttons ? so that when it animates I can stop, resume,forward or rewind the animation.

Thank you in advance.

2

You should know few things:

  • coordinates of start point;
  • coordinates of end point;
  • current coordinates (x, y);
  • speed for both coordinates (x_speed, y_speed, default 0);
  • flag (boolean) to indicate is animation started (is_playing = false)

Then you create function update() and run it in loop with setInterval().
In that function you do next steps:

  • if animation isn’t started (is_playing == false) then do nothing (return), else:
  • set x = x + x_speed and y = y + y_speed (move marker)

And your control buttons will do:

  • Play/pause: set animation flag to true/false (is_playing = !is_playing);
  • Forward/Rewind: set speed = speed * -1 (reverse sign) for each coordinate;
  • First/Last: immediatly move marker to start/end point
1 Like
3

I made a quick example for you: http://jsfiddle.net/r7ws63qq/1/
Feel free to use that code

3 Likes
4

Thank you so much it works. :smile:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.