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):
- GPoint: This is the class representation of a geographical point and exposes latitude and longitude as its two properties.
- GPoints: This class represents a collection of GPoint objects.
- GIcon: Represents a custom icon that is used as an overlay on the map. The GIcon class exposes the following properties: the Image URL, which as the name suggests, is the URL of the image used to represent the icon; ShadowImageURL is the URL of the shadow associated with the icon; IconSize and ShadowSize represent the size of the icon and the shadow, and the last two properties are IconAnchor and InfoWindowAnchor, which specify the point where the icon should be anchored to the map relative to its top-left corner and the point where the Info window should be anchored to the map.
- GLine: This is a line that the user wishes to overlay on the map. By default it takes a collection of points (GPoints) as an argument in its constructor. It is also possible to set the color of the line as well as its weight and opacity through an overloaded constructor.
- GMarker: This is the .NET representation of the Google Maps class GMarker. The default constructor accepts an instance of a GPoint class. It also has an overloaded constructor that takes a GIcon along with the GPoint in case the developer wishes to use a custom icon to represent the marker.
- GSize: Represents a two-dimensional size measurement.
- JScriptGenerator: This is an internal class and has more of a helper function. It generates most of the JavaScript functions that are needed by the control.
- HelperColorConvertor: This class is used to convert a color into its equivalent Hex value. This class is marked as internal.
- HelperDataResolver: This is an internal class that helps in data binding and has just one method. The method casts a datasource object into an object that implements the IEnumerable interface. The help file that describes in detail the different methods and properties of the classes involved is available as a download.
Getting Started in ASP.NET
Before we use the ASP.NET control in our application, there are a few things that need to be taken care of to ensure that it works as desired.
Web.config File
The GMAP control renders itself as a DIV tag, however for non-Internet Explorer Browsers, ASP.NET renders the div tag as tables. If you want the page to render the GMAP control properly in other browsers such as Netscape and Firefox, include the browser cap section shown in Listing 1 into the Web.config file of your application.
Page Configuration
Google has certain recommendations for the HTML standards on pages that contain the map to make sure that the layout is predictable across different browsers. A detailed description of the same can be found in the Google maps documentation. It is imperative that you follow these standards, especially if you plan to overlay lines on your map. For lines to be rendered on the map, you need to include the VML namespace in the HTML page for Internet Explorer browsers. Make sure that you don't forget to do this, because otherwise the lines will not be displayed in Internet Explorer. The HTML tag of your page should at the minimum look like the snippet below:
<HTML xmlns:v="urn:schemas-microsoft-com:vml">
Adding to the Toolbar
This step is optional; however if you are using Visual Studio .NET as your IDE, I would recommend that you go ahead and add the GMap control to your toolbox. The advantage of doing so is that you can easily drag and drop the GMap control onto an ASPX page like any other ASP.NET control, and Visual Studio will automatically register the control on your page. Figure 1 shows the GMap control on the toolbar.
Creating a Basic Map Using the Control
Since we are done with the setup, let's go ahead and create a simple example using the control. We will add the GMap control to the page, set its dimensions, and make it center and zoom at a particular point. For the sample application used in this article, I have saved the map key in the Web.config file and will be setting the GoogleMapKey property of the control from the config file. I will be setting the map type of the control to be that that of "Map." In case no map type is specified, the control defaults to the preset "Map." The GMap Control also supports satellite and hybrid map types. Make sure that you center and zoom at a point, otherwise all that will show up will be a grey area. Listing 2 shows the code for this example and Figure 2 shows the output.
Setting the GMap Control Properties
Let's go ahead and set some properties to the basic example we just created. The GMap control exposes a set of properties that allows the developer to customize the control to his or her needs. If we wish to give the user the flexibility to change the view, we set the ShowMapTypeControl property of the control to true. By default, the user is able to drag the map, however, if we do not wish the user to drag the map around, we can set the EnableDragging property to false. To allow the user to be able to scroll or zoom, set the ScrollControlType property of the control. There are three different options: "large," "small," and "zoom only," to correspond to the controls offered by Google. Listing 3 shows the source code and Figure 3 shows the output in the browser.
Overlaying Markers and Pop-Up Windows
Another cool feature of Google Maps is the ability to display markers on the map and attach pop-up windows to these markers on the click event. It is possible to display formatted HTML containing links and images in these pop-up windows. Let us see how to do the same using the GMap ASP.NET control. Let's take the previous example and modify it to add two markers. One would be a plain marker and the other would have a pop-up window that would display some text. The GMap ASP.NET control has an overloaded method called OverlayMarker that takes the formatted HTML as a string parameter. If the overloaded method is called and some HTML is passed to the method, a click event is automatically passed to the marker and the info window is displayed. Listing 4 shows the code to overlay two markers and Figure 4 shows the output of the same.
Overlaying Custom Markers
Google gives us the flexibility to replace their standard marker icon with any custom icon that we specify. The same functionality is provided by the GMap ASP.NET control. In order to do so, we need to define a GIcon class with at least the following properties:
- URL of the image that would represent the GIcon
- URL of the shadow image
- Size of the image
- Size of the shadow
- The point at which the icon is to be anchored to the icon
In case info windows are used, it is also necessary to specify the point where the info window is to be anchored to the map. For this example we will be borrowing the icons from the Google Ride Finder application. Let's take the same two points that we used in the marker example and replace the standard marker icons with these custom icons. The code in Listing 5 is same as that of Listing 4, except for the use of custom icons. Figure 5shows the output.
Overlaying Lines
In this section we will see how to overlay a line on a Google Map. Lines can be overlaid on maps to denote routes, boundaries, or some other specific purpose a developer may deem necessary. As in the Google Maps API, the GMap ASP.NET control also allows overlay of lines. In the GMap control, the GLine class represents a line and takes a collection of GPoints to plot a line through them. It is also possible to set the color, width, and opacity of the line. While the Google Maps API requires color to be passed in as a Hex value, the GMap control takes in a System.Drawing.Color structure, thereby making it easier to set the color by name. Listing 6 shows the code and Figure 6 shows the rendering.
Using Multiple Google Map Controls in a Page
So far in all of the examples, we have dealt with one instance of the control in a page. It is possible to have any number of GMap controls in a single page and have granular control over each one of them. In this example, we have four instances of the control and will center and zoom them on four different cities. Listing 7 shows the code and Figure 7 shows the output in the browser. It is possible to have markers or lines on any of these controls.
Binding Data to the Control
The GMap ASP.NET control supports data binding and it is possible to bind it to any data source that implements the IEnumerable interface, hence it can bind to most of the commonly used sources such as data tables, datasets, and collections. As of now the control only supports overlaying of standard markers via data binding. The control exposes the following properties that need to be set before data binding:
- MarkerLatitudeField: Property used to specify which field from the data source will bind to the latitude field of each marker in the control
- MarkerLongitudeField: Property used to specify which field from the data source will bind to the longitude field of each marker in the control
- MarkerText: Property used to specify which field from the data source will bind to the Text field of each marker in the control (this is optional)
- DataSource: Property used to set the source of data
In this example we will first populate a table with a point and then bind it to the GMap control. Listing 8 shows the code involved in the example and Figure 8 shows the output.
Conclusion
The Google Maps API is very versatile. I hope this control will make it easier for .NET developers to harness the potential of this API.
由于时间原因来不及翻译成汉语，等有时间在翻译，本文来自http://dotnet.sys-con.com/node/171162