Simple Animated Map Path on Google Maps

So, here's the funny fact. I love having most of my work done for 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 it most often works.. But this time I couldn't use the lazy approach.

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 :)

Indeed there are many times where the best things happen as accidents, but was a beautiful accident.

So here's what I had to do.
  • Draw DOTTED lines between two paths of a map by searching those places.
  • Animate a marker on the path to emulate the movement of a vehicle(circle for now, to be changed to an icon later on)  
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 useable 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.


Post a Comment

Popular Posts