none
Bing Maps V8 Web Control doesn't render route and directions RRS feed

  • Question

  • I'm working on migration V7 ajax control to V8 web control. I have this code to render route and directions in our application.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />

        <script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?branch=frozen'></script>

        <script type='text/javascript'>
            var map;
            var directionsManager;
          
            setTimeout(GetMap,100);

            function GetMap()
            { debugger;
                map = new Microsoft.Maps.Map('#myMap', {
                    credentials: 'key'
                });

                //Load the directions module.
                Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
                    //Create an instance of the directions manager.
                    var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
                                 
                    //Set Route Mode to transit.
                    directionsManager.setRequestOptions({routeMode: Microsoft.Maps.Directions.RouteMode.transit});

                    //Add waypoints.
                    var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: '4 Irving pl 10003' });
                    directionsManager.addWaypoint(waypoint1);

                    var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: '30 Flatbush Ave 11217' });                
                    directionsManager.addWaypoint(waypoint2);

                    //Set the element in which the itinerary will be rendered.
                    directionsManager.setRenderOptions({itineraryContainer: document.getElementById('directionsItinerary') });

                    //Calculate directions.
                    directionsManager.calculateDirections();
                });
            }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:500px;height:400px;"></div>
        <div id='directionsItinerary style=";width:400px;height:400px;"'></div>
    </body>
    </html>

    Strangely, this works good in a standalone html page on my laptop but when the same thing is deployed as JSP page on to our application on WAS, it just renders the addresses but not route or directions.

    The error I see on developer tools console is : SCRIPT5007: Unable to get property 'prototype' of undefined or null reference. File: mapcontrol, Line: 11, Column: 7052

    Initially I  didn't use branch=frozen and while access from application, it returned CORS error/warning on IE developer tools console.  That disappeared after adding branch=frozen.

    Thanks!

    Sunday, June 18, 2017 3:30 PM

Answers

  • Loading the map using setTimeout is likely the issue. It will take more than 100ms for the map API to load. It loads asynchronously. Remove the setTimeout line of code. For the map script URL remove the branch parameter and add callback=GetMap you will want to avoid the frozen branch unless you are creating a very basic map using just a few pushpins as that branch is a year behind in updates.

    [Blog] [twitter] [LinkedIn]

    Sunday, June 18, 2017 3:39 PM
  • 'JSON.stringify' is a standard built in function in browsers. Hope that isn't being overwritten by BPM as that would cause issues for a lot of apps.

    [Blog] [twitter] [LinkedIn]

    Tuesday, June 27, 2017 1:09 AM

All replies

  • Loading the map using setTimeout is likely the issue. It will take more than 100ms for the map API to load. It loads asynchronously. Remove the setTimeout line of code. For the map script URL remove the branch parameter and add callback=GetMap you will want to avoid the frozen branch unless you are creating a very basic map using just a few pushpins as that branch is a year behind in updates.

    [Blog] [twitter] [LinkedIn]

    Sunday, June 18, 2017 3:39 PM
  • Thanks for replying.

    Tried it, didn't work. Also,  tried putting  the function block  into a callback function to check if that's getting called at all,  and yes, it's not getting into calculate directions itself.

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

     function directionsModuleLoaded () {
                alert("Inside directionsModuleLoaded");
                    //Create an instance of the directions manager.
                    directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

    In console here is the information message:

    SEC7118: XMLHttpRequest for https://t0.ssl.ak.dynamic.tiles.virtualearth.net/comp/stl?v=7.22&tpp=097A0D85-2585-425A-8471-60BDD3C5B7C3&og=80 required Cross Origin Resource Sharing (CORS)

    Sunday, June 18, 2017 5:38 PM
  • here is the full code with changes mentioned above.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
     
        <script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'></script>

        <script type='text/javascript'>
          debugger;
            var map;
            var directionsManager;

            //setTimeout(GetMap,100);

            function GetMap()
            {
              alert("in GetMap");
              debugger;
                map = new Microsoft.Maps.Map('#myMap', {
                    credentials: 'key'
                });

                //Load the directions module.
                Microsoft.Maps.loadModule('Microsoft.Maps.Directions',{ callback: directionsModuleLoaded });
            }
                
              function directionsModuleLoaded () {
                alert("Inside directionsModuleLoaded");
                    //Create an instance of the directions manager.
                    directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
                    
                    //Calculate a date time that is 1 hour from now.
                    //var departureTime  = new Date();
                    //departureTime.setMinutes(departureTime.getHours() + 1);

                    //Set Route Mode to transit.
                    directionsManager.setRequestOptions({routeMode: Microsoft.Maps.Directions.RouteMode.transit});

                    //Add waypoints.
                    var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: '4 Irving pl 10003' });
                    directionsManager.addWaypoint(waypoint1);

                    var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: '30 Flatbush Ave 11217' });                
                    directionsManager.addWaypoint(waypoint2);

                    //Set the element in which the itinerary will be rendered.
                    directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });

                    //Calculate directions.
                                                                                 
                                                                                    alert("before calculateDirections");
                    directionsManager.calculateDirections();
                                                                                    alert("after calculateDirections");
                }
    </script>
    </head>
    <body>
        <div id="myMap" style=";width:800px;height:600px;"></div>
        <div id='directionsItinerary'></div>
    </body>
    </html>


    • Edited by RaviA4 Sunday, June 18, 2017 7:24 PM
    Sunday, June 18, 2017 5:41 PM
  • Here is the  JavaScript error I overlooked earlier:

    SCRIPT438: Object doesn't support property or method 'stringify' File: jsonscript_14241749633.js!!.js, Line: 1, Column: 395.

    It looks like to me that the JavaScript libraries used in the v8 control and the javascript libraries used in our BPM framework used for application development  are conflicting. The JS error is from a file with in the BPM framework.

    I submitted a support request to the BPM framework support team and will  update this post after hearing back from them.



    • Proposed as answer by Ricky_Brundritt Tuesday, June 27, 2017 1:08 AM
    • Unproposed as answer by Ricky_Brundritt Tuesday, June 27, 2017 1:08 AM
    • Edited by RaviA4 Thursday, June 29, 2017 3:05 AM
    Sunday, June 18, 2017 7:32 PM
  • 'JSON.stringify' is a standard built in function in browsers. Hope that isn't being overwritten by BPM as that would cause issues for a lot of apps.

    [Blog] [twitter] [LinkedIn]

    Tuesday, June 27, 2017 1:09 AM
  • the JSON.stringify is indeed overwritten by the BPM framework. It's fixed now by falling back to browser's native code in a patch.  And the map works along with directions manager.

    Thanks, Ricky.

    Thursday, July 27, 2017 3:49 PM