none
help with using bing maps within a website RRS feed

  • Question

  • hello,

    i am an incredibly amateurish designer working for a non-profit company. (meaning i'm the one with the highest/most computer and technology know-how there... which isn't saying much).

    I am looking to create a bing map basically exactly like this one : http://www.campbird.org/registration/directions.html

    except i need it to be correct (google apparently can't do that for me... despite my efforts to correct it). I have noticed that bing maps are, well, better... but i am having a heck of a time getting to know how bing maps works. I have essentially no knowledge of java or ajax. (google had a site that allowed me to make a map with all of the controls i wanted and i then basically just copied things over into my website...

    essentially i need a directions map where, when i load the page it gives default directions from green bay, WI to the static address N8395 Caldron Falls Road, Crivitz, WI 54114, with the text direction above the map (as in the site above). This can then be changed via textbox input to whatever the user enters for the starting address... (if someone wants to find me a way of getting reverse directions without changing the basic layout of the page i'd also appreciate that as well... though that isn't nearly as important).

    any and all help is greatly appreciated as i have been banging my head against this wall for a while now... If someone wants to take me under their veritable wing and teach me how this works, that would also be greatly appreciated but that might be more work than bargained for... i might also be able to work with a site that gives me non-developer oriented directions, but i am having trouble finding such a site...

    The purpose of the particular page is to give people accurate directions to the Camp Bird State Youth Recreational Facility, which is a county run camp that our organization rents for 3 weeks out of the summer for a summer youth camp.

    Thanks again!

    Tom


    • Edited by dooganking Wednesday, June 13, 2012 8:43 AM
    Wednesday, June 13, 2012 8:41 AM

Answers

  • The first thing you will want to do if you haven't already is create a Bing Maps developer account and generate a Bing Maps key. Documentation on how to do this can be found here:

    http://msdn.microsoft.com/en-us/library/gg650598.aspx

    http://msdn.microsoft.com/en-us/library/ff428642.aspx

    Next you will likely want to use the Bing Maps V7 AJAX control as it's the newest and most up to date API. In this API is a Directions module which makes it easy to generate the directions you are looking for. Here is a code sample, just add your Bing Maps key:

    <!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 type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
          <script type="text/javascript">
             var map = null, directionsManager = null;
    		 var bingMapsKey = "YOUR_BING_MAPS_KEY";
    		 var start = "Green Bay, WI";
    		 var end = "N8395 Caldron Falls Road, Crivitz, WI 54114";
    
             function GetMap()
             {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:bingMapsKey});
                Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: function(){
    				getDirections(start, end);
    			}});
             }
    
             function getDirections(s, e)
             {
                // Initialize the DirectionsManager
    			if(!directionsManager){
    				directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
    			}
    			
    			directionsManager.clearDisplay();
    			
                // Create start and end waypoints
                directionsManager.addWaypoint(new Microsoft.Maps.Directions.Waypoint({address:s}));
                directionsManager.addWaypoint(new Microsoft.Maps.Directions.Waypoint({address:e}));
    
                // Set the id of the div to use to display the directions
                directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv') });
    
                // Specify a handler for when an error occurs
                Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', displayError);
    
                // Calculate directions, which displays a route on the map
                directionsManager.calculateDirections();
    			
    			document.getElementById('directionsTitle').innerHTML = "Directions from <b>" + s + "</b> to <b>" + e + "</b>";
             } 
    
             function displayError(e)
             {
                alert(e.message);
             }
    		 
    		 function updateDirections(){
    			start = document.getElementById('inputLocation').value;
    			getDirections(start, end);
    		 }
    		 
    		 function reverseDirections(){
    			var t = start;
    			start = end;
    			end = t;
    			getDirections(start, end);
    		 }
          </script>
       </head>
       <body onload="GetMap();">
    		<div style='width:500px;'>
    			<div>
    				From: <input type='text' id='inputLocation'>
    				<input type='button' value='Get Directions' onclick='updateDirections()'/>
    				<input type='button' value='Get Reverse' onclick='reverseDirections()'/>
    			</div>
    			<div id="directionsTitle"></div>
    			<div id='itineraryDiv' style="position:relative; width:500px;"></div>
    			<div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>       
    		</div>
       </body>
    </html>


    http://rbrundritt.wordpress.com

    Wednesday, June 13, 2012 9:46 AM

