locked
Bing Map AJAX 7 - For directionsManager.CalculateDirections method, on step hover(from route details) pushpin icon is not showing for the second simultaneous call RRS feed

  • Question

  • Hi,

    I am using directionsManager.CalculateDirections method of BingMap AJAX 7. When I call that method first time with some source and destination it shows the route on the map and also whenever we do mouse over on any step details(from route details) it shows related location on route on the map with small pushpin type icon. (See below image for reference).

    But when I change some address (e.g. destinaton address) then I directly call directionsManager.resetDirections({ removeAllWaypoints: true }); followed by directionsManager.addWaypoint(TempWaypoint); for two addresses. Finally I call  directionsManager.calculateDirections(); to get route. but this time when I do mouse over on any step details it doesn't show any small pushpin type icon on the related location on that route. Note: In this case I don't create new object of directionsManager class. I use the existing directionsManager object and also I don't load module Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: directionsModuleLoaded });


    Thursday, August 7, 2014 9:55 AM

Answers

  • Make sure you set the itineraryContainer in the render options again as the resetDirections function sets the render options back to the default values.

    Using the following code I wasn't able to reproduce your issue:

    <!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, directionsManager;
    
             function GetMap()
             {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"YOUR_BING_MAPS_KEY"});
                Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: directionsModuleLoaded });
             }
    
             function directionsModuleLoaded()
             {
                // Initialize the DirectionsManager
                directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
    
                // Create start and end waypoints
                var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle, WA"});
                var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Portland, OR"});
    
                directionsManager.addWaypoint(startWaypoint);
                directionsManager.addWaypoint(endWaypoint);
    
                // 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();
             } 
    
             function displayError(e)
             {
                alert(e.message);
             }
    
    		 function ChangeWaypoint(){
    			directionsManager.resetDirections();
    			
    			var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle, WA"});
                var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Ney Yrok, NY"});
    
                directionsManager.addWaypoint(startWaypoint);
                directionsManager.addWaypoint(endWaypoint);
    			
    			directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv') });
    			
    			directionsManager.calculateDirections();
    		 }
          </script>
       </head>
       <body onload="GetMap();">
          <div id='mapDiv' style="; width:400px; height:400px;float:left;"></div>
    	  <input type="button" onclick="ChangeWaypoint();" value="Change Destination Waypoint"/>
          <div id='itineraryDiv' style="; width:400px; float:left;"></div>
       </body>
    </html>
    


    http://rbrundritt.wordpress.com

    Thursday, August 7, 2014 2:38 PM
  • I've been able to reproduce your issue. To work around this you need to dispose the directions manager and create a new one. This is fairly easy to do. Here is a cleaned up version of your code that simplifies things.

    <!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, directionsManager;
    
            function GetMap() 
            {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
    			{ 
    				credentials: "",
    				mapTypeId: Microsoft.Maps.MapTypeId.road, showDashboard: true, showMapTypeSelector: true,
    				disableMouseInput: false, enableSearchLogo: false, enableClickableLogo: false
    			});
    
                //Lebanon,  Kansas is USA's geographic center (LAT. 39°50' LONG. -98°35') (ref: wikipedia)
                var center = new Microsoft.Maps.Location(39.83333, -98.58333);
                map.setView({center:center, zoom:4}); //default zoom level 4 (whole USA)
            }
    
            function GetRoute() 
            {
    			if (directionsManager == null) 
    			{
    				Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: function(){
    					getDirections("Seattle, WA", "Portland, OR")
    				}});
    			}
    			else 
    			{
    				getDirections("Seattle, WA", "Portland, OR");
    			}
            }
    
            function getDirections(start, end) 
            {
    			if(directionsManager){
    				directionsManager.dispose();
    			}
    		
                // Initialize the DirectionsManager
                directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
    
                // Create start and end waypoints
                var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: start });
                var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: end });
    
                directionsManager.addWaypoint(startWaypoint);
                directionsManager.addWaypoint(endWaypoint);
    
                // Set the id of the div to use to display the directions
                directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv'),
                    disambiguationPushpinOptions: { visible: false }, waypointPushpinOptions: { draggable: false },
                    viapointPushpinsOptions: { draggable: true }
                });
    
                // 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();
            }
    
            function displayError(e) 
            {
                alert(e.message);
            }
        </script>
    </head>
    <body onload="GetMap();">
        <div style="float: left; width: 820px; height: auto;">
            <div id="itineraryDiv" style="float: left; width: 322px; height: 575px; overflow: auto; overflow-x: hidden;"></div>
            <input type="button" onclick="GetRoute();" value="Get Route" />
            <input type="button" onclick="getDirections('Seattle, WA','New york, NY');" value="Change Route" />
            <div id="mapDiv" style="float: left; width: 497px; height: 575px;;"></div>
        <div>
    </body>
    </html>


    http://rbrundritt.wordpress.com

    Friday, August 8, 2014 10:50 AM
  • If we use the same directions manager we get the issue you saw. Disposing it and recreating it is a very minor action and uses little resources and doesn't require downloading anything extra. There really is no issue with creating a new instance of the directions manager.

    http://rbrundritt.wordpress.com

    Friday, August 8, 2014 12:50 PM

