Google Maps ASP.NET control and the KML framework

In ASP.NET

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.

image

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

 

Add the control to the page. I chose to do this in the markup.

 

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

 

Important: you cannot reference localhost for the KML feed. Google requires the KML feed to be on a public server where it can be accessed. If you just want to take your Google Maps control for a test drive, then use the sample KML feed.

 

When you see that it’s working, then go public with your own KML feed (the HTTP handler) and have the Google Maps control subscribe to that feed instead!

Download it!

Here’s the yummy sourcecode: DBLOG.GoogleMaps.sourcecode.zip (19,77 kb)

I’d also to give a big shout out to Ted Nyberg, friend and colleague, that without I wouldn’t have an inkling of what I was doing. :o)

daniel
daniel
Developer
Recent Posts
  • Ian Robertson

    Hi,

    Thanks for the control. Do you have an example of how to use it?

    Thanks

    Ian

  • Hi there Ian!

    Of course. See sample code added to the post.

    Cheers!

  • Daniel Vargas

    Hi Daniel, I´m using Visual Studio 2008, but when trying to run the page an error says:
    "WebDev.Webserver.exe has encountered a problem and needs to close. We are sorry for the inconvenience."
    Please tell what to do.
    d.

  • Hm. That’s weird! Sounds like there’s something odd with your webdev-server?

    I’ll try to look into it and see if I can replicate your error! 🙂

    /Daniel

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search