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.

.

Getting Latitude and Longitude for GMap API- The easy way

A quick update. One of the most important and the thing of frustration for anyone starting with GMap API is getting hold of desired latitude and longitude. There are many ways. I am listing here one of the easiest ways to get the latitude and longitude of desired location. Here are the steps:

1. Go to the following site : http://www.infosports.com/m/map.htm
2. Navigate the map till you get the desired location. For example, I required the lat and long. of Shimla. So I navigated (panned and zoomed) till I got to Shimla.
3. Then click on the spot. In my case its Shimla. A marker would be generated at that point.
4. click on the marker to get the latitude and the longitude. Mine is 77.16496467590332, 31.102995000257405

That’s it. If there are easier ways do share.

.

Hello World the Google Map API Way: Adding Controls

In the last post I had said I wanted to add something extra to the Hello world of GMap. The extras are controls. So the second part is:

2. Adding Controls to the map:

The map looks plain without the controls for scaling and mapping. So I decided to jazz it up with the following controls:

i. GSmallMapControl:

It shows a control with four buttons to pan(move the map) in four directions alongwith buttons to zoom in and out. The constructor is GSmallMapControl().

ii. GMapTypeControl:

It provides the control to change the type of map. The types are map, satellite image and hybrid which shows map superimposed on satellite image. GMapTypeControl() is the constructor.

iii. GScaleControl:

As the name suggests, it shows a scale within the map.

So how to add them to the map? The way is pretty simple- use the addControl() method of GMap2 instance. Here is the way in code:

function load() {

if (GBrowserIsCompatible()) {

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

//add the controls to the map

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

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

map.addControl(new GScaleControl());

}

}

If you have observed, there is a difference in adding GScaleControl when compared to others. The first two controls (for that most of the controls that I have tested) are added before setting the center of the map where as the GScaleControl() is set after the center of the map has been set. What would have happened if I had called it before setting the center? The result would have been a blank page with a JavaScript error. That’s what happened with me. If you get any different result please share.

That’s it for this post. Next I would be looking at event handling in Google Map.

Hello World - The Google Maps Way

Last week I had said that I would be cooking up a "Hello World" kind of app. I did it. There were two parts:

1. Display default location provided by GMap API:

In nutshell, just make the sample app provided by Google while registration, work on my local system. It also clarified one of my doubts - where is the API library of GMap located? 'Coz it was not provided when I registered. For some, it may be a silly question. Ok. So the answer is in the following line:

<script src=http://maps.google.com/maps?file=api&v=2&key=[yourkey]"

type="text/javascript"></script>

The src attribute is pointing to the place where APIs are available. The place is maps.google.com – the site of Google maps. Along with the URL key received while registering with Google maps. Next comes the implementation of custom logic. It starts with the function load():

<script type="text/javascript">

//<![CDATA[

function load() {

}

//]]>

</script>

The next step is to ensure browser compatibility with client browser. This is done using GBrowserIsCompatible().

<script type="text/javascript">

//<![CDATA[

function load() {

if (GBrowserIsCompatible()) {

}

}

//]]>

</script>

Once compatible browser is found, then an instance of GMap2 class is created. The parameter passed id the div object in which the map has to be shown:

<script type="text/javascript">

//<![CDATA[

function load() {

if (GBrowserIsCompatible()) {

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

}

}

//]]>

</script>

The last step is to display the map using setCenter() method of GMap2. the method takes latitude , longitude and zoom factor as parameters. Of these zoom is optional.

<script type="text/javascript">

//<![CDATA[

function load() {

if (GBrowserIsCompatible()) {

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

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

}

}

//]]>

</script>

The last but not least is the HTML especially the div part:

<body onload="load()" onunload="GUnload()">

<div id="map" style="width: 500px; height: 500px"></div>

</body>

The load() has to be called in body’s onLoad is obvious. Calling GUnload() is a good practice to avoid memory leaks. That’s for the first part.