Google Maps and ASP.NET Part-I

I am sure that most of you have heard about or have had a chance to use Google Maps. It's a great service and I was really impressed by the responsiveness of the application and the ease with which users could drag and zoom maps from a Web browser. It has in many ways heralded the arrival of AJAX (Asynchronous JavaScript and XML), which I am sure will revitalize Web development in the days to come.

What makes the service even better is the availability of the Google Maps API (Application Programming Interface) as a free Beta service. The API allows developers to embed Google Maps in their custom applications. It also allows them to overlay information on the map and customize the map to their needs. As I write this article there are quite a few sites that utilize Google Maps, and more and more of them are appearing by the day.

The API by itself is pretty straightforward and easy to use; however, it requires the developer to have a good command of JavaScript because it extensively relies on client-side Java scripting. In this article we will be looking at building a custom ASP.NET server control that would allow a .NET developer to harness the power of Google Maps in the code-behind model. We will see how to accomplish most of the functionality exposed by Google Maps using this control, and we'll also see how to data bind the control, thereby allowing developers to easily build data-driven custom ASP.NET Web applications. The control would eliminate the need for the developer to write any JavaScript to accomplish most of the Google Map functionality.

Some Google Maps Basics
Before we get into the details of the ASP.NET control, let's look at the basics of the Google Maps API. A detailed description of the API can be found at www.google.com/apis/maps/documentation/. The first step before using Google Maps is to register for a key with Google (www.google.com/apis/maps/signup.html). This is absolutely free and hardly takes a few minutes. Each Web site that uses Google Maps has to have its own key. Make sure that you go through Google's Terms of Use (www.google.com/apis/maps/terms.html) before you start using Google Maps in your application.

Google represents an instance of the map as a "GMap" object. It is rendered as a div tag on the page. Once you have the map, it is possible to add controls to the map. Some of the available controls are the GMapType control that helps to toggle between the different views, namely map view, satellite view, and finally, the hybrid view that is a combination of map and satellite views. The other controls that are usually seen on the map are the ones used to add scrolling and zooming capability to the map. At the time of writing of this article, there are three different controls available:

• GLargeMapControl: A large control for scrolling and zooming
• GSmallMapControl: Similar to the previous one, but eliminates the zoom scale bar
• GSmallZoomControl: Includes only Zooming controls

Once the map has been set up, it is possible to overlay information on the map. The information can be in the form of points or lines, though points are the most common ones. In order to overlay a point on the Google Map, it's necessary to know its longitude and latitude. At this time, Google does not provide any geo-coding services that give the co-ordinates corresponding to an address, but there are a couple of free services available on the internet that do so. www.Geocoder.us is one of them and given a US address, it returns the longitude and latitude for the same. Once the longitude and latitude have been obtained, create an instance of a GPoint (which is Google's representation of a point on the map), then create a GMarker using this point and add the marker to the instance of the Google Map. In order to Center and Zoom on a point, the GMap Object exposes a method ZoomandCenter that takes the point and the level of zoom required as the parameter. Just like points, it is possible to overlay lines on the Map. Those of you who have used Google Maps for directions will be familiar with the lines used to depict the route. In order to add a line to the Google Map, we need to create an instance of a GPolyLine object and pass in an array of GPoints to plot it. It is also possible to assign color, width, and opacity to the line. Another useful feature in Google Maps is the ability to show a pop-up window when the user clicks on a Marker. Google Calls this pop-up window by the name "InfoWindow."

The Google Maps ASP.NET Control (GMAP Control)
The main aim of this control is to allow .NET developers to utilize the functionality of Google maps as a server-side control by writing little to almost no JavaScript at all. It is more of a .NET wrapper around the Google API; however, because it is a full-fledged ASP.NET server-side control, it is possible to bind data to the control, thereby increasing the usability of Google Maps. In the following sections we will see how to use this control to implement most of the common functionality of Google Maps. Before we do so, let's take a look at the control. The principal class of the control is the "GMapControl" class. This class in turn references the following classes (most of these classes are the .NET equivalents of the classes used by Google):

source:http://dotnet.sys-con.com/node/171162