| By Jeevan Murkoth |
Article Rating: |
|
| October 15, 2008 10:30 AM EDT |
Reads: |
266,542 |
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 5 shows 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.
References
Subscribe to Silverlight Developer's Journal Email News Alerts
Subscribe via RSS
