Google Maps

I have been using Google Maps for a long time (a nice way to kill time) and now I am using the Google Map API to create my own site (not a nice way to kill time). Was able to start with my work using the sample examples given in the Google Maps site and by trial and error method.
But came to a dead end when i had to manage many events at the same time. Say for the example, when the user clicks in the map, first an infowindow opens up with a form in it. When the user clicks elsewhere when already an infowindow is open, then an prompt asking for whether he should save the old place or not. If he says no, the show the new infowindow. Else retain the old infowindow. Save the details using an Ajax request so that the page is not reloaded again and again. Mummy….

But now, after exploring so much about Google Maps, I was able to manage things now. A simple tutorial about how to handle events in Google Maps. The reason why i choose events is that this is more difficult to grasp AFAIK. 🙂

First let us start with a simple Google Map as shown in the following url
http://sp2hari.com/gmap/event-simple.html
The main code which adds the event listener is
GEvent.addListener(map,"click", function(overlay,latlng) {
alert ("Map Clicked");
});
GEvent.addListener(map,"click", displayMessage);
Note that for the same event “click”, I have added two event listeners. In the first listener, the code to be executed when the event occurs is inline. This is fine if the code is very small. Even then i advice you to follow the second method where the function name to be called is given as argument. Then you can mention all the actions to be done when the event occurs in that function. For example, my displayMessage will look like
function displayMessage(overlay, latlng) {
document.getElementById("message").innerHTML = "Clicked at latitude "+latlng.lat()+ " and longitude "+latlng.lng();
}

Yup. That’s all it needs to add a simple event listener for Google Maps.
Now let us try something more 😉
How about trying to add a marker at the place where it is clicked and a button to clear all markers?
Check this url
http://sp2hari.com/gmap/event-addmarker.html
In the above file, I just have one event listener for click (you can have as many as you want), and the function I’m calling after click is “addMarker”. The following code adds the event listener.
GEvent.addListener(map,"click", addMarker);
Now the function addMarker has the code to add a marker as shown below
function addMarker(overlay, latlng) {
var marker = new GMarker(latlng);
map.addOverlay(marker);
document.getElementById("message").innerHTML = "Marker added at latitude "+latlng.lat() + " longitude "+latlng.lng() ;
}

Another function clearAllMarkers is used to clear all the markers used in the map. Check the code for that function.
function clearAllMarkers() {
map.clearOverlays();
document.getElementById("message").innerHTML = "All markers cleared";
}

Let’s play more with markers 🙂
How about having a infowindow open when you click a marker?
Check the following url
http://sp2hari.com/gmap/event-showinfowindow.html
In the above example, we can add markers and we also get an infowindow when we click on the marker. For this the code is very similar to the previous example with a small modification in the addMarker function.
function addMarker(overlay, latlng) {
marker[markerCount] = new GMarker(latlng);
marker[markerCount].bindInfoWindowHtml("This is Marker number "+markerCount);
map.addOverlay(marker[markerCount]);
markerCount = markerCount+1;
document.getElementById("message").innerHTML = "Marker added at latitude "+latlng.lat() + " longitude "+latlng.lng() ;
}

As you can see, we have a global array of markers and whenever we create a new marker, we bind an infowindow to the marker using bindInfoWindowHtml method. Simple right? 🙂
We’ll see more complex event handling sometime later. 🙂 Feeling sleep right now 🙂