Sunday, February 01, 2009

ASP.Net – A Data driven Google Map example

In a recent post, I had written about my data driven Virtual Earth map mashup example. In that example, I used the ASP.Net Virtual Earth server control, to display traffic camera locations that are stored in SQL Server database.

The VE ASP.Net control makes it extremely easy to take data from a database table and display it on a map. And all of it can be done using server side code. The ASP.Net control allowed me to rapidly prototype the application.

The one problem with the Virtual Earth ASP.Net control is that it cannot be used in a government website free of cost. On the other hand, Google Maps can be used in a public facing government website free of coast.

This prompted me to look for a method for displaying data from a database in GoogleMaps.

There are some ASP.Net controls available for working with GoogleMaps, but nothing that seems to be stable and free. In addition, I wanted to test out calling web-services using the AJAX toolkit from client java-script code. The idea is simple, the data is made available via a web-service. The web-service is consumed by calling it from client java-script. The data is then added to the Google Map layer and displayed. ASP.Net AJAX makes it extremely easy to call web-services from java-script, in addition, the data is made available as an object, allowing you to call properties and fields that were made available in the corresponding C# object in the server side code. After that using the data and adding it to Google Maps is normal java-script code.

Here is the Denver traffic cameras map mashup created using Google Maps:


I will post the code after cleaning it up some.

Using Google Earth took me much more time than using the Virtual Earth ASP.Net control. This was mainly because I had to learn 3 new technologies to get the whole thing working (Web-services, Google Maps API and Javascript invocation of web-services). The next time I have to create such a mash-up, I am sure I will take much less time, but compared to using the VE ASP.Net control, using Google Maps in an ASP.Net data-driven web-page will definitely take more time.

Update (03.25.2009): I have posted code for how to make a website like this as part of another post "Using Virtual Earth control with a Web-Service". The ideas used in that example are very similar to what I did for this Google based map-example. JavaScript on the client's machine calls a web-service, which returns map data in JSON format. The JavaScript then takes the data and adds the points to the map. If you look at the sample in that post, you should find it fairly easy to create a Google Map version of it.


Rajendra said...

would you like to share source code?

where to I download Virtual Earth ASP.Net control

lgblog said...

I'd second that; do you mind posting the source up for this?

Rhett said...

It seems you are familiar with both Google Maps and Virtual Earth (I checked out your other article that looks at Microsoft Virtual Earth

I like the work you did with the Virtual Earth control, however we've developed our sites using Google Maps. Have you found working with either more beneficial or easier than the other, both from the perspective of working with the available controls, and also from the service provided by Google or Microsoft?

We have used Google Maps controls for ASP.NET and recently went looking for a newer control that supports version 3 of the API released this year - but could not find any. Result was some work of my own that does not use any Google .NET controls. I've been looking for some pointers to finish the work, i.e. get AJAX into the equation, and your site has been helpful. Thanks.

Adrian Carr said...

Hi Raj,
This looks exactly like what I am looking for, but the links to the code examples are dead. Could you possibly repost them, or maybe send me the code?
adriancarr (at ) gmail