Simple Animated Map Path on Google Maps

Photo by rawpixel on Unsplash

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:

Arjun Sunil | Animated Google Maps

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.

Animated Dotted Path on Google Maps

And here’s the code accompanying the thing I built.

arjun921/Google-Maps-Moving-Path

Another Variation which has a Vehicle Icon moving instead:

Vehicle Moving on Google Maps

Here’s the code for the same.

arjun921/Google-Maps-Animated-Marker

Originally published at blog.arjunsunil.com