Click here to Skip to main content
Click here to Skip to main content
Go to top

AJAX Enabled Google Maps ASP.NET Control

, 12 Jul 2010
Rate this:
Please Sign up or sign in to vote.
Using the Google Maps API on server side with AJAX support.

playroute.gif

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Murat Firat
Software Developer (Senior)
Turkey Turkey
Has BS degree on CS, working as SW engineer at istanbul.

Comments and Discussions

 
QuestionFull Source Code? PinmemberKinStephen14-Jun-10 15:19 
AnswerRe: Full Source Code? PinmemberGuy Harwood19-Jun-10 2:24 
GeneralRe: Full Source Code? PinmemberMurat Firat20-Jun-10 10:20 
GeneralRe: Full Source Code? Pinmembercrb900022-Jun-10 4:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 12 Jul 2010
Article Copyright 2010 by Murat Firat
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid