none
How to draw the route path in bing map version 7.0 by passing the lat and long as a source and address as a destination RRS feed

  • Question

  • I am facing the problem to draw the route path when i am passing the lat and long as a source and address as a destination like in bing map version 6.3.

    And also if i pass the address as a destination and if same address belongs to multiple location then enable to display the popup of multiple location or disambiguation like the inbuilt feature in bing map version 6.3.

    Can anyone provide the solution for the above problems. ASAP

     

    • Moved by Ricky_Brundritt Friday, March 9, 2012 5:29 PM (From:Bing Maps: Map Control and Web services Development)
    Tuesday, May 10, 2011 5:49 AM

Answers

  • In order to manage the disambiguation, you will have to deal with it on your own.
    To do this you have two ways:

    • Geocode the address and check the number of result
    • Get the direction from various results and disambiguate after getting the result

    Parameters on the routing query can be addresses or location (up to 25 waypoints), see:

    Here is a sample of routing code that might help you, from Johannes :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
       <title>Bing Maps - v7.0</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <style type="text/css">
        body {
          font-family: Verdana;
          font-size: 12px;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0px;
          top: 0px;
          margin-left: -1px;
          margin-top: -1px;
        }
       </style>
       <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
       <script type="text/javascript">
         var map = null;
         var MM = Microsoft.Maps;
    
         function GetMap() {
           map = new MM.Map(document.getElementById("myMap"), {
             credentials: "YOUR BING MAPS KEY",
             center: new MM.Location(54.87350326912944, 15.333815098500053),
             mapTypeId: "r",
             zoom: 4
           });
    
           //close the infobox when the map is panned or zoomed
           MM.Events.addHandler(map, 'viewchangestart', closeInfoBox);
         }
    
         function GetDirections() {
           map.getCredentials(MakeRouteRequest);
         }
    
         function MakeRouteRequest(credentials) {
           var routeRequest = "http://ecn.dev.virtualearth.net/REST/v1/Routes?wp.0=" + document.getElementById('txtStart').value + "&wp.1=" + document.getElementById('txtEnd').value + "&routePathOutput=Points&output=json&jsonp=RouteCallback&key=" + credentials;
           CallRestService(routeRequest);
         }
    
         function CallRestService(request) {
           var script = document.createElement("script");
           script.setAttribute("type", "text/javascript");
           script.setAttribute("src", request);
           document.body.appendChild(script);
         }
    
         function RouteCallback(result) {
    
           if (result &&
              result.resourceSets &&
              result.resourceSets.length > 0 &&
              result.resourceSets[0].resources &&
              result.resourceSets[0].resources.length > 0) {
    
             // Set the map view
             var bbox = result.resourceSets[0].resources[0].bbox;
             var viewBoundaries = MM.LocationRect.fromLocations(new MM.Location(bbox[0], bbox[1]), new MM.Location(bbox[2], bbox[3]));
             map.setView({ bounds: viewBoundaries });
    
             // Draw the route
             var routeline = result.resourceSets[0].resources[0].routePath.line;
             var routepoints = new Array();
             for (var i = 0; i < routeline.coordinates.length; i++) {
               routepoints[i] = new MM.Location(routeline.coordinates[i][0], routeline.coordinates[i][1]);
             }
    
             // Draw the route on the map
             var options = { strokeColor: new MM.Color(127, 255, 165, 0),
               strokeThickness: 5
             };
             var routeshape = new MM.Polyline(routepoints, options);
             map.entities.push(routeshape);
    
             //Draw the instructions-points
             var directions = result.resourceSets[0].resources[0].routeLegs[0].itineraryItems;
             for (var i = 0; i < directions.length; i++) {
               var location = new MM.Location(directions[i].maneuverPoint.coordinates[0], directions[i].maneuverPoint.coordinates[1]);
               var pushpin = new MM.Pushpin(location);
               var pushpinOptions = { icon: './IMG/pushpin.png',
                 anchor: new MM.Point(15, 15),
                 text: (i + 1).toString()
               };
               pushpin.setOptions(pushpinOptions);
               MM.Pushpin.prototype.title = null;
               pushpin.title = directions[i].instruction.text;
               MM.Pushpin.prototype.description = null;
               pushpin.description = "Distance: " + directions[i].travelDistance + "km<br>Time: " + directions[i].travelDuration + "s";
               pushpinClick = MM.Events.addHandler(pushpin, 'click', displayEventInfo);
    
               map.entities.push(pushpin);
             }
           }
         }
    
         function displayEventInfo(e) {
           if (e.targetType = "pushpin") {
             var pix = map.tryLocationToPixel(e.target.getLocation(), MM.PixelReference.control);
             var ibTitle = document.getElementById('ibTitle');
             ibTitle.innerHTML = e.target.title;
             var ibDescription = document.getElementById('ibDescription');
             ibDescription.innerHTML = e.target.description;
             var infobox = document.getElementById('infoBox');
             infobox.style.top = (pix.y - 40) + "px";
             infoBox.style.left = (pix.x + 20) + "px";
             infoBox.style.visibility = "visible";
             document.getElementById('myMap').appendChild(infoBox);
           }
         }
    
         function closeInfoBox() {
           var infobox = document.getElementById('infoBox');
           infoBox.style.visibility = "hidden";
         }
       </script>
      </head>
      <body onload="GetMap();">
       <div id='myMap' style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div>
       <div id='dicCtrl' style="position:absolute; top:0px; left:350px; width:100%; height:29px; background-color:White; z-index:10000; vertical-align:middle;">
         <a style="margin-left:10px">Start</a>
         <input id="txtStart" type="text" style="margin-top:4px; margin-left:5px;" />
         <a style="margin-left:10px">End</a>
         <input id="txtEnd" type="text" style="margin-top:4px; margin-left:5px" />
         <input id="Button1" type="button" value="Get Directions" onclick="GetDirections()" />
       </div>
       <div id='infoBox' style="visibility:hidden; position:absolute; top:0px; left:0px; max-width:300px; z-index:10000; font-family:Verdana; font-size:12px">
        <img src="IMG/leftbeak.png" alt="Left Beak"style="position:absolute;top:10px; left:0px;" />
         <table style="width:275px; border:medium solid Orange; position:absolute;top:0px; left:22px; background-color:White">
           <tr style="width:275px">
            <td style="width:275px"><b id='ibTitle'></b></td>
            <td align="right" valign="top"><img src="IMG/close.png" alt="close" onclick="closeInfoBox()" /></td>
           </tr>
           <tr>
            <td colspan="2"><a id='ibDescription'></a></td>
           </tr>
         </table>
       </div> 
      </body>
    </html>
    
    

    Also, see the interactive SDK (iSDK) here too, see REST Web Services: http://www.bingmapsportal.com/isdk/ajaxv7

    With this code sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
       <title>Find directions</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
       <script type="text/javascript">
       var map = null;
       var end;
       var start;
       function GetMap()
       {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
        alert('Insert key to make valid REST service call');
       }
       
       function GetDirections()
       {
        start= 'Seattle, wa'; end= 'Portland, OR'; 
        map.getCredentials(CallRouteService); 
       }
       
       function CallRouteService(credentials) 
       {
        var routeRequest = 'http://dev.virtualearth.net/REST/v1/Routes?wp.0=' + start + '&wp.1=' + end + '&routePathOutput=Points&output=json&jsonp=RouteCallback&key=' + credentials;
        var mapscript = document.createElement('script');      
        mapscript.type = 'text/javascript';      
        mapscript.src = routeRequest;
        document.getElementById('myMap').appendChild(mapscript);
       }
     
       function RouteCallback(result)
       { 
         var output = document.getElementById("output");
         if (output)
         {
           while (output.hasChildNodes()) {
             output.removeChild(output.lastChild); 
           }  
           var resultsHeader = document.createElement("h5");
           var resultsList = document.createElement("ol");
           output.appendChild(resultsHeader);
           output.appendChild(resultsList);
         }
      
         if (result && result.resourceSets && result.resourceSets.length > 0 && result.resourceSets[0].resources && result.resourceSets[0].resources.length > 0) 
         {
         resultsHeader.innerHTML = "Bing Maps REST Route API <br/> Route from " + result.resourceSets[0].resources[0].routeLegs[0].startLocation.name + " to " + result.resourceSets[0].resources[0].routeLegs[0].endLocation.name;
         var resultsListItem = null;
              
         for (var i = 0; i < result.resourceSets[0].resources[0].routeLegs[0].itineraryItems.length; ++i)
         {
           resultsListItem = document.createElement("li");
           resultsList.appendChild(resultsListItem);
           resultStr = result.resourceSets[0].resources[0].routeLegs[0].itineraryItems[i].instruction.text;
           resultsListItem.innerHTML = resultStr;
         }
         var bbox = result.resourceSets[0].resources[0].bbox; 
         var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
         map.setView({ bounds: viewBoundaries}); 
         var routeline = result.resourceSets[0].resources[0].routePath.line; var routepoints = new Array(); 
         for (var i = 0; i < routeline.coordinates.length; i++) 
         { 
           routepoints[i]=new Microsoft.Maps.Location(routeline.coordinates[i][0], routeline.coordinates[i][1]);
         } 
         var routeshape = new Microsoft.Maps.Polyline(routepoints, {strokeColor:new Microsoft.Maps.Color(200,0,0,200)}); 
    
         var startPushpinOptions = {anchor: new Microsoft.Maps.Point(10, 32) }; 
         var startPin= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(routeline.coordinates[0][0], routeline.coordinates[0][1]), startPushpinOptions); 
    
         var endPushpinOptions = {anchor: new Microsoft.Maps.Point(10, 32)}; 
         var endPin= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(routeline.coordinates[routeline.coordinates.length-1][0], routeline.coordinates[routeline.coordinates.length-1][1]), endPushpinOptions); 
         map.entities.push(startPin); 
         map.entities.push(endPin); 
         map.entities.push(routeshape); 
       }
    
       else
       {
         if (typeof(result.errorDetails) != 'undefined')
         {
           resultsHeader.innerHTML = result.errorDetails[0];
         }
           alert("No Route found");
         }
       }
       </script>
      </head>
      <body onload="GetMap();">
       <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
       <div>
         <input type="button" value="GetDirections" onclick="GetDirections();" />
       </div>
       <div id="output"></div>
       
      </body>
    </html>
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Tuesday, May 10, 2011 11:12 AM
    Moderator
  • Go to http://www.bingmapsportal.com/ISDK/AjaxV7. Click Rest Services & then Find Directions. The code along with map would be there. Click on view html button to get full js code.

     


    HemantGoyal
    Tuesday, May 10, 2011 6:36 PM

