Java Script – Animation of a line in Google Maps

Some time ago I have started to read an outstanding book for the Google API. Currently, I have read only 40% of it, but still there are some really interesting pieces of code, which I want to present in my blog. Here is the book:

8825OT_Google Maps API Cookbook 

In the current article I will show you how to make an animated line with the help of the google API. The code is mainly from the book, I have just changed a few lines to adjust it to the cities, which I wanted to draw a line between in and to make the map bigger. Here, you may find the result of the code(click on the picture to enlarge and see the arrow moving):


Here you may check the animation by yourself!

So, enough said, let’s take a quick look into the code!

The most important part, if you want to make such application are the line Coordinates! In my case these are the following:

How do you obtain the line coordinates? My method was actually the following – ib Google maps I wrote ” Sofia” for and it gave me something like this in the URL:


The coordinates of Sofia are highlighted in the link, separated with commas. 12z stands for 12 zoom.

The second thing, which you should take care of is the initial zoom and focus of the map. It is really not a good idea to animate something in Bulgaria and to have a detailed focus over South America. Thus, this is achieved with the following lines:

In the aforementioned code, I define the focus (47…,18) the zoom (6) and the type of the map – RoadMap.

Last, but not least, if you are using Google Maps API, you should make your own account in to get your own API Key. This is needed, because there are limits for the free usage of google. The limits are quite high (something like 20 K), but still, it is better to use your own! The API key is put here:

So far so good.

At the end, here comes the whole working code (just put your own API key) which is really something interesting!

Enjoy it:

That’s all, folks! 🙂

Tagged with: , , ,