Understanding Async Events

Tags: Tutorial, Google Maps, Events

I frequently get asked why the following code yields no result:

GoogleMarker gm = new GoogleMarker("myMarker", 54, 0);
GoogleMap.AddOverlay(gm);

It's actually the same as asking why the following code produces no result:

"Hello World";

Many of the methods in the GoogleMap class and also in the GoogleMarker class return a JavaScript command to handle the underlying Google API. I have named these methods according to the underlying API method that they shadow. Obviously this can cause some confusion, even though I attempted to avoid confusion by using similar naming. Just shows that you can't win.

So hopefully to clarify this here's an explanation of how to make use of the Google Maps .NET Control and know the difference between methods that generate JavaScript and methods that handle serverside objects.

All the methods that return a string value and where the documentation states that they return a JavaScript command are intended as helper methods for programmers who don't want to write JavaScript commands themselves. Since the control requires a multitude of JavaScript commands to be executed on the client to get full advantage of the clientside and AJAX functionality of a map application you must pass these JavaScript commands as the browser will not understand .NET commands.

Most frequently the JavaScript commands are used to send to the MapCommand string in a serverside event handler. But they can just as well be used to generate JavaScript to send to the clientside handlers. Finally the PostRenderScript is a property that accepts JavaScript to be executed after the map has finished rendering, which is another place where the helper methods can be useful.

In all of the above cases a programmer can just as well write his own custom JavaScript, which may sometimes be needed if the included scripts are not enough. For example for my map page I had to write a fair amount of code to integrate Google's AJAX search API and the Wikipedia search function. Obviously these integrations fall outside a basic map application and so they needed to be created specially for this application. After all there are only so many possibilities I can foresee. To help programmers integrate clientside scripting ASP.NET has the ClientscriptManager class which helps you integrate clientside scripting from the code behind.

The properties of the control are properties in the conventional .NET way. They are used to set values on the server. Many of them perform similar functions to the methods above. They are intended to help programmers set up the map before rendering the page.

In fact the map can be run in a "traditional" ASP.NET way i.e. every click sends the page to the server whch handles events and returns a new page. To do this, simply have every eventhandler submit the page to the server and handle the event on the server. However I suspect that soon your visitors will start complaining.

The following code shows two different ways to add a marker to a map. The first code snippet shows how to create a marker on the server and then add it to the map's OverlayCollection. The collection will remember the marker through postbacks and display the marker when the page is loaded.

protected void Page_Load(object sender, EventArgs e)
{
	GoogleMarker gm = new GoogleMarker("myMarker", 51, 0);
	GoogleMap.Overlays.Add(gm);
}

This second code sample shows how a marker is created on the server and sent to the client to be rendered using a callback (by using an event handler in this case). The marker gets plotted on the map but is not added to the map's OverlayCollection and so is forgotten upon postback, unless the information is saved somewhere else.

protected void MapClick(GoogleMap Map, GoogleLatLng Position, ref string MapCommand)
{
	GoogleMarker gm = new GoogleMarker("myMarker", 51, 0);
	MapCommand = GoogleMap.AddOverlay(gm);
}

So as can be seen from the above programming clientside code is slightly more cryptic than the more straightforward serverside coding. Clientside coding however is what makes a great AJAX application so some thought will have to be put into how to keep clientside and serverside object coordinated between and through postbacks.

Latest Tweets