VB.NET - how to show directions in google map by vb.net

While Microsoft have released their http://dev.live.com/blogs/devlive/archive/2008/07/27/386.aspx, I still haven't found a decent wrapper that converts addresses to langitude and longitude co-ordinates.  There is a Geo coder web service available http://geocoder.us/service/rest/?address=1600%20Pennsylvania%20Avenue%20NW%20Washington,%20DC%2020500 but it seems to only work for US addresses, which doesn't help me at all.

So for the moment, I'm still using Google Maps, and have prepared the following to show you how to integrate Google Maps into your ASP.NET pages.

http://demo.evonet.com.au/GoogleMaps.aspx | http://demo.evonet.com.au/GoogleMaps.rar

Step 1. Get a Google Maps API key

In order to use Google Maps on your site, you need to register for a free Google Maps API key from here: http://www.google.com/apis/maps/

Step 2. Download the SubGurim Google Maps wrapper dll

This one is the best Google Maps wrapper I have found so far http://en.googlemaps.subgurim.net/descargar.aspx.  It is a commercial product (from $10), or you can put up with the overlayed text in the free versions.

Download the gmaps.dll file and add it to your \bin directory.

Step 3. Set up your aspx page

In your aspx page, add a few text boxes to gather the address details.  You can simply use one textbox, or split the address to enable validation for suburbs, countries, etc.  I haven't included any form validation in my example.

<p style="text-align:right; margin-right:300px">
    Street Address: 
    <asp:textbox ID="txtStreetAddress" runat="server" Width="150px" /><br />
    Suburb: 
    <asp:textbox ID="txtSuburb" runat="server" Width="150px" /><br />
    Country: 
    <asp:textbox ID="txtCountry" runat="server" Width="150px" /><br /><br />
    <asp:Button Text="Show Map" ID="lnkShowMap" runat="server" />
</p>

You need to add your Google API key to your web.config file like so:

<appSettings>
    <add key="googlemaps.subgurim.net" value="YourGoogleMapsAPIKeyHere" />
</appSettings>

And finally, you need to register the SubGurim wrapper at the top of your page (or in your web.config if you have a number of pages that display maps):

<%@ Register Assembly="GMaps" Namespace="Subgurim.Controles" TagPrefix="cc1" %>

Step 4: Add code to display the map

Finally, add code that collates your address fields and calls the Google Maps wrapper.

Protected Sub lnkShowMap_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Handles lnkShowMap.Click
    Dim strFullAddress As String
    Dim sMapKey As String = 
    ConfigurationManager.AppSettings("googlemaps.subgurim.net")
    Dim GeoCode As Subgurim.Controles.GeoCode

    ' Combine our address fields to create the full address.  The street, 
    ' suburb and country should be seperated by  periods (.)
    strFullAddress = txtStreetAddress.Text & ". " & txtSuburb.Text
        & ". " & txtCountry.Text

    ' Work out the longitude and latitude
    GeoCode = GMap1.geoCodeRequest(strFullAddress, sMapKey)
    Dim gLatLng As New Subgurim.Controles.GLatLng(GeoCode.Placemark.coordinates.lat, 
        GeoCode.Placemark.coordinates.lng)
    ' Display the map
    GMap1.setCenter(gLatLng, 16, Subgurim.Controles.GMapType.GTypes.Normal)
    Dim oMarker As New Subgurim.Controles.GMarker(gLatLng)
    GMap1.addGMarker(oMarker)
End Sub

That's it! Check out the http://demo.evonet.com.au/GoogleMaps.aspx or download the http://demo.evonet.com.au/GoogleMaps.rar, and let me know if you find a good wrapper for the Virtual Earth ASP.NET control!

Free Open source Control

http://www.shabdar.org/downloads/GoogleMapControl%20v1.7.zip

Introduction

Most of us are familiar with google map. Google has provided a very reach APIs to use it in our own application. But we need some short 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 google apis in ASP.Net pages, specifically if you want to use server side functions to draw google map dynamically. For example, in my case I wanted to pull latitude longitude information from a SQL Server database and then use them to insert pushpins on google map. If you are familiar with Ajax framework, you know the answer. You will have to call asp.net server side function from javascript and use retrieved data to draw a google map. How simple is that? :). Atleast not for me. So I have decided to write a user control which can take care of javascript part and allows me to concentrate on serverside functions.

Features

Enables you to draw google map. No javascript knowledge required. Just drag and drop control on your page.

• 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, positions from asp.net code behind.
• Pushpin click and drag event support in asp.net code.
• Map click event support in asp.net code.
• Directions support. Allows you to draw route between multiple addresses
• Polylines and Polygons support.
• Geocoding support i.e. Find latitude longitude from specified address and create pushpin on that location.
• When pushpins are changing positions, automatic boundary reset and zoom support to display all pushpins. i.e. useful in real time vehicle tracking
• Optimized to give you best performance. i.e. only those pushpin data will be retrieved from server that are changed.

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. To view documentation for source code visit following article.
http://www.shabdar.org/google-maps-user-control-for-ASP-Net-part2.html

Requirements

• Visual Studio 2005 or higher
• Microsot ASP.Net Ajax framework. You can download it from http://www.asp.net/ajax/.
• 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.
  
  
  

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.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.if (!IsPostBack)

  2.{

  3. GoogleMapForASPNet1.GoogleMapObject.APIKey = "";
  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 http://code.google.com/apis/maps/documentation/introduction.html.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GoogleMapForASPNet1.GoogleMapObject.APIVersion = "2";
• Specify width and height for map. You can specify either in pixels or in percentage relative to it's container.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GoogleMapForASPNet1.GoogleMapObject.Width = "800px";

  2.GoogleMapForASPNet1.GoogleMapObject.Height = "600px";
• Specify zoom level. Default is 3.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;
• Specify Center Point for map. Map will be centered on this point.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GoogleMapForASPNet1.GoogleMapObject.CenterPoint

  2.     = 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.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GoogleMapForASPNet1.GoogleMapObject.Points.Add(

  2.  new GooglePoint("1", 43.65669, -79.45278));
  Alternatively you can also do it like below,
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GooglePoint GP = new GooglePoint();

  2.GP.ID = "1";

  3.GP.Latitude = 43.65669;

  4.GP.Longitude = -79.43270;

  5.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,
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.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.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GP.InfoHTML = "This is Pushpin-1";
  
  
• You can format InfoHTML property using standard HTML tags.
  example,
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GP.InfoHTML = "This is <font color='red'>Pushpin-1</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

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

• Insert standard asp.net button on your web page. Write following code in click event of this button.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.protected void Button1_Click(object sender, EventArgs e)

  2.{

  3.   GoogleMapForASPNet1.GoogleMapObject.Points["1"].Latitude += 0.003;

  4.   GoogleMapForASPNet1.GoogleMapObject.Points["1"].Longitude += 0.003;

  5.}
  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

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

Creating Polylines with Google Map control

• Create points for polyline,
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  01.//Define Points for polygon

  02.GooglePoint GP1 = new GooglePoint();

  03.GP1.ID = "GP1";

  04.GP1.Latitude = 43.66675;

  05.GP1.Longitude = -79.4042;

  06. 

  07.GooglePoint GP2 = new GooglePoint();

  08.GP2.ID = "GP2";

  09.GP2.Latitude = 43.67072;

  10.GP2.Longitude = -79.38677;

  11..

  12..//Define GP3,GP4,GP5,GP6 and GP7 in similar way

  13..

  14.GooglePoint GP7 = new GooglePoint();

  15.GP7.ID = "GP7";

  16.GP7.Latitude = 43.66656;

  17.GP7.Longitude = -79.40445;
• Create polyline between points GP1, GP2 and GP3
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  01.//Create Polygon using above points

  02.GooglePolygon PG1 = new GooglePolygon();

  03.PG1.ID = "PG1";

  04.//Give Hex code for line color

  05.PG1.FillColor = "#0000FF";

  06.PG1.FillOpacity = 0.4;

  07.//Stroke is outer border of polygon.

  08.PG1.StrokeColor = "#0000FF";

  09.PG1.StrokeOpacity = 1;

  10.PG1.StrokeWeight = 2;

  11.//Add points to polygon

  12.PG1.Points.Add(GP1);

  13.PG1.Points.Add(GP2);

  14.PG1.Points.Add(GP3);

  15.PG1.Points.Add(GP4);

  16.PG1.Points.Add(GP5);

  17.PG1.Points.Add(GP6);

  18.PG1.Points.Add(GP7);
• Add Polyline to Google Map control,
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GoogleMapForASPNet1.GoogleMapObject.Polygons.Add(PG1);

Traffic Overlays

• To enable or disable traffic overlay, set following property to true or false,
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

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

Go through samples provided in download. I have explained all sort of circumtances in which you may want to use google map control. If you have any questions, feel free to ask.

In Part 2, I have explained souce code of Google Map user control and how to customize it for your own use.
http://www.shabdar.org/google-maps-user-control-for-ASP-Net-part2.html

Special Notes

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

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

Version 1.7 (March 20, 2011)

Free Open source Control

http://www.shabdar.org/downloads/GoogleMapControl%20v1.7.zip

Introduction

Most of us are familiar with google map. Google has provided a very reach APIs to use it in our own application. But we need some short 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 google apis in ASP.Net pages, specifically if you want to use server side functions to draw google map dynamically. For example, in my case I wanted to pull latitude longitude information from a SQL Server database and then use them to insert pushpins on google map. If you are familiar with Ajax framework, you know the answer. You will have to call asp.net server side function from javascript and use retrieved data to draw a google map. How simple is that? :). Atleast not for me. So I have decided to write a user control which can take care of javascript part and allows me to concentrate on serverside functions.

Features

Enables you to draw google map. No javascript knowledge required. Just drag and drop control on your page.

• 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, positions from asp.net code behind.
• Pushpin click and drag event support in asp.net code.
• Map click event support in asp.net code.
• Directions support. Allows you to draw route between multiple addresses
• Polylines and Polygons support.
• Geocoding support i.e. Find latitude longitude from specified address and create pushpin on that location.
• When pushpins are changing positions, automatic boundary reset and zoom support to display all pushpins. i.e. useful in real time vehicle tracking
• Optimized to give you best performance. i.e. only those pushpin data will be retrieved from server that are changed.

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. To view documentation for source code visit following article.
http://www.shabdar.org/google-maps-user-control-for-ASP-Net-part2.html

Requirements

• Visual Studio 2005 or higher
• Microsot ASP.Net Ajax framework. You can download it from http://www.asp.net/ajax/.
• 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.
  
  
  

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.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.if (!IsPostBack)

  2.{

  3. GoogleMapForASPNet1.GoogleMapObject.APIKey = "";
  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 http://code.google.com/apis/maps/documentation/introduction.html.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GoogleMapForASPNet1.GoogleMapObject.APIVersion = "2";
• Specify width and height for map. You can specify either in pixels or in percentage relative to it's container.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GoogleMapForASPNet1.GoogleMapObject.Width = "800px";

  2.GoogleMapForASPNet1.GoogleMapObject.Height = "600px";
• Specify zoom level. Default is 3.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;
• Specify Center Point for map. Map will be centered on this point.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GoogleMapForASPNet1.GoogleMapObject.CenterPoint

  2.     = 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.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GoogleMapForASPNet1.GoogleMapObject.Points.Add(

  2.  new GooglePoint("1", 43.65669, -79.45278));
  Alternatively you can also do it like below,
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GooglePoint GP = new GooglePoint();

  2.GP.ID = "1";

  3.GP.Latitude = 43.65669;

  4.GP.Longitude = -79.43270;

  5.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,
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.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.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GP.InfoHTML = "This is Pushpin-1";
  
  
• You can format InfoHTML property using standard HTML tags.
  example,
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GP.InfoHTML = "This is <font color='red'>Pushpin-1</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

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

• Insert standard asp.net button on your web page. Write following code in click event of this button.
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.protected void Button1_Click(object sender, EventArgs e)

  2.{

  3.   GoogleMapForASPNet1.GoogleMapObject.Points["1"].Latitude += 0.003;

  4.   GoogleMapForASPNet1.GoogleMapObject.Points["1"].Longitude += 0.003;

  5.}
  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

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

Creating Polylines with Google Map control

• Create points for polyline,
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  01.//Define Points for polygon

  02.GooglePoint GP1 = new GooglePoint();

  03.GP1.ID = "GP1";

  04.GP1.Latitude = 43.66675;

  05.GP1.Longitude = -79.4042;

  06. 

  07.GooglePoint GP2 = new GooglePoint();

  08.GP2.ID = "GP2";

  09.GP2.Latitude = 43.67072;

  10.GP2.Longitude = -79.38677;

  11..

  12..//Define GP3,GP4,GP5,GP6 and GP7 in similar way

  13..

  14.GooglePoint GP7 = new GooglePoint();

  15.GP7.ID = "GP7";

  16.GP7.Latitude = 43.66656;

  17.GP7.Longitude = -79.40445;
• Create polyline between points GP1, GP2 and GP3
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  01.//Create Polygon using above points

  02.GooglePolygon PG1 = new GooglePolygon();

  03.PG1.ID = "PG1";

  04.//Give Hex code for line color

  05.PG1.FillColor = "#0000FF";

  06.PG1.FillOpacity = 0.4;

  07.//Stroke is outer border of polygon.

  08.PG1.StrokeColor = "#0000FF";

  09.PG1.StrokeOpacity = 1;

  10.PG1.StrokeWeight = 2;

  11.//Add points to polygon

  12.PG1.Points.Add(GP1);

  13.PG1.Points.Add(GP2);

  14.PG1.Points.Add(GP3);

  15.PG1.Points.Add(GP4);

  16.PG1.Points.Add(GP5);

  17.PG1.Points.Add(GP6);

  18.PG1.Points.Add(GP7);
• Add Polyline to Google Map control,
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

  1.GoogleMapForASPNet1.GoogleMapObject.Polygons.Add(PG1);

Traffic Overlays

• To enable or disable traffic overlay, set following property to true or false,
  
  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#viewSource

  http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#printSourcehttp://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html#about

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

Go through samples provided in download. I have explained all sort of circumtances in which you may want to use google map control. If you have any questions, feel free to ask.

In Part 2, I have explained souce code of Google Map user control and how to customize it for your own use.
http://www.shabdar.org/google-maps-user-control-for-ASP-Net-part2.html

Special Notes

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

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

Version 1.7 (March 20, 2011)