Bing Maps API: The function directionsManager.getAllWaypoints() does not provide latitude and longitude information

Question

Bing Maps API: The function directionsManager.getAllWaypoints() does not provide latitude and longitude information

I am currently utilizing the Bing map AJAX control in my code, which looks something like this -

function getMap()
      {
 map = new Microsoft.Maps.Map(document.getElementById('mnMap'), {
 credentials: 'MyKey', 
 mapTypeId: Microsoft.Maps.MapTypeId.road
          });
          map.setView({
 zoom: 4, 
 center: new Microsoft.Maps.Location(defaultLat, defaultLan)
          });
          Microsoft.Maps.loadModule('Microsoft.Maps.Directions', {
callback: createDirectionsManager
          });

      }

      function createDirectionsManager()
      {
          if (!directionsManager) 
          {
              directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
          }
          directionsManager.resetDirections();
          directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsPanel') });
          directionsErrorEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', displayRouteError );
          directionsUpdatedEventObj = Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', displayUpdatedRoute );
      }

      function displayUpdatedRoute(status){
// Update waypoint text inputs based on dragged markers
          var legs = directionsManager.getAllWaypoints();
// Perform some validation
      }

 function displayRouteError(error){

         // If the error is a viapoint error, display an error
         if (error.responseCode == Microsoft.Maps.Directions.RouteResponseCode.noSolution){
 directionsManager.resetDirections();
         }else if (error.responseCode == Microsoft.Maps.Directions.RouteResponseCode.dataSourceNotFound || error.responseCode == Microsoft.Maps.Directions.RouteResponseCode.tooFar){
directionsManager.resetDirections();
         }else{
directionsManager.resetDirections();
         }
      }
function getDirections(submit, send) {

directionsManager.resetDirections();
if (some test condition) {
          start = new Microsoft.Maps.Directions.Waypoint({ location: new Microsoft.Maps.Location(locInputs.first().attr("data-lat"), locInputs.first().attr("data-lng")) });
        } else {
          start = new Microsoft.Maps.Directions.Waypoint({ address: locInputs.first().val() });
        }
directionsManager.addWaypoint(start); 
directionsManager.addWaypoint(waypoint);
directionsManager.addWaypoint(end);

directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsPanel') });
        directionsManager.calculateDirections();
}
function saveTrip(){

 var legs = directionsManager.getAllWaypoints();

 // Perform some validations
 // Ajax call to backend
}

$("#saveTripBtn").click(function() {
getDirections();
                saveTrip();

        }

Upon initialization of getMap(), I observe that the directions are correctly displayed. However, when I retrieve the waypoints using directionsManager.getAllWaypoints(), none of them contain a location object, resulting in a lack of latitude/longitude information. In the savetrip() method, I require the lat/long of each waypoint before calling the backend code, but unfortunately it is not present.

Currently, I am using a Developer key. Please let me know if any additional information is required.

Thank you in advance

Roshan

javascript bing-maps driving-directions

Answer 1

Answer №1

Utilize the getLocation method within the Waypoint object to retrieve its location coordinates: http://msdn.microsoft.com/en-us/library/hh312838.aspx

Check out this functioning code example:

<!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() { 
           map = new Microsoft.Maps.Map(document.getElementById('myMap'), { 
               credentials: 'YOUR_BING_MAPS_KEY'
           }); 

           Microsoft.Maps.loadModule('Microsoft.Maps.Directions', {
            callback: getDirections
           });
       }

       function getDirections() {
            if (!directionsManager) 
            {
               directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
            }

            directionsManager.resetDirections();

            var start = new Microsoft.Maps.Directions.Waypoint({ address: "Seattle, WA" });
            var end = new Microsoft.Maps.Directions.Waypoint({ address: "Portland, OR" });

            directionsManager.addWaypoint(start); 
            directionsManager.addWaypoint(end);
            directionsManager.calculateDirections(); 
        }

        function getWaypoints(){
            var wp = directionsManager.getAllWaypoints();

            var text = '';

            for(var i=0;i<wp.length;i++){
                var loc = wp[i].getLocation();
                text += 'waypoint ' + i + ': ' + loc.latitude + ', ' + loc.longitude + '\r\n';
            }

            document.getElementById('output').innerText = text;
        }
      </script>
   </head>
   <body onload="GetMap();">
    <div id='myMap' style=";width:600px;height:400px;"></div><br/>
    <input type="button" onclick="getWaypoints()" value="Get Waypoints" /><br/>
    <div id="output"></div>
   </body>
</html>

Answer 2

Utilize the getLocation method within the Waypoint object to retrieve its location coordinates: http://msdn.microsoft.com/en-us/library/hh312838.aspx

Check out this functioning code example:

<!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() { 
           map = new Microsoft.Maps.Map(document.getElementById('myMap'), { 
               credentials: 'YOUR_BING_MAPS_KEY'
           }); 

           Microsoft.Maps.loadModule('Microsoft.Maps.Directions', {
            callback: getDirections
           });
       }

       function getDirections() {
            if (!directionsManager) 
            {
               directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
            }

            directionsManager.resetDirections();

            var start = new Microsoft.Maps.Directions.Waypoint({ address: "Seattle, WA" });
            var end = new Microsoft.Maps.Directions.Waypoint({ address: "Portland, OR" });

            directionsManager.addWaypoint(start); 
            directionsManager.addWaypoint(end);
            directionsManager.calculateDirections(); 
        }

        function getWaypoints(){
            var wp = directionsManager.getAllWaypoints();

            var text = '';

            for(var i=0;i<wp.length;i++){
                var loc = wp[i].getLocation();
                text += 'waypoint ' + i + ': ' + loc.latitude + ', ' + loc.longitude + '\r\n';
            }

            document.getElementById('output').innerText = text;
        }
      </script>
   </head>
   <body onload="GetMap();">
    <div id='myMap' style=";width:600px;height:400px;"></div><br/>
    <input type="button" onclick="getWaypoints()" value="Get Waypoints" /><br/>
    <div id="output"></div>
   </body>
</html>

Bing Maps API: The function directionsManager.getAllWaypoints() does not provide latitude and longitude information

Answer №1

Similar questions

Is there a way to dynamically replace a section of a link with the current URL using JavaScript or jQuery?

Harvesting the local image file

Trouble with ES6 Arrow Functions, Syntax Error

After clicking multiple times within the modal, the modal popup begins to shift towards the left side

Save information for each session with a set expiration time

An easy way to activate the save button automatically

Gaining entry to specialized assistance through an occasion

Unable to import local npm package due to an error

Emphasizes the P tag by incorporating forward and backward navigation options

Issue with JavaScript Date.parse function not functioning as expected

Every time I employ window.location, the Iframe becomes nested

What is the process for executing mocha tests within a web browser?

Can Cell be rendered into a targeted element?

What is the process for incorporating custom controls into the Mantine Embla Carousel within a Next.js environment?

A guide on extracting keywords from the tynt API using JavaScript

What is the best way to apply multiple array filters to an object list in react.js?

Can one button be clicked to trigger the activation of another button through a click?

Does Koa.js have a nested router similar to Express?

Setting up Quill in a Nuxt project (a VUE component)

Is JavaScript's setTimeout 0 feature delaying the rendering of the page?