Need Help Adding BING Driving Directions to my Website.

Sunday, November 08, 2009 12:48 AMQuakingBog

0
Sign In to Vote
Hello,

I have a simple form on our website now which automatically generates directions to/from our nature center using Yahoo Maps. Please view the form on this page here:
http://www.naturecenter.com/ga/directions
I've found that Bing directions are MUCH more reliable to our center, so I'd like to use this same type of form to generate Bing directions. User just puts in their starting address, and my form automatically links over to the Bing page with the appropriate data, similar to how I do it now it with Yahoo.

Only problem is the Bing page is not quite so easy to figure out, and all of the developer pages are quite complicated and way over my level of expertise.

Is there an "EASY" way to just make a simple web form to do this, similar to how I am already doing this with Yahoo?

If so, please explain. THANKS!

- Jeff
- Reply
- Quote

Answers

Sunday, November 08, 2009 11:46 AM

Richard_BrundrittMVP, Moderator

There is a good example here: http://msdn.microsoft.com/en-us/library/bb877838.aspx

Here is an example that is closer to what you want:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>

      <script>
         var map = null;
		 var homeAddress = "Directions to 3001 Salem Rd, Watkinsville, GA 30677-3862 ";

         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();
         }

		function GetRouteTo()
		{
			var inputAddress = document.getElementById('inputAddress').value;
			
			if(inputAddress && inputAddress != "")
			{
				GetRouteMap(new Array(inputAddress,homeAddress));
			}
		}
		
		function GetRouteFrom()
		{
			var inputAddress = document.getElementById('inputAddress').value;
			
			if(inputAddress && inputAddress != "")
			{
				GetRouteMap(new Array(homeAddress,inputAddress));
			}
		}
		
         function GetRouteMap(locations)
         {
            var options = new VERouteOptions;

            // Otherwise what's the point?
            options.DrawRoute      = true;

            // So the map repositions:
            options.SetBestMapView = true;

            // Call this function when map route is determined:
            options.RouteCallback  = ShowTurns;

            // Show as miles
            options.DistanceUnit   = VERouteDistanceUnit.Mile;

            // Show the disambiguation dialog if unable to locate a location
            options.ShowDisambiguation = true;

            map.GetDirections(locations, options);
         }

         function ShowTurns(route)
         {
            if (route)
            {
               // Unroll route and populate DIV
               var legs          = route.RouteLegs;
               var turns         = "<h3>Turn-by-Turn Directions</h3><p>";
               var leg           = null;
               var turnNum       = 0;  // The turn #
               var totalDistance = 0;  // The sum of all leg distances

               // Get intermediate legs
               for(var i = 0; i < legs.length; i++)
               {
                  // Get this leg so we don't have to derefernce multiple times
                  leg = legs[i];  // Leg is a VERouteLeg object
                  
                  // Unroll each intermediate leg
                  var turn        = null;  // The itinerary leg
                  var legDistance = null;  // The distance for this leg
                  
                  for(var j = 0; j < leg.Itinerary.Items.length; j ++)
                  {
                     turnNum++;
                     
                     turn = leg.Itinerary.Items[j];  // turn is a VERouteItineraryItem object
                     
                     turns += "<b>" + turnNum + "</b>\t" + turn.Text;

                     legDistance    = turn.Distance;
                     totalDistance += legDistance;

                     // Round distances to 1/10ths
                     turns += " (" + legDistance.toFixed(1) + " miles)<br/>";
                  }
               }

               turns += "<b>Total distance: </b>" + totalDistance.toFixed(1) + " miles</p>";

               // Populate DIV with directions
               document.getElementById("directions").innerHTML = turns;
            }
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div><br/>
	  <input id="inputAddress" type="text" value=""/><br/>
      <input type="button" value="Get Directions To" onclick="GetRouteTo();"/>
	  <input type="button" value="Get Directions From" onclick="GetRouteFrom();"/>
      <div id='directions'></div>
   </body>
</html>

Windows Live Developer MVP - http://rbrundritt.spaces.live.com

Marked As Answer byRichard_BrundrittMVP, ModeratorFriday, November 20, 2009 5:18 AM

All Replies

Sunday, November 08, 2009 11:46 AM

Richard_BrundrittMVP, Moderator

There is a good example here: http://msdn.microsoft.com/en-us/library/bb877838.aspx

Here is an example that is closer to what you want:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>

      <script>
         var map = null;
		 var homeAddress = "Directions to 3001 Salem Rd, Watkinsville, GA 30677-3862 ";

         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();
         }

		function GetRouteTo()
		{
			var inputAddress = document.getElementById('inputAddress').value;
			
			if(inputAddress && inputAddress != "")
			{
				GetRouteMap(new Array(inputAddress,homeAddress));
			}
		}
		
		function GetRouteFrom()
		{
			var inputAddress = document.getElementById('inputAddress').value;
			
			if(inputAddress && inputAddress != "")
			{
				GetRouteMap(new Array(homeAddress,inputAddress));
			}
		}
		
         function GetRouteMap(locations)
         {
            var options = new VERouteOptions;

            // Otherwise what's the point?
            options.DrawRoute      = true;

            // So the map repositions:
            options.SetBestMapView = true;

            // Call this function when map route is determined:
            options.RouteCallback  = ShowTurns;

            // Show as miles
            options.DistanceUnit   = VERouteDistanceUnit.Mile;

            // Show the disambiguation dialog if unable to locate a location
            options.ShowDisambiguation = true;

            map.GetDirections(locations, options);
         }

         function ShowTurns(route)
         {
            if (route)
            {
               // Unroll route and populate DIV
               var legs          = route.RouteLegs;
               var turns         = "<h3>Turn-by-Turn Directions</h3><p>";
               var leg           = null;
               var turnNum       = 0;  // The turn #
               var totalDistance = 0;  // The sum of all leg distances

               // Get intermediate legs
               for(var i = 0; i < legs.length; i++)
               {
                  // Get this leg so we don't have to derefernce multiple times
                  leg = legs[i];  // Leg is a VERouteLeg object
                  
                  // Unroll each intermediate leg
                  var turn        = null;  // The itinerary leg
                  var legDistance = null;  // The distance for this leg
                  
                  for(var j = 0; j < leg.Itinerary.Items.length; j ++)
                  {
                     turnNum++;
                     
                     turn = leg.Itinerary.Items[j];  // turn is a VERouteItineraryItem object
                     
                     turns += "<b>" + turnNum + "</b>\t" + turn.Text;

                     legDistance    = turn.Distance;
                     totalDistance += legDistance;

                     // Round distances to 1/10ths
                     turns += " (" + legDistance.toFixed(1) + " miles)<br/>";
                  }
               }

               turns += "<b>Total distance: </b>" + totalDistance.toFixed(1) + " miles</p>";

               // Populate DIV with directions
               document.getElementById("directions").innerHTML = turns;
            }
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div><br/>
	  <input id="inputAddress" type="text" value=""/><br/>
      <input type="button" value="Get Directions To" onclick="GetRouteTo();"/>
	  <input type="button" value="Get Directions From" onclick="GetRouteFrom();"/>
      <div id='directions'></div>
   </body>
</html>

Windows Live Developer MVP - http://rbrundritt.spaces.live.com

Marked As Answer byRichard_BrundrittMVP, ModeratorFriday, November 20, 2009 5:18 AM

Sunday, November 08, 2009 2:56 PM

QuakingBog

Thanks for the suggestions.  Last night I found a microsoft page with the information I needed,

so I have now implemented this on our web page in case anyone wants to see how to do this:

http://www.naturecenter.com/ga/directions

FYI... The Microsoft page with the information is here:

http://help.live.com/Help.aspx?market=en-US&project=WL_Local&querytype=topic&query=WL_LOCAL_PROC_BuildURL.htm

I still have another question, though.  Does anyone know how to get this form to submit directly to the PRINT version

of the directions page, rather than the map page where someone needs to still hit print before printing it out.

Thanks!

- Jeff