Bing REST service directions map onload question RRS feed

  • Question

  • So I decided to use the REST services in the AJAX Control 7.0 ISDK service just to create a simple directional map as a jumping off point. I now want to manipulate the code to better reach my personal needs.

    One question I have regarding the code provided below is that it first loads just a blank map and requires me to press a button in order to get the directions and route on the map. However, I was hoping to make the map to where I don’t have to press a button for the route to show. I want it to just load automatically. I tried changing the “<body onload=”getMap();”> to <body onload="getDirection()"> and I just deleted the “type=\"button\" value=\"GetDirections\" onclick=\"getDirections();\" />” in order to get rid of the button. It did get rid of the button, however, the onload still just loaded the map without the routed directions.

    Any suggestions?   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
          <title>Find directions</title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
          <script type="text/javascript" src=""></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';
          function callRouteService(credentials)
            var routeRequest = '' + start + '&wp.1=' + end + '&routePathOutput=Points&output=json&jsonp=routeCallback&key=' + credentials;
            var mapscript = document.createElement('script');          
            mapscript.type = 'text/javascript';          
            mapscript.src = routeRequest;

          function routeCallback(result)
              var output = document.getElementById("output");
              if (output)
                  while (output.hasChildNodes()) {
                  var resultsHeader = document.createElement("h5");
                  var resultsList = document.createElement("ol");
              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] + " to " + result.resourceSets[0].resources[0].routeLegs[0];
              var resultsListItem = null;
              for (var i = 0; i < result.resourceSets[0].resources[0].routeLegs[0].itineraryItems.length; ++i)
                  resultsListItem = document.createElement("li");
                  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);

              if (typeof(result.errorDetails) != 'undefined')
                  resultsHeader.innerHTML = result.errorDetails[0];
                  alert("No Route found");
       <body onload="getMap();">
          <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
             <input type="button" value="GetDirections" onclick="getDirections();" />
          <div id="output"></div>

    Wednesday, August 1, 2012 3:57 PM


  • Call the getDirections method after loading the map in the getMap method.

    • Proposed as answer by Ricky_Brundritt Wednesday, August 1, 2012 4:05 PM
    • Marked as answer by shaaaawn Wednesday, August 1, 2012 6:29 PM
    Wednesday, August 1, 2012 4:05 PM