Display The Route Between Two Places Using Bing Maps Windows Store App JavaScript SDK In Windows Store App

Let’s first create a new project and add the Bing maps for JavaScript reference.

Step 1:
We need to  create two textboxes for  taking the values of two places so following code snippets we need to add in the default.html

Enter the places

            From:    
          To:     
         Route
             clear
            
    
     
    

Step 2:

Let’s add a new Js file in the Js folder of the project and add the refence in the default.html. Now  we will add the following code snippet in the Route.js file

 var map, searchManager, mapdirectionsManager;
 
   function Clearprev() {  
              map.entities.clear();   
           if (mapdirectionsManager) {   
           mapdirectionsManager.resetDirections();  
                       }      
             }
 
function FindRoute() {
   Clearprev();
     if ( mapdirectionsManager) {
        // setting the Route Mode to driving
        mapdirectionsManager.setRequestOptions({ routeMode:Microsoft.Maps.Directions.RouteMode.driving });
        // Create start and end points
         var initialLocation = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('fromId').value });
        var finalLocation = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('toId').value });
        mapdirectionsManager.addWaypoint(initialLocation );
       mapdirectionsManager.addWaypoint(finalLocation );
        // displaying the direction
    mapdirectionsManager.setRenderOptions({ itineraryContainer: document.getElementById('PlaceDiv') });
        // displaying route
        mapdirectionsManager.calculateDirections();  
   }
else
  {
        Microsoft.Maps.loadModule('Microsoft.Maps.Directions', {
             callback: function () {
                //Create the directions manager
                mapdirectionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
                FindRoute();     
          }
        });
    }
}
 
function ShowMessage(title, msg) {  
   var messages = new Windows.UI.Popups.MessageDialog(title, msg);
     messages.showAsync();
   }
 
function LoadMap() {
    var mapObject=
    {
        credentials: "Bing Map Key", mapTypeId: Microsoft.Maps.MapTypeId.road, zoom: 2
    };
    map = new Microsoft.Maps.Map(document.getElementById("mapViewDiv"), mapObject);
}
 
(function () {
    function initialize() {
        Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: LoadMap });
     }
    document.addEventListener("DOMContentLoaded", initialize, false); })();

In this way we can display the directon route between two places in the map view.