All replies

  • The first thing you will want to do if you haven't already is create a Bing Maps developer account and generate a Bing Maps key. Documentation on how to do this can be found here:

    http://msdn.microsoft.com/en-us/library/gg650598.aspx

    http://msdn.microsoft.com/en-us/library/ff428642.aspx

    Next you will likely want to use the Bing Maps V7 AJAX control as it's the newest and most up to date API. In this API is a Directions module which makes it easy to generate the directions you are looking for. Here is a code sample, just add your Bing Maps key:

    <!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 type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
          <script type="text/javascript">
             var map = null, directionsManager = null;
    		 var bingMapsKey = "YOUR_BING_MAPS_KEY";
    		 var start = "Green Bay, WI";
    		 var end = "N8395 Caldron Falls Road, Crivitz, WI 54114";
    
             function GetMap()
             {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:bingMapsKey});
                Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: function(){
    				getDirections(start, end);
    			}});
             }
    
             function getDirections(s, e)
             {
                // Initialize the DirectionsManager
    			if(!directionsManager){
    				directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
    			}
    			
    			directionsManager.clearDisplay();
    			
                // Create start and end waypoints
                directionsManager.addWaypoint(new Microsoft.Maps.Directions.Waypoint({address:s}));
                directionsManager.addWaypoint(new Microsoft.Maps.Directions.Waypoint({address:e}));
    
                // Set the id of the div to use to display the directions
                directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv') });
    
                // Specify a handler for when an error occurs
                Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', displayError);
    
                // Calculate directions, which displays a route on the map
                directionsManager.calculateDirections();
    			
    			document.getElementById('directionsTitle').innerHTML = "Directions from <b>" + s + "</b> to <b>" + e + "</b>";
             } 
    
             function displayError(e)
             {
                alert(e.message);
             }
    		 
    		 function updateDirections(){
    			start = document.getElementById('inputLocation').value;
    			getDirections(start, end);
    		 }
    		 
    		 function reverseDirections(){
    			var t = start;
    			start = end;
    			end = t;
    			getDirections(start, end);
    		 }
          </script>
       </head>
       <body onload="GetMap();">
    		<div style='width:500px;'>
    			<div>
    				From: <input type='text' id='inputLocation'>
    				<input type='button' value='Get Directions' onclick='updateDirections()'/>
    				<input type='button' value='Get Reverse' onclick='reverseDirections()'/>
    			</div>
    			<div id="directionsTitle"></div>
    			<div id='itineraryDiv' style="position:relative; width:500px;"></div>
    			<div id='mapDiv' style="position:relative; width:500px; height:500px;"></div>       
    		</div>
       </body>
    </html>


    http://rbrundritt.wordpress.com

    Wednesday, June 13, 2012 9:46 AM
  • I want to thank you for the quick reply and the help. It is greatly appreciated. I would have tested this sooner, but have been busy (this is volunteer work after all and i do have a real(ish) job...)

    I wanted to update this just so i was certain i was doing this right. I noticed with the code that you gave me the map was adding waypoints when i supplied my own address in the textbox (as in giving me directions from green bay to camp bird to the address entered and then back to camp again). I added a resetDirections immediately following the clearDisplay and the page worked perfectly in my tests.

    I would also like to add (for anyone else that happens upon this) that pretty much everything i needed was in the directionsManager Class page located here: http://msdn.microsoft.com/en-us/library/hh312802 i didn't know it at the time i started using bing Maps since I only barely know programming languages. (although i also can't find anywhere on the internet that all i need for a driving directions map is mostly the methods in the directionsManager class, despite the obvious implication of the name of the class...)

    I had it figured out for google maps enough where i could do what i wanted, if i had enough time to fiddle with it. I would like to thank you again for all of the help and time you saved me!

    update: i did have a question, though. I saw that you made a reverse directions function. would it be easier or would it negatively affect the map to just call the getDirections(end, start) instead of swapping out all of the variables?

    Thanks,

    Tom


    • Edited by dooganking Tuesday, June 19, 2012 8:11 AM added question
    Tuesday, June 19, 2012 8:00 AM
  • You could use getDirections(end, start) instead of swapping out all of the variables but I wrote the simple function so it would be easier to understand what is going on.

    http://rbrundritt.wordpress.com

    Tuesday, June 19, 2012 10:40 AM