Simple Animated Map Path on Google Maps
So, here’s the funny fact. I loved having most of my work done; ‘cause almost all the things that I come across? It’s already been done! All I have to do is clone the repo and run it as specified and almost always it just works.. But this time I couldn’t use the lazy approach. *sighs* So after about a day or two of tinkering and banging my head to get it work, I got something working! It wasn’t what I needed, but it seemed cool and I thought, this needs to go public :)
Live Demo
If you just want to create a quick animation between point A and point B, checkout the link below and input your Starting point, Ending point and the speed at which you’d like to animate it.
Here’s a quick demo of what I cooked up:
So here’s what I had to do.
- Draw path as dotted lines
- Conditionally animate the path.
- Draw Multiple lines between different starting and ending points (Unlike adding way-points in the map.)
I couldn’t find an easy way to draw two entirely different paths on the map using the Google Maps API!
So I wrote the thing almost from scratch by using poly lines and a simple function that draws these lines between a starting and ending point.
End result? The circle didn’t show up as I’d expected it to, but turns out the dotted lines became animated! This looked so damn cool and definitely usable so here’s the code for animated dotted lines that I accidentally wrote.
Here’s what it actually looks like.
And here’s the code accompanying the thing I built.
Another Variation which has a Vehicle Icon moving instead:
Here’s the code for the same.
Originally published at blog.arjunsunil.com