All replies

  • Does anyone have any answer?
    Thursday, August 7, 2014 1:58 PM
  • Make sure you set the itineraryContainer in the render options again as the resetDirections function sets the render options back to the default values.

    Using the following code I wasn't able to reproduce your issue:

    <!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, directionsManager;
    
             function GetMap()
             {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"YOUR_BING_MAPS_KEY"});
                Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: directionsModuleLoaded });
             }
    
             function directionsModuleLoaded()
             {
                // Initialize the DirectionsManager
                directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
    
                // Create start and end waypoints
                var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle, WA"});
                var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Portland, OR"});
    
                directionsManager.addWaypoint(startWaypoint);
                directionsManager.addWaypoint(endWaypoint);
    
                // 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();
             } 
    
             function displayError(e)
             {
                alert(e.message);
             }
    
    		 function ChangeWaypoint(){
    			directionsManager.resetDirections();
    			
    			var startWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Seattle, WA"});
                var endWaypoint = new Microsoft.Maps.Directions.Waypoint({address:"Ney Yrok, NY"});
    
                directionsManager.addWaypoint(startWaypoint);
                directionsManager.addWaypoint(endWaypoint);
    			
    			directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv') });
    			
    			directionsManager.calculateDirections();
    		 }
          </script>
       </head>
       <body onload="GetMap();">
          <div id='mapDiv' style="; width:400px; height:400px;float:left;"></div>
    	  <input type="button" onclick="ChangeWaypoint();" value="Change Destination Waypoint"/>
          <div id='itineraryDiv' style="; width:400px; float:left;"></div>
       </body>
    </html>
    


    http://rbrundritt.wordpress.com

    Thursday, August 7, 2014 2:38 PM
  • Yes, I am setting itineraryContainer in render option after resetDirections has been called. Still it didn't work.

    Please check my below code:

    <!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, directionsManager;
    
            function GetMap() 
            {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
    { credentials: "",
        mapTypeId: Microsoft.Maps.MapTypeId.road, showDashboard: true, showMapTypeSelector: true,
        disableMouseInput: false, enableSearchLogo: false, enableClickableLogo: false
    });
    
                //Lebanon,  Kansas is USA's geographic center (LAT. 39°50' LONG. -98°35') (ref: wikipedia)
                var center = new Microsoft.Maps.Location(39.833333333333336, -98.58333333333333);
                setMapCenterAndZoom(center, 4); //default zoom level 4 (whole USA)
            }
    
            //Set map center and zoom
            function setMapCenterAndZoom(center, zoom) 
            {
                var mapOptions = map.getOptions();
                mapOptions.zoom = zoom;
                mapOptions.center = center;
                map.setView(mapOptions);
            }
    
            function GetRoute() 
            {
                setTimeout(function () 
                {
                    map.entities.clear();
                    if (directionsManager == null) 
                    {
                        Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: directionsModuleLoaded });
                    }
                    else 
                    {
                        ChangeWaypoint();
                    }
                }, 200);
            }
    
            function directionsModuleLoaded() 
            {
                // Initialize the DirectionsManager
                directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
    
                // Create start and end waypoints
                var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: "Seattle, WA" });
                var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: "Portland, OR" });
    
                directionsManager.addWaypoint(startWaypoint);
                directionsManager.addWaypoint(endWaypoint);
    
                // Set the id of the div to use to display the directions
                directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv'),
                    disambiguationPushpinOptions: { visible: false }, waypointPushpinOptions: { draggable: false },
                    viapointPushpinsOptions: { draggable: true }
                });
    
                // 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();
            }
    
            function displayError(e) 
            {
                alert(e.message);
            }
    
            function ChangeWaypoint() {
                directionsManager.resetDirections();
    
                var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: "Seattle, WA" });
                var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: "Ney Yrok, NY" });
    
                directionsManager.addWaypoint(startWaypoint);
                directionsManager.addWaypoint(endWaypoint);
    
                directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv'),
                    disambiguationPushpinOptions: { visible: false }, waypointPushpinOptions: { draggable: false },
                    viapointPushpinsOptions: { draggable: true }
                });
    
                directionsManager.calculateDirections();
            }
        </script>
    </head>
    <body onload="GetMap();">
        <div style="float: left; width: 820px; height: auto;">
            <div id="itineraryDiv" style="float: left; width: 322px; height: 575px; overflow: auto; overflow-x: hidden;">
            </div>
            <input type="button" onclick="GetRoute();" value="Get Route" />
            <input type="button" onclick="GetRoute();" value="Change Route" />
            <div id="mapDiv" style="float: left; width: 497px; height: 575px; ;">
            </div>
        <div>
    </body>
    </html>


    Thursday, August 7, 2014 4:37 PM
  • Any answer?
    Friday, August 8, 2014 6:10 AM
  • I've been able to reproduce your issue. To work around this you need to dispose the directions manager and create a new one. This is fairly easy to do. Here is a cleaned up version of your code that simplifies things.

    <!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, directionsManager;
    
            function GetMap() 
            {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
    			{ 
    				credentials: "",
    				mapTypeId: Microsoft.Maps.MapTypeId.road, showDashboard: true, showMapTypeSelector: true,
    				disableMouseInput: false, enableSearchLogo: false, enableClickableLogo: false
    			});
    
                //Lebanon,  Kansas is USA's geographic center (LAT. 39°50' LONG. -98°35') (ref: wikipedia)
                var center = new Microsoft.Maps.Location(39.83333, -98.58333);
                map.setView({center:center, zoom:4}); //default zoom level 4 (whole USA)
            }
    
            function GetRoute() 
            {
    			if (directionsManager == null) 
    			{
    				Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: function(){
    					getDirections("Seattle, WA", "Portland, OR")
    				}});
    			}
    			else 
    			{
    				getDirections("Seattle, WA", "Portland, OR");
    			}
            }
    
            function getDirections(start, end) 
            {
    			if(directionsManager){
    				directionsManager.dispose();
    			}
    		
                // Initialize the DirectionsManager
                directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
    
                // Create start and end waypoints
                var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: start });
                var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: end });
    
                directionsManager.addWaypoint(startWaypoint);
                directionsManager.addWaypoint(endWaypoint);
    
                // Set the id of the div to use to display the directions
                directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv'),
                    disambiguationPushpinOptions: { visible: false }, waypointPushpinOptions: { draggable: false },
                    viapointPushpinsOptions: { draggable: true }
                });
    
                // 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();
            }
    
            function displayError(e) 
            {
                alert(e.message);
            }
        </script>
    </head>
    <body onload="GetMap();">
        <div style="float: left; width: 820px; height: auto;">
            <div id="itineraryDiv" style="float: left; width: 322px; height: 575px; overflow: auto; overflow-x: hidden;"></div>
            <input type="button" onclick="GetRoute();" value="Get Route" />
            <input type="button" onclick="getDirections('Seattle, WA','New york, NY');" value="Change Route" />
            <div id="mapDiv" style="float: left; width: 497px; height: 575px;;"></div>
        <div>
    </body>
    </html>


    http://rbrundritt.wordpress.com

    Friday, August 8, 2014 10:50 AM
  • Okay. Thanks!

    But can't we use the same old directionsManager object. because in above case we will have to create directionsManager object for every possible scenario e.g. when user changes address in textbox, when user remove one intermediate address(i.e. textbox), when user adds new address in new textbox etc.

    Friday, August 8, 2014 11:17 AM
  • If we use the same directions manager we get the issue you saw. Disposing it and recreating it is a very minor action and uses little resources and doesn't require downloading anything extra. There really is no issue with creating a new instance of the directions manager.

    http://rbrundritt.wordpress.com

    Friday, August 8, 2014 12:50 PM
  • Okay. Thanks!
    Friday, August 8, 2014 3:59 PM