Handling Map Events

Tags: Tutorial, Google Maps

Once you have added some markers to your map you will want them to do something other than merely sit there, i.e. you will want them to react to some event or other. Most commonly you will want them to display a little infowindow with some text, but anything is of course possible.

In this tutorial I will show how to handle events using the Google Maps .NET Control. The first part will show the serverside event handling using callbacks which is available for both the free and the licensed control. Afterwards I will describe the use of clientside event handling which is only available in the licensed control (except for click events). While events may be handled serverside the page is not actually posted back to the server. Instead a callback is made to the server to handle the event, making the operation very light in terms of traffic, but on the other hand not able to alter the page's viewstate. This means that any objects added, removed or changed must be noted elsewhere until such a time as the page is actually posted back and the changes to the viewstate can be made permanent. Also note that only the GoogleMap class has its own events, so overlay's events are handled by the map, except for clientside event handling described below.

Like for any ASP.NET control event handlers can be tied to events in either the markup or in the code behind. The easiest is of course in the markup if you ask me. To add an event handler in the markup all you need to do is ensure that the Page directive has the AutoEventWireup tag set to true, like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="mappage.aspx.cs" Inherits="mappage" %>

After that you can set the name of the event handler method in the markup for the Google Maps .NET Control, like so:

<Reimers:GoogleMap ID="GoogleMap" runat="server" OnClick="MapClick" />

Another way to do it is to assign the event handler in the code behind, like so:

protected void Page_Load(object sender, EventArgs e)
{
	GoogleMap.Click += new EventHandler<CoordinatesEventArgs>(MapClick);
}

This ties the MapClick method as the handler to the map's click event. You will find all the delegates and their signatures in the accompanying documentation. Generally the delegates follow the standard event handler signature with the event args holding a reference to the map and a string call MapCommand. The MapCommand string is the most important as the result of the callback must be written to this string in order to be handled by the client. You can of course do any kind of serverside operation you want, but any results that are to be fed back to the client must be sent to the MapCommand as a string of JavaScript. The control includes many common map operations as methods, which will create the necessary JavaScript code, so there is no need to worry if you don't know JavaScript.

To actually handle the event the MapClick method must do some sort of operation. A simple thing to do would be to display the point clicked by the map, like so:

void MapClick(object sender, CoordinatesEventArgs e)
{
	e.MapCommand = Map.OpenInfoWindowHTML(
		Position,
		string.Format("Lat: {0}
Lng: {1}", Position.Latitude.ToString(), Position.Longitude.ToString())); }

If you create an event handler using the instructions above you should see an infowindow pop up when you click the map showing the coordinates clicked. As mentioned above the control includes numerous methods for creating the necessary JavaScript code. Above is used the map's OpenInfoWindowHTML method with takes a GoogleLatLng argument and a string argument. The string should be properly formatted HTML - due to limitations you should use double quotes in your HTML as single quotes are not processed and may result in an error.

Of course you may want to create more elaborate processing in your events, such as database lookups etc, but as long as you set up the event handler properly and remember that all output must be assigned as JavaScript to the MapCommand string there should be no problem.

Clientside event handling

While the serverside event handling using AJAX can be more elaborate the clientside event handling wins when only simple actions are necessary. While clientside event handling in theory supports all the JavaScript language and so allows for some elaborate coding I would recommend using the serverside handlers if elaborate coding is required. Clientside handlers are great where you want to perform the same relatively simple task numerous times without the need to constantly fetch information on the server (thereby lightening the load on the server), for example showing the same text in an infowindow when a marker is clicked.

The GoogleMap class and the GoogleMarker class include a ClientSideHandler property that lets you set a clientside handler for the events as a string. The handler should be a string of JavaScript to be executed. It will be wrapped into a function so there is no need to write anything except the JavaScript to be executed. For example if you want to display an infowindow every time a marker is clicked you would add the string to the marker's clientside click handler, like so:

protected void Page_Load(object sender, EventArgs e)
{
	GoogleMarker m = new GoogleMarker("myMarker", 55, 0);
	m.ClientSideHandlers.OnClick = m.OpenInfoWindowHTML(GoogleMap, "You clicked me");
}

Remember that the control includes numerous methods to generate the necessary JavaScript for the most common functions for you. For example above I used the OpenInfoWindowHTML method of the marker to generate the necessary JavaScript.

Note that when assigning clientside handlers they are assigned to the specific object and not to all objects of that class. As opposed to serverside handling where one method handles all overlay clicks for example (by discerning which overlay was clicked and returning that overlay as an argument) the clientside handler is specific to the individual overlay.

Latest Tweets