Click here to Skip to main content
15,077,137 members
Articles / Web Development / HTML
Posted 18 Mar 2008


268 bookmarked

Google Maps Control for ASP.NET - Part 1

Rate me:
Please Sign up or sign in to vote.
4.89/5 (91 votes)
12 May 2008GPL37 min read
The Google Maps control for ASP.NET.

Image 1


Most of us are familiar with the Google maps. Google has provided a very reach API to use in our own applications. But, we need some sort of JavaScript knowledge in order to use it. I don't know about others, but for me, it was a little difficult to use JavaScript along with the Google APIs in ASP.NET pages, specifically when using server-side functions to draw Google maps dynamically. For example, in my case, I wanted to pull latitude/longitude information from a SQL Server database and then use that to insert pushpins on a Google map. If you are familiar with the AJAX framework, you know the answer. You will have to call ASP.NET server-side functions from JavaScript and use the retrieved data to draw a Google map. How simple is that? :). Not at all; at least, not for me. So, I have decided to write a user control which can take care of the JavaScript part and allow me to concentrate on the server-side functions.


  • Enables you to draw Google maps. No JavaScript knowledge required. Just drag and drop a control on your page.
  • Uses AJAX calls to retrieve server-side data.
  • Enables you to change pushpin positions on the fly. No need to refresh the full map.
  • Enables you to change pushpin icons on the fly.
  • Optimized to give you the best performance, i.e., only those pushpin data will be retrieved from the server that have changed.

How to use

In this part of the article, I don't want to explain how I created this control. Instead, I want you to start using it.


  • Visual Studio 2005 or higher
  • Microsoft ASP.NET AJAX framework. You can download it from here.
  • Internet Explorer 7.0 or Mozilla Firefox 2.x. (Note: It may work on other browsers. I have tested on IE and Firefox only.)

Follow these steps in order to use it in your ASP.NET website:

  • Download the source from link provided on the top of this page. Extract it somewhere on your hard-drive.
  • Open the extracted folder as a website in Visual Studio, and run it. When you run this website, you will be able to navigate to a few sample pages.
  • To use this control in your application, copy the following files to your ASP.NET application in the same structure as shown below:
  • Image 2

Now, we will add a reference to the AJAX library. If you are already using AJAX controls in your application, you can skip the following four steps.

Adding the AJAX Framework to your website

  • Right click on your website in Solution Explorer, and click Add Reference.
  • Image 3

  • In the Add Reference window, select the System.Web and System.Web.Extensions libraries, and click OK. Note the library versions (in the picture, it is 1.0.61025.0; you may have another version, you can use any version).
  • Image 4

  • Go to your web.config file, and add the following lines between the <System.Web></System.Web> elements.
  • XML
      <remove path="*.asmx" verb="*"/>
      <add path="*.asmx" verb="*"
      System.Web.Extensions,  Version=1.0.61025.0,
      <add path="*_AppService.axd" verb="*"
      System.Web.Extensions, Version=1.0.61025.0,
      <add path="ScriptResource.axd" verb="GET,HEAD"
      System.Web.Extensions, Version=1.0.61025.0,
      <add name="ScriptModule"
      Version=1.0.61025.0, Culture=neutral,

    Note : Make sure that the version of the System.Web.Extension library is the same as what you have selected when you added the reference.

Adding the Google Maps control to your webpage

  • Open the page where you want to insert a Google map.
  • Drag the GoogleMapForASPNet.ascx control to your page.
  • Image 5

    You won't be able to see the Google Maps control in Design view. Instead, you should see a Script Manager as part of this control.

  • At this point, you can run your application, and you should be able to see a blank Google Maps control on your page, as shown below:
  • Image 6

    Let's add few pushpins on this map. For that, you will have to add some code in the Page_Load() event of your page.

Passing parameters to the Google Maps control

  • You must specify the Google Maps API Key for this component. You can obtain this key from Google.
  • C#
    if (!IsPostBack)
     GoogleMapForASPNet1.GoogleMapObject.APIKey = "<YourGoogleMapKey>";

    Note that the initialization code for the map should go inside the if (!IsPostBack) block.

  • Optionally, you can specify which version of the Google Maps API to use. You can get more information about the Google Maps API version here.
  • C#
    GoogleMapForASPNet1.GoogleMapObject.APIVersion = "2";
  • Specify the width and height for the map. You can specify either in pixels, or in percentage relative to its container.
  • C#
    GoogleMapForASPNet1.GoogleMapObject.Width = "800px";
    GoogleMapForASPNet1.GoogleMapObject.Height = "600px";
  • Specify the zoom level. The default is 3.
  • C#
    GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;
  • Specify the Center Point for the map. The map will be centered on this point.
  • C#
      = new GooglePoint("CenterPoint", 43.66619, -79.44268);
  • Add pushpins for the map. This can be done by initializing the GooglePoint type object. In the constructor of GooglePoint, the first argument is the ID of this pushpin. It must be unique for each pin. The second and third arguments are the latitude and longitude.
  • C#
          new GooglePoint("1", 43.65669, -79.45278));

    Alternatively, you can also do it like this:

    GooglePoint GP = new GooglePoint();
    GP.ID = "1";
    GP.Latitude = 43.65669;
    GP.Longitude = -79.43270;

    You can add as many pushpins as you wish. Now, run the website again, and you should see pushpins on the map.