All replies

  • In order to manage the disambiguation, you will have to deal with it on your own.
    To do this you have two ways:

    • Geocode the address and check the number of result
    • Get the direction from various results and disambiguate after getting the result

    Parameters on the routing query can be addresses or location (up to 25 waypoints), see:

    Here is a sample of routing code that might help you, from Johannes :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
       <title>Bing Maps - v7.0</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <style type="text/css">
        body {
          font-family: Verdana;
          font-size: 12px;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0px;
          top: 0px;
          margin-left: -1px;
          margin-top: -1px;
        }
       </style>
       <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
       <script type="text/javascript">
         var map = null;
         var MM = Microsoft.Maps;
    
         function GetMap() {
           map = new MM.Map(document.getElementById("myMap"), {
             credentials: "YOUR BING MAPS KEY",
             center: new MM.Location(54.87350326912944, 15.333815098500053),
             mapTypeId: "r",
             zoom: 4
           });
    
           //close the infobox when the map is panned or zoomed
           MM.Events.addHandler(map, 'viewchangestart', closeInfoBox);
         }
    
         function GetDirections() {
           map.getCredentials(MakeRouteRequest);
         }
    
         function MakeRouteRequest(credentials) {
           var routeRequest = "http://ecn.dev.virtualearth.net/REST/v1/Routes?wp.0=" + document.getElementById('txtStart').value + "&wp.1=" + document.getElementById('txtEnd').value + "&routePathOutput=Points&output=json&jsonp=RouteCallback&key=" + credentials;
           CallRestService(routeRequest);
         }
    
         function CallRestService(request) {
           var script = document.createElement("script");
           script.setAttribute("type", "text/javascript");
           script.setAttribute("src", request);
           document.body.appendChild(script);
         }
    
         function RouteCallback(result) {
    
           if (result &&
              result.resourceSets &&
              result.resourceSets.length > 0 &&
              result.resourceSets[0].resources &&
              result.resourceSets[0].resources.length > 0) {
    
             // Set the map view
             var bbox = result.resourceSets[0].resources[0].bbox;
             var viewBoundaries = MM.LocationRect.fromLocations(new MM.Location(bbox[0], bbox[1]), new MM.Location(bbox[2], bbox[3]));
             map.setView({ bounds: viewBoundaries });
    
             // Draw the route
             var routeline = result.resourceSets[0].resources[0].routePath.line;
             var routepoints = new Array();
             for (var i = 0; i < routeline.coordinates.length; i++) {
               routepoints[i] = new MM.Location(routeline.coordinates[i][0], routeline.coordinates[i][1]);
             }
    
             // Draw the route on the map
             var options = { strokeColor: new MM.Color(127, 255, 165, 0),
               strokeThickness: 5
             };
             var routeshape = new MM.Polyline(routepoints, options);
             map.entities.push(routeshape);
    
             //Draw the instructions-points
             var directions = result.resourceSets[0].resources[0].routeLegs[0].itineraryItems;
             for (var i = 0; i < directions.length; i++) {
               var location = new MM.Location(directions[i].maneuverPoint.coordinates[0], directions[i].maneuverPoint.coordinates[1]);
               var pushpin = new MM.Pushpin(location);
               var pushpinOptions = { icon: './IMG/pushpin.png',
                 anchor: new MM.Point(15, 15),
                 text: (i + 1).toString()
               };
               pushpin.setOptions(pushpinOptions);
               MM.Pushpin.prototype.title = null;
               pushpin.title = directions[i].instruction.text;
               MM.Pushpin.prototype.description = null;
               pushpin.description = "Distance: " + directions[i].travelDistance + "km<br>Time: " + directions[i].travelDuration + "s";
               pushpinClick = MM.Events.addHandler(pushpin, 'click', displayEventInfo);
    
               map.entities.push(pushpin);
             }
           }
         }
    
         function displayEventInfo(e) {
           if (e.targetType = "pushpin") {
             var pix = map.tryLocationToPixel(e.target.getLocation(), MM.PixelReference.control);
             var ibTitle = document.getElementById('ibTitle');
             ibTitle.innerHTML = e.target.title;
             var ibDescription = document.getElementById('ibDescription');
             ibDescription.innerHTML = e.target.description;
             var infobox = document.getElementById('infoBox');
             infobox.style.top = (pix.y - 40) + "px";
             infoBox.style.left = (pix.x + 20) + "px";
             infoBox.style.visibility = "visible";
             document.getElementById('myMap').appendChild(infoBox);
           }
         }
    
         function closeInfoBox() {
           var infobox = document.getElementById('infoBox');
           infoBox.style.visibility = "hidden";
         }
       </script>
      </head>
      <body onload="GetMap();">
       <div id='myMap' style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div>
       <div id='dicCtrl' style="position:absolute; top:0px; left:350px; width:100%; height:29px; background-color:White; z-index:10000; vertical-align:middle;">
         <a style="margin-left:10px">Start</a>
         <input id="txtStart" type="text" style="margin-top:4px; margin-left:5px;" />
         <a style="margin-left:10px">End</a>
         <input id="txtEnd" type="text" style="margin-top:4px; margin-left:5px" />
         <input id="Button1" type="button" value="Get Directions" onclick="GetDirections()" />
       </div>
       <div id='infoBox' style="visibility:hidden; position:absolute; top:0px; left:0px; max-width:300px; z-index:10000; font-family:Verdana; font-size:12px">
        <img src="IMG/leftbeak.png" alt="Left Beak"style="position:absolute;top:10px; left:0px;" />
         <table style="width:275px; border:medium solid Orange; position:absolute;top:0px; left:22px; background-color:White">
           <tr style="width:275px">
            <td style="width:275px"><b id='ibTitle'></b></td>
            <td align="right" valign="top"><img src="IMG/close.png" alt="close" onclick="closeInfoBox()" /></td>
           </tr>
           <tr>
            <td colspan="2"><a id='ibDescription'></a></td>
           </tr>
         </table>
       </div> 
      </body>
    </html>
    
    

    Also, see the interactive SDK (iSDK) here too, see REST Web Services: http://www.bingmapsportal.com/isdk/ajaxv7

    With this code sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
       <title>Find directions</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
       <script type="text/javascript">
       var map = null;
       var end;
       var start;
       function GetMap()
       {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
        alert('Insert key to make valid REST service call');
       }
       
       function GetDirections()
       {
        start= 'Seattle, wa'; end= 'Portland, OR'; 
        map.getCredentials(CallRouteService); 
       }
       
       function CallRouteService(credentials) 
       {
        var routeRequest = 'http://dev.virtualearth.net/REST/v1/Routes?wp.0=' + start + '&wp.1=' + end + '&routePathOutput=Points&output=json&jsonp=RouteCallback&key=' + credentials;
        var mapscript = document.createElement('script');      
        mapscript.type = 'text/javascript';      
        mapscript.src = routeRequest;
        document.getElementById('myMap').appendChild(mapscript);
       }
     
       function RouteCallback(result)
       { 
         var output = document.getElementById("output");
         if (output)
         {
           while (output.hasChildNodes()) {
             output.removeChild(output.lastChild); 
           }  
           var resultsHeader = document.createElement("h5");
           var resultsList = document.createElement("ol");
           output.appendChild(resultsHeader);
           output.appendChild(resultsList);
         }
      
         if (result && result.resourceSets && result.resourceSets.length > 0 && result.resourceSets[0].resources && result.resourceSets[0].resources.length > 0) 
         {
         resultsHeader.innerHTML = "Bing Maps REST Route API <br/> Route from " + result.resourceSets[0].resources[0].routeLegs[0].startLocation.name + " to " + result.resourceSets[0].resources[0].routeLegs[0].endLocation.name;
         var resultsListItem = null;
              
         for (var i = 0; i < result.resourceSets[0].resources[0].routeLegs[0].itineraryItems.length; ++i)
         {
           resultsListItem = document.createElement("li");
           resultsList.appendChild(resultsListItem);
           resultStr = result.resourceSets[0].resources[0].routeLegs[0].itineraryItems[i].instruction.text;
           resultsListItem.innerHTML = resultStr;
         }
         var bbox = result.resourceSets[0].resources[0].bbox; 
         var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
         map.setView({ bounds: viewBoundaries}); 
         var routeline = result.resourceSets[0].resources[0].routePath.line; var routepoints = new Array(); 
         for (var i = 0; i < routeline.coordinates.length; i++) 
         { 
           routepoints[i]=new Microsoft.Maps.Location(routeline.coordinates[i][0], routeline.coordinates[i][1]);
         } 
         var routeshape = new Microsoft.Maps.Polyline(routepoints, {strokeColor:new Microsoft.Maps.Color(200,0,0,200)}); 
    
         var startPushpinOptions = {anchor: new Microsoft.Maps.Point(10, 32) }; 
         var startPin= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(routeline.coordinates[0][0], routeline.coordinates[0][1]), startPushpinOptions); 
    
         var endPushpinOptions = {anchor: new Microsoft.Maps.Point(10, 32)}; 
         var endPin= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(routeline.coordinates[routeline.coordinates.length-1][0], routeline.coordinates[routeline.coordinates.length-1][1]), endPushpinOptions); 
         map.entities.push(startPin); 
         map.entities.push(endPin); 
         map.entities.push(routeshape); 
       }
    
       else
       {
         if (typeof(result.errorDetails) != 'undefined')
         {
           resultsHeader.innerHTML = result.errorDetails[0];
         }
           alert("No Route found");
         }
       }
       </script>
      </head>
      <body onload="GetMap();">
       <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
       <div>
         <input type="button" value="GetDirections" onclick="GetDirections();" />
       </div>
       <div id="output"></div>
       
      </body>
    </html>
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Tuesday, May 10, 2011 11:12 AM
    Moderator
  • Go to http://www.bingmapsportal.com/ISDK/AjaxV7. Click Rest Services & then Find Directions. The code along with map would be there. Click on view html button to get full js code.

     


    HemantGoyal
    Tuesday, May 10, 2011 6:36 PM