Animations and Events in GMap - I : Basic Animation

The Hello World experiment has impressed upon me the ease of setting up Google Maps for a website. However, it had only limited functionality. Also I wanted to check how it works with ‘conventional’ JavaScript APIs. The best way is to cook-up some animation (eventhough it may not mean much). So when I saw a function to change the focus of the area displayed, I thought let me create an animation with it. In JavaScript, there are two kinds of timers available –

1. One that executes a given function exactly once after a specified amount of delay

2. Another that executes the function repeatedly after a specified interval.

The corresponding functions are:

1. setTimeout and

2. setInterval

respectively. Both are the methods of window object. So now how to use it to animate google map. For that the API I am going to use is:

panTo:

This is a method of GMap2. What it does is it changes the center of the map to the given point represented by latitude and longitude.

So how to use this to achieve animation? The methods are as follows:

1. By using setTimout with panTo:

Adding the setTimeout just after setting the focus point of map, would create a one shot animation. That means it would be panned only once. The code would look like :

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

//map.setMapType(GMapType.G_HYBRID_MAP);

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.addControl(new GScaleControl());

map.setCenter(new GLatLng(31.122027, 77.111664), 13);

window.setTimeout(function() {

map.panTo(new GLatLng(31.152027, 77.111664));

},18000

);

}

}

the setTimeout is given an anonymous function as the function to be called and nearly 15 sec as the time to wait before function is executed.

2. By using SetInterval with panTo:

This comes handy when u want to the focus return to a particular point again and again after a specified time interval. The syntax is similar to that of setTimeout. The only difference is in the way both functions. Following is the same code implemented with setInterval:

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

//map.setMapType(GMapType.G_HYBRID_MAP);

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.addControl(new GScaleControl());

map.setCenter(new GLatLng(31.122027, 77.111664), 13);

window.setInterval(function() {

map.panTo(new GLatLng(31.152027, 77.111664));

},18000

);

}

}

That’s it for this post. By the next post I would have experimented the event handling provided by GMap API.

.