Assigning custom icons to pushpins

  • You can assign your own icons with the Google Maps control. For that, first, copy your icons in some directory under the root directory of your website. You can assign an icon to a pushpin as shown below:
  • C#
    GP.IconImage = "icons/pushpin-blue.png";

    Note that the path to the image is relative to the root folder. You should have an icons (or whichever) directory in the root folder of your website.

  • You can add a description for a pushpin, which will pop up when the user clicks the pushpin.
  • C#
    GP.InfoHTML = "This is Pushpin-1";

    Image 8

  • You can format the InfoHTML property using standard HTML tags.
  • For example:

    GP.InfoHTML = "This is <font color='red'><b>Pushpin-1</b></font>";

    Image 9

    Up to this point, I have explained you the basics of using the Google Maps control. Now, let's implement some advanced functionality. Let's say, we want to move pushpins when the user does some action. For example, when a user clicks on a button. For that, follow the steps below.

Creating an interactive map

You can create an interactive map using the Google Maps control. You can move pushpins when the user clicks on a button. Here is how you can do it.

  • Insert a standard ASP.NET button on your web page. Write the following code in the Click event of this button:
  • C#
    protected void Button1_Click(object sender, EventArgs e)
       GoogleMapForASPNet1.GoogleMapObject.Points["1"].Latitude += 0.003;
       GoogleMapForASPNet1.GoogleMapObject.Points["1"].Longitude += 0.003;

    We are incrementing Latitude and Longitude values for the Pushpin 1 here. Note that I am using the ID (in the above code, "1") of the pushpin to set the new Latitude and Longitude.

  • Run your application and click on the button. You will note that the whole page gets refreshed (or postback). To stop it from posting back, you need to wrap this button with an AJAX UpdatePanel. Go to the Visual Studio toolbox and drag an AJAX UpdatePanel control on your page.
  • Image 10

  • Move your button inside this UpdatePanel.
  • Image 11

  • Now, run the website again and click on the button. You should notice that the page is not posting back now and the pushpin moves on the map.

Auto refreshing the map and GPS navigation

You can use the AJAX Framework's timer control in a similar way as the button control (as I have explained above). On the Timer_Tick() event, you can specify the new latitude longitude for all the pushpins. This way, the map will move all the pushpins automatically after a specified time delay. You can hook up any GPS service with this control to create a GPS navigation system.

Creating polylines with the Google Maps control

Image 12

  • Create points for the polyline:
  • C#
    GooglePoint GP1 = new GooglePoint();
    GP1.ID = "GP1";
    GP1.Latitude = 43.65669;
    GP1.Longitude = -79.44268;
    GP1.InfoHTML = "This is point 1";
    GooglePoint GP2 = new GooglePoint();
    GP2.ID = "GP2";
    GP2.Latitude = 43.66619;
    GP2.Longitude = -79.44268;
    GP2.InfoHTML = "This is point 2";
    GooglePoint GP3 = new GooglePoint();
    GP3.ID = "GP3";
    GP3.Latitude = 43.67689;
    GP3.Longitude = -79.43270;
    GP3.InfoHTML = "This is point 3";
  • Create a polyline between points GP1, GP2, and GP3:
  • C#
    //Define polyline
    GooglePolyline PL1 = new GooglePolyline();
    PL1.ID = "PL1";
    //Give Hex code for line color
    PL1.ColorCode = "#0000FF";
    //Specify width for line
    PL1.Width = 5;
    //Add points
  • Add a polyline to the Google Maps control:
  • C#

Creating polygons with the Google Maps control

Image 13

  • Create points for the polygon:
  • C#
    //Define Points for polygon
    GooglePoint GP1 = new GooglePoint();
    GP1.ID = "GP1";
    GP1.Latitude = 43.66675;
    GP1.Longitude = -79.4042;
    GooglePoint GP2 = new GooglePoint();
    GP2.ID = "GP2";
    GP2.Latitude = 43.67072;
    GP2.Longitude = -79.38677;
    .//Define GP3,GP4,GP5,GP6 and GP7 in similar way
    GooglePoint GP7 = new GooglePoint();
    GP7.ID = "GP7";
    GP7.Latitude = 43.66656;
    GP7.Longitude = -79.40445;
  • Create the polygon using the above points:
  • C#
    //Create Polygon using above points
    GooglePolygon PG1 = new GooglePolygon();
    PG1.ID = "PG1";
    //Give Hex code for line color
    PG1.FillColor = "#0000FF";
    PG1.FillOpacity = 0.4;
    //Stroke is outer border of polygon.
    PG1.StrokeColor = "#0000FF";
    PG1.StrokeOpacity = 1;
    PG1.StrokeWeight = 2;
    //Add points to polygon
  • Add the polygon to the Google Maps control:
  • C#

