Enter your search terms Submit search form
	Web www.shabdar.org

Free Open source Control

Download source - 83kb

Version 1.3

• Added a new property called RecenterMap. When it's set to true map will be re-centered and zoomed to default level on postback.
• Now you can add Tooltip for markers.
  
  
• Draggable pushpins are now supported.
  
  

Version 1.2

• A minor bug related to Polygons is fixed
• Now you can enable or disable Traffic overlays.
  
  

Version 1.1

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

Introduction

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.

How to use

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

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

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.
  
  

      <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 version of System.Web.Extension library is same as what you have selected when you added reference.
  

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

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

Assigning custom icon to pushpins

• You can assign your own icons with google map control. For that first copy your icons in some directory under root directory of your website. You can assign icon to a pushpin as below,
  

  GP.IconImage = "icons/pushpin-blue.png";
  

  Note that path to image is relative to root folder. You should have icons (or whichever) directory in root folder of your website.
  
• You can add description of a pushpin which will pop up when user clicks a pushpin.
  

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

  
  
• You can format InfoHTML property using standard HTML tags.
  example,

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

  


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

Creating Interactive Map

• Insert standard asp.net button on your web page. Write following code in 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 value for Pushpin-1 here. Note that I am using ID(In above code "1") of pushpin to set new Latitude and Longitude.
  
  
• Run your application and click on Button. You will note that whole page get's refreshed (or postback). To stop it from posting back, you need to wrap this button with an Ajax Update panel. Go to Visual Studio toolbox and drag Ajax Updatepanel control on your page.
  
  
  
  
• Move your button inside this update panel.
  
• Now run website again and click on button. You should notice that now page is not posting back and Pushpin moves on map.

Auto refreshing map and GPS Navigation

Creating Polylines with Google Map control

• Create points for 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 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 Polyline to Google Map control,
  

  GoogleMapForASPNet1.GoogleMapObject.Polylines.Add(PL1);
  

Creating Polygons with Google Map control

• Create points for polyline,

  //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 polygon using 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 polygon to google map control,
  

  GoogleMapForASPNet1.GoogleMapObject.Polygons.Add(PG1);
  

Traffic Overlays

• To enable or disable traffic overlay, set following property to true or false,
  

  GoogleMapForASPNet1.GoogleMapObject.ShowTraffic = true;
  

  
  Note: Traffic overlays may not be available in every region. To get more information on traffic overlays visit below link,
  http://code.google.com/apis/maps/documentation/services.html#Traffic_Overlays

Special Notes

I have published this article on codeproject.com as well. Here is the link to this article.

http://www.codeproject.com/KB/webforms/Google-Maps-User-Control.aspx  

Comments/Questions