AJAX Enabled Google Maps ASP.NET Control

• Download source code - 44.2 KB

Introduction

Google Maps API is probably the most well known (web based) map API that is currently in use. Basically, it provides a JavaScript interface to be used in any platform. Thus, having basic JavaScript knowledge is enough to use and handle this API. However, those who are not familiar with handling JavaScript (or generally client scripting) also tend to use and handle components and objects that provide the target functionality. In the case of using this API in some web pages, it seemed to me more proper to create a web control that I could handle on the server side. For that reason, I implemented a drag and drop style [ASP.NET web] control. VS2005 [and .NET 2.0] is used as the development platform but -of course- the control can be used in newer platforms.

Background

The control implemented here is a classic drag-drop style ASP.NET web control, thus it does not require any JavaScript handling and knowledge. A little background on working with ASP.NET is enough.

Basic Code Samples

When the control is placed on the page, a code snippet like the following is created:

<cc1:googlemap id="GoogleMap1"  runat="server"/>

Setting the Latitude and Longitude properties is done like this:

GoogleMap1.MapInfo.Latitude = 41.0191048232402;
GoogleMap1.MapInfo.Longtitude = 28.997393828418;

Setting the zoom level and map type is similar:

GoogleMap1.MapInfo.Zoom = 12;
GoogleMap1.MapInfo.MapType = MapTypes.ROADMAP;

And adding a marker is also easy:

Marker mNew = new Marker();
        
//required properties:
mNew.MarkerId = Guid.NewGuid().ToString();
mNew.Latitude = 41.0023;
mNew.Longtitude = 28.9921;

//optional properties:
mNew.ImgSrc = "images/marker1.ico"; //or http://someurl.com/images/image1.jpg;
mNew.Draggable = false;
mNew.InfoWindowOnClick = true;
mNew.InfoWindowContentHtml = "here contains info window content html..";
mNew.Tooltip = "Istanbul";

GoogleMap1.Markers.Add(mNew);

Here, GoogleMap1.Markers is the accessor to get the list of added markers on the server side.

Iterating a marker over some locations with a delay time is also possible using the following declaration:

public void PlayRouteMap(List<position> Positions, int MoveInterval, Marker PositionMarker)

The first parameter is the list of locations to be iterated, the second is the delay time, and the last one is the marker that iterates the locations.

Detecting Map Events

Detecting map events is also provided on the server side [via a standard event structure]. For example, attaching the following code on Page_Load will provide to catch the map click event on the server side:

GoogleMap1.MapClicked += new MapClickedEventHandler(GoogleMap1_MapClicked);

Adding a marker on the clicked location on the map is achieved by the following code snippet:

void GoogleMap1_MapClicked(double Latitude, double Longtitude)
{
    Marker m = new Marker(Guid.NewGuid().ToString(), Latitude, 
                   Longtitude, "images/marker1.ico");
    GoogleMap1.Markers.Add(m);
}

All supported events are shown below:

public event MapCenterChangedEventHandler MapCenterChanged;
public event ZoomChangedEventHandler ZoomChanged;
public event MapTypeChangedEventHandler MapTypeChanged;
public event MapClickedEventHandler MapClicked;

Adding Control to the Toolbox and Using it

Open the toolbox (on an ASPX and ASCX page); then on the "General" node, right click and select "Choose Items..". In the opened dialog page, click "Browse...", then find and select "GoogleMap.dll". After that, the control will be placed on the toolbox and will be ready to drag-drop. Also, GoogleMap.js must be placed on the site directory or on a directory whose path is assigned to the JsFilePath property of the GoogleMap control.

The Control Structure

The control GoogleMap implements the ICallbackEventHandler interface that enables client and server side to talk to each other without postbacks. On a callback process, the server side method RaiseCallbackEvent is called with a parameter that contains the client side arguments. On this method, the client side arguments are parsed and processed, then a result string is generated to be parsed and processed on the client side. On the client side, a pre-defined JavaScript method HandleCallBackResponse is called to process argument data. That's the basic structure of the control which has a standard callback structure. For details, "ASP.NET Callbacks" are the keywords to search for.

History

• 2010.07.12 - Updates will be on CodePlex: http://googlemapcontrol.codeplex.com.