AJAX Enabled GoogleMap ASP.NET Control

• Download GoogleMap - 33.93 KB

Introduction

GoogleMap 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 at any platform. Thus, having basic javascript knowledge is enought to use&handle this API. However, those who are not familiar with handling javascript (or generally client scripting) are tend to use&handle components&objects that provide the target functionality. In the case of using this API on some web pages, it seemed to me more proper to create a web control that I could handle on server side. For that reason I implemented a drag and drop style [ASP.NET web] control. VS2005 [and .NET 2.0] is used as development platform but –of course- the control can be used at higher platforms.

Background

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

Basic Code Samples 

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

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

Then setting latitude and longtitude properties is done like that:

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

Setting 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 server side.

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

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

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

Detecting Map Events

Detecting map events are also provided on server side [via standart event structure]. For Example, attaching the following code on Page_Load will provide to catch the map click event on server side:

GoogleMap1.MapClicked += new MapClickedEventHandler(GoogleMap1_MapClicked);

In the case of adding a marker on 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 below:

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

Adding Control To Toolbox and Using It

Open the toolbox (on an aspx&ascx page) then on “General” node right click and select “Choose Items..”. On opened dialog page click “Browse...” then find and select “GoogleMap.dll”. After these steps, the control will be placed on the toolbox and be ready to drag-drop. Also, GoogleMap.js must be placed on the site directory or on a directory whose path is assigned to JsFilePath property of GoogleMap control.

The Control Structure

The control GoogleMap implements ICallbackEventHandler interface that enables client and server side talk eachother without postbacks. On a callback process, server side method RaiseCallbackEvent is called with a parameter that contains client side arguments. On this method, client side arguments are parsed and processed then a result string is generated to be parsed and processed on client side. On 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 standart callback structure. For detail "ASP.NET Callbacks" are the keywords to be searched for.

History