Google Maps Control for ASP.NET - Part 1

• Download source - 89.9 KB (Version 1.2)
• Download new version here

Introduction

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.

Features

• 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.

Requirements

• 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:

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.



• 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).



• Go to your web.config file, and add the following lines between the <System.Web></System.Web> elements.

    <httpHandlers>
      <remove path="*.asmx" verb="*"/>
      
      <add path="*.asmx" verb="*" 
      type="System.Web.Script.Services.ScriptHandlerFactory, 
      System.Web.Extensions,  Version=1.0.61025.0, 
      Culture=neutral, 
      PublicKeyToken=31BF3856AD364E35" 
      validate="false"/>
       
      <add path="*_AppService.axd" verb="*" 
      type="System.Web.Script.Services.ScriptHandlerFactory, 
      System.Web.Extensions, Version=1.0.61025.0, 
      Culture=neutral, 
      PublicKeyToken=31BF3856AD364E35" 
      validate="false"/>
      
      <add path="ScriptResource.axd" verb="GET,HEAD" 
      type="System.Web.Handlers.ScriptResourceHandler, 
      System.Web.Extensions, Version=1.0.61025.0, 
      Culture=neutral, 
      PublicKeyToken=31BF3856AD364E35" 
      validate="false"/>
      
    </httpHandlers>
    
    <httpModules>
      <add name="ScriptModule" 
      type="System.Web.Handlers.ScriptModule, 
      System.Web.Extensions, 
      Version=1.0.61025.0, Culture=neutral, 
      PublicKeyToken=31BF3856AD364E35"/>
    </httpModules>

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.



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:



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.

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.

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.

 GoogleMapForASPNet1.GoogleMapObject.Width = "800px";
 GoogleMapForASPNet1.GoogleMapObject.Height = "600px";

• Specify the zoom level. The default is 3.

 GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;

• Specify the Center Point for the map. The map will be centered on this point.

  GoogleMapForASPNet1.GoogleMapObject.CenterPoint 
    = 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.

  GoogleMapForASPNet1.GoogleMapObject.Points.Add(
        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;
GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP);

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:

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.

GP.InfoHTML = "This is Pushpin-1";



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

For example:

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



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:

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.



• Move your button inside this UpdatePanel.



• 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

• Create points for the polyline:

GooglePoint GP1 = new GooglePoint();
GP1.ID = "GP1";
GP1.Latitude = 43.65669;
GP1.Longitude = -79.44268;
GP1.InfoHTML = "This is point 1";
GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP1);

GooglePoint GP2 = new GooglePoint();
GP2.ID = "GP2";
GP2.Latitude = 43.66619;
GP2.Longitude = -79.44268;
GP2.InfoHTML = "This is point 2";
GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP2);

GooglePoint GP3 = new GooglePoint();
GP3.ID = "GP3";
GP3.Latitude = 43.67689;
GP3.Longitude = -79.43270;
GP3.InfoHTML = "This is point 3";
GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP3);

• Create a polyline between points GP1, GP2, and GP3:

//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
PL1.Points.Add(GP1);
PL1.Points.Add(GP2);
PL1.Points.Add(GP3);

• Add a polyline to the Google Maps control:

GoogleMapForASPNet1.GoogleMapObject.Polylines.Add(PL1);

Creating polygons with the Google Maps control

• Create points for the polygon:

//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:

//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
PG1.Points.Add(GP1);
PG1.Points.Add(GP2);
PG1.Points.Add(GP3);
PG1.Points.Add(GP4);
PG1.Points.Add(GP5);
PG1.Points.Add(GP6);
PG1.Points.Add(GP7);

• Add the polygon to the Google Maps control:

GoogleMapForASPNet1.GoogleMapObject.Polygons.Add(PG1);

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.

History

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.