Go through the samples provided in the download. I have explained all sorts of circumstances in which you may want to use the Google Maps control. If you have any questions, feel free to ask.

In Part 2, I will explain to you the source code of the Google Maps user control and how to customize it for your own use.


Version 1.2

I am releasing a new version of this control. The following changes have been done in this version:

  • A minor bug related to polygons is fixed.
  • Now, you can enable or disable traffic overlays.

Version 1.1

The following features have been added in this version:

  • Now, you can draw polylines and polygons with this control.
  • A new property, GoogleMapObject.APIVersion, has been added to this control. This will allow users to use any version of the Google Maps API. The default version is 2.


This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


About the Author

Shabdar Ghata
Web Developer
Canada Canada
Software Developer

Comments and Discussions

QuestionShowing multiple routings Pin
Member 450973722-Jul-20 10:13
MemberMember 450973722-Jul-20 10:13 
QuestionUsing animation when polylines get created Pin
Siddharth_Gupta3-Jul-18 3:19
MemberSiddharth_Gupta3-Jul-18 3:19 
Questionhow do i display a data from sql with lat , lan in alert box , when use click on map Pin
Member 121190756-Jan-16 0:18
MemberMember 121190756-Jan-16 0:18 
BugFacing error on GoogleObject error Pin
Member 121190756-Nov-15 1:09
MemberMember 121190756-Nov-15 1:09 
Questionhow can i calculate length of polyline Pin
deepakmishra_mrt4-Jun-15 1:30
Memberdeepakmishra_mrt4-Jun-15 1:30 
QuestionUnrivaled For Ease Of Use In ASP.NET Pin
Cleveland Mark Blakemore15-Feb-15 17:30
MemberCleveland Mark Blakemore15-Feb-15 17:30 
Questionmap click not work inside mozilla ! Pin
meysamg25-Dec-14 23:51
Membermeysamg25-Dec-14 23:51 
Questionmouse hover for infohtml in Google Maps Control Pin
Member 1056580311-Nov-14 8:01
MemberMember 1056580311-Nov-14 8:01 
QuestionHow to get a location (long, lat) where click on maps Pin
do dinh vinh27-Jul-14 17:21
Memberdo dinh vinh27-Jul-14 17:21 
Questionnot run framework 4.0 Pin
nct197220-Jul-14 21:21
Membernct197220-Jul-14 21:21 
GeneralMy vote of 5 Pin
rj475613-Mar-14 15:56
Memberrj475613-Mar-14 15:56 
Question[My vote of 2] No solution file Pin
TheeStudent24-Oct-13 2:40
MemberTheeStudent24-Oct-13 2:40 
AnswerRe: [My vote of 2] No solution file Pin
rj475613-Mar-14 15:59
Memberrj475613-Mar-14 15:59 
Questionhow to display label pushpin Pin
nct197221-Aug-13 4:47
Membernct197221-Aug-13 4:47 
QuestionI want to change design of InfoHTML Pin
Dhaval Ptl19-Aug-13 7:58
MemberDhaval Ptl19-Aug-13 7:58 
QuestionError:the base class includes the field 'GoogleMapForASPNet1',but its type(GoogleMapForASPNet) is not compatible with the type of contol(ASP.googlemapforaspnet_ascx) Pin
j.basterra17-Apr-13 3:34
Memberj.basterra17-Apr-13 3:34 
QuestionQuestion. Pin
Member 836192910-Apr-13 20:20
MemberMember 836192910-Apr-13 20:20 
QuestionAdd Ajax frame work to my web application in order to use google map Pin
rongqu23-Jan-13 4:09
Memberrongqu23-Jan-13 4:09 
QuestionPass the code to Google apis v3 Pin
tgolfieri28-Sep-12 7:52
Membertgolfieri28-Sep-12 7:52 
AnswerRe: Pass the code to Google apis v3 Pin
DotNetCoderJunior25-Mar-13 2:55
MemberDotNetCoderJunior25-Mar-13 2:55 
AnswerRe: Pass the code to Google apis v3 Pin
Tim_Mackey20-Oct-13 22:58
MemberTim_Mackey20-Oct-13 22:58 
QuestionVisual Studio2008 restarts on opening GoogleMapForASPNet.ascx file Pin
Shiridish25-Sep-12 20:46
MemberShiridish25-Sep-12 20:46 
QuestionOn click event in IIS is not working Pin
SREEKAN218-Sep-12 6:06
MemberSREEKAN218-Sep-12 6:06 
AnswerRe: On click event in IIS is not working Pin
nct197220-Jul-14 21:59
Membernct197220-Jul-14 21:59 
GeneralIE9 does not show zoom control Pin
Member 878137130-Jul-12 8:36
MemberMember 878137130-Jul-12 8:36 

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.