Click here to Skip to main content
15,868,016 members
Articles / Web Development / HTML

AJAX Enabled Google Maps ASP.NET Control

Rate me:
Please Sign up or sign in to vote.
4.64/5 (20 votes)
12 Jul 2010CPOL3 min read 52K   2.9K   76   11
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:

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

Setting the Latitude and Longitude properties is done like this:

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

Setting the zoom level and map type is similar:

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

And adding a marker is also easy:

C#
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:

C#
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:

C#
GoogleMap1.MapClicked += new MapClickedEventHandler(GoogleMap1_MapClicked);

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

C#
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:

C#
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)


Written By
Software Developer (Senior)
Turkey Turkey
Has BS degree on computer science, working as software engineer in istanbul.

Comments and Discussions

 
QuestionChange text when zoom in/out Pin
derza15-Feb-15 14:08
derza15-Feb-15 14:08 
QuestionHow To calculate by road driving distance between 2 point Pin
Naeem Shah29-Jan-15 23:06
Naeem Shah29-Jan-15 23:06 
QuestionHow To calculate by road driving distance between 2 points Pin
Naeem Shah29-Jan-15 23:05
Naeem Shah29-Jan-15 23:05 
Questioncreate webservice Pin
Member 1105467023-Nov-14 7:29
Member 1105467023-Nov-14 7:29 
QuestionServer Event larda sorun var Pin
DaRKNeSS_OF_DEATH9-Aug-14 12:01
DaRKNeSS_OF_DEATH9-Aug-14 12:01 
QuestionTracking on road Pin
Jasim Khan Afridi17-May-13 5:14
Jasim Khan Afridi17-May-13 5:14 
GeneralMy vote of 1 Pin
crb900022-Jun-10 4:45
crb900022-Jun-10 4:45 
QuestionFull Source Code? Pin
Stephen Brannan14-Jun-10 15:19
Stephen Brannan14-Jun-10 15:19 
AnswerRe: Full Source Code? Pin
Guy Harwood19-Jun-10 2:24
Guy Harwood19-Jun-10 2:24 
GeneralRe: Full Source Code? Pin
Murat Firat20-Jun-10 10:20
Murat Firat20-Jun-10 10:20 
GeneralRe: Full Source Code? Pin
crb900022-Jun-10 4:41
crb900022-Jun-10 4:41 

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

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