How to get directions using Bing Maps Directions module in ASP.NET

Introduction
In this post we will see how to calculate route between two places on Bing map in ASP.NET


Description

First we will store latitude and longitude of some cities in the SQL Server database. Then we will use Bing Maps SDK to load the map and calculate direction between two places and show it on a Bing Map

Step:1 Create a table named “Locations” in SQL Server and put some sample data in it



Step:2 Create a new ASP .NET project and following in HTML source of the ASPX page

     


          

               Get driving route on Bing map
          

               

                    

                         From
                         To
                    

                         
                              
                              
                         
                         
                              
                              
                         
                         
                              
                         
                    

                    


                   Click on GetDirection button
               

               

Step:3 Add following code in code behind of the ASPX page

protected void Page_Load(object sender, EventArgs e)
{
GetLocations();
}

private void GetLocations()
{
     string ConString =
     @"Data Source=DEEPAK\SQLSERVER2005;User Id=sa;Password=*******;Initial Catalog=Employee;";
     string CmdString =
          "SELECT CAST(Latitude AS VARCHAR(50))+','+CAST(Longitude AS VARCHAR(50)) AS 'Location', City, Country FROM Locations";
     using (SqlConnection con = new SqlConnection(ConString))
     {
          SqlCommand cmd = new SqlCommand(CmdString, con);
          SqlDataAdapter sda = new SqlDataAdapter(cmd);
          DataSet ds = new DataSet();
          sda.Fill(ds);
          if (ds.Tables.Count > 0)
          {
               ddlFrom.DataSource = ds.Tables[0].DefaultView;
               ddlFrom.DataTextField = "City";
               ddlFrom.DataValueField = "Location";
               ddlFrom.DataBind();

               ddlTo.DataSource = ds;
               ddlTo.DataTextField = "City";
               ddlTo.DataValueField = "Location";
               ddlTo.DataBind();
          }
     }
}

This method populates locations in DropDownLists from the database

Step:3 Add following scripts in the head section of HTML source of the ASPX page

Map is loaded on Body onLoad event by calling getMap Javascript function. createDirections method is called when user clicks on GetDirection button. It loads the Directions module and calls createDrivingRoute function.
In createDrivingRoute function, a DirectionsManager object is created if it is null using createDirectionsManager function. createDirectionsManager function creates DirectionsManager using Microsoft.Maps.Directions.DirectionsManager class which takes a map object as parameter.
Then two Waypoints are created using Microsoft.Maps.Directions.Waypoint class with Latitudes and Longitudes retrieved from ddlFrom and ddlTo DropDownLists. These Waypoints are then added to the DirectionsManager object using addWaypoint method. Before that direction’s route mode is set using setRequestOptions method of the DirectionsManager class. DirectionsManger’s routeMode is set to Microsoft.Maps.Directions.RouteMode.driving for showing driving direction on the map. Other values can be transit and walking. Then itineraryContainer is set to a div with id “directionsItinerary” to show step by step route guidance in that div to reach destination from the source. It also show distance and time required to reach the destination.
Finally calculateDirections method is called to calculate the route and show it in the Bing map.