Animate a route with google map js api v3

Question

Given two geo-localized points (start and end of the route), I want to animate the drawing of the route between them.

Do you know how if it's achievable with the Google map js v3 api?

Thanks

It's certainly possible to animate a marker along the route: http://www.geocodezip.com/v3_animate_marker_directions.html. Version 2 example of animated route line: http://econym.org.uk/gmap/example_cartrip2.htm — Andrew Leach, Jul 17 '12 at 09:22
...and if you prefer to fly instead of driving: http://maps.forum.nu/v3/gm_flight_path_animated.html — Marcelo, Jul 17 '12 at 09:46
You can try [this](http://stackoverflow.com/questions/10277005/how-to-reset-value-of-steps-in-google-maps-v3-animation) or [this](http://stackoverflow.com/questions/10904476/js-google-maps-api-v3-animate-marker-between-coordinates) try: marker.setAnimation(google.maps.Animation.BOUNCE); — Martin, Dec 28 '12 at 16:27

score 14 · Answer 1 · answered Sep 17 '14 at 09:37

14

I found something for you.

http://www.geocodezip.com/v3_animate_marker_directions.html Visit this website hit F12 on chrome go to sources tab and select v3-animate-marker-direction.html You'll the complete code of it on how it is used. I you need help on it, kindly comment

and a pretty good example here also, but I guess it is implemented on v2 http://www.kmcgraphics.com/google/

Regards, Suyash

answered Sep 17 '14 at 09:37

Suyash Dixit

907
9
20

Thanks, Can I have one solution the same with only increasing route color. – Ronak Patel Feb 23 '17 at 05:27

score 6 · Answer 2 · answered Sep 18 '14 at 11:33

6

Using this Example you can animate more than one markers within the route. the animate and startAnimation functions handle multiple markers. You can modify the code based on your requirement. Hope it helps.

answered Sep 18 '14 at 11:33

sTg

4,313
16
68
115

score -2 · Answer 3 · edited Dec 19 '14 at 10:24

-2

In this example:

var symbolTwo = {
  path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
  strokeColor: '#00F',
  **rotation**: 45
};

edited Dec 19 '14 at 10:24

parakmiakos

2,994
9
29
43

answered Dec 19 '14 at 09:55

Viacheslav aka Lordz

162
1
5

Animate a route with google map js api v3

3 Answers3