Google Maps Control for ASP.Net

Features

• Enables you to draw google map. No javascript knowledge required. Just drag and drop control on your page.
• Uses Ajax calls to retrieve server side data.
• Enables you to change pushpin postions on the fly. No need to refresh full map.
• Enables you to change pushpin icons on the fly.
• Optimized to give you best performance. i.e. only those pushpin data will be retrieved from server that are changed.
• Allows you to draw polylines and polygons

How to use

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

Requirements

• Visual Studio 2005 or higher
• Microsot 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 below steps in order to use it in your ASP.Net website.

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

Now we will add reference to Ajax library. If you are already using Ajax controls in your application, you can skip following 4 steps.

Adding Ajax Framework to your website

• Right click on your website in solution explorer and click add reference.
  
  
  
• In Add Reference window, select System.Web and System.Web.Extensions libraries and click OK. Note library versions (in below picture 1.0.61025.0. You may have another version. You can use any version).
  
  
  
• Go to your web.config file and add following lines between <System.Web></System.Web> element.

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

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

Adding Google Map control to your webpage

• Open page where you want to insert Google Map.
• Drag GoogleMapForASPNet.ascx control to your page.
  
  You won't be able to see Google Map in design view. Instead, you should see 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 Map on your page as shown below.
  
  

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

Passing parameters to Google Map control

• You must specify Google Map API Key for this component. You can obtain this key from http://code.google.com/apis/maps/signup.html.

  if (!IsPostBack)
  {
      GoogleMapForASPNet1.GoogleMapObject.APIKey = "<YourGoogleMapKey>";

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

• Optionally you can specify which version of Google maps API to use. You can get more information about Google Maps API version here.

  GoogleMapForASPNet1.GoogleMapObject.APIVersion = "2";

• Specify width and height for map. You can specify either in pixels or in percentage relative to it's container.

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

• Specify zoom level. Default is 3.

  GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;

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

  GoogleMapForASPNet1.GoogleMapObject.CenterPoint = new GooglePoint("CenterPoint", 43.66619, -79.44268);

• Add pushpins for map. This can be done by initializing GooglePoint type object. In constructor of GooglePoint, First argument is ID of this pushpin. It must be unique for each pin. Second and third arguments are latitude and longitude.

  GoogleMapForASPNet1.GoogleMapObject.Points.Add(new GooglePoint("1", 43.65669, -79.45278));
  Alternatively you can also do it like below,
  GooglePoint GP = new GooglePoint();
  GP.ID = "1";
  GP.Latitude = 43.65669;
  GP.Longitude = -79.43270;
  GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP);