Google Maps ASP.NET control and the KML framework

Why?

This post is going to be about how to create a Google Map control that renders a map and subscribes to the KML feed.

My last post about the KML wrapper framework was about how to actually generate KML. Now let's see how to make a Google Map gobble it all up!

I recommend implementing a generic HTTP handler to produce the KML, it's the most versatile and easy to implement. There's a walkthrough at MSDN here.

If you want to try it out without using the KML wrapper framework, then you can use this KML url: http://www.ourairports.com/countries/SE/BD/airports.kml

The end result will look something like this:

How it works!

If you do decide to utilize the KML wrapper framework, then here's the gist of it:

• The code on your website is responsible for all the logic needed to generate KML. It doesn't matter if this is based on EPiServer pages, a database (which EPiServer pages actually are, too) or any other datsource. As long as it generates the KML.
• You create a Google Map control which renders javascripts that point to your HTTP handler. The Google Map scripts will recognize this is as valid KML and load the data into the map.

My control is a composite control (which is a better alternative than the usual user control in this case) is built so that it can exist within an UpdatePanel, using ScriptManager to register all the scripts needed.

The class consists of three important methods:

• BuildMapTopScript() - This method creates the top script in the header that registers the Google Maps AJAX API. This must appear before any call to the Google Maps scripts are made!
• BuildMapScript() - This method is responsible for creating the actual script that will call the KML handler. The rest is handled by Google Maps!
• CreateChildControls() - This method is overriden from the base class CompositeControl. Here we create all the controls needed for Google Maps.

It is important to remember that the Google Maps AJAX script will try to find a div-tag with the ID you have supplied. The property MapScriptId must match the call to the Google Maps AJAX api - else Google won't know where to interject it's controls!

I also create a wrapper div with the attribute "class" and the value "googleitem" which allows you to create a CSS class to control the styling of the map (height, width). This must be done in order for the Google Map to look OK. Otherwise it will compress into a height of 0px!

How to use it

Add the DLL as a reference to your web project.

Then add the following code to your web.config so that you can use it as a server control:

<controls>
  <add tagPrefix="DBLOG" namespace="DBLOG.GoogleMaps" assembly="DBLOG.GoogleMaps"/>
  <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</controls>

<DBLOG:GoogleMapsControl ID="dblogGoogleMapsControl" runat="server"></DBLOG:GoogleMapsControl>

Finally set the URL to the KML handler. I chose to do this in the code-behind in the OnLoad-event.

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);

    dblogGoogleMapsControl.KmlUrl = "/path/to/kmlHandler.ashx";
}

dblogGoogleMapsControl.KmlUrl = "http://www.ourairports.com/countries/SE/BD/airports.kml";