none
Issue while upgrading BING Maps control from V6.3 to V8 RRS feed

  • Question

  • 1) Map is not getting loaded on the page load, it gets loaded only when the page is refreshed.

    2) How to update direction on the Map once the map is loaded. In V6.3 there was a method GetDirections that used to do the job.

    Here is my code :

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

    $(document).ready(function () {

         LoadMap();

    }

    function LoadMap() {

        myMap = new Microsoft.Maps.Map('#mapDiv', {
            credentials: 'bingkey',
            center: new Microsoft.Maps.Location(-37.820539101073436, 144.957143),
            mapTypeId: Microsoft.Maps.MapTypeId.aerial,
            zoom: 10
        });

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

    function directionsModuleLoaded() {
        var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(myMap);

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

        var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: '76 Moore St, Campsie, NSW' });
        var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: '39 Walker St, Lavender Bay, NSW' });

        directionsManager.addWaypoint(waypoint1);
        directionsManager.addWaypoint(waypoint2);

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



    • Edited by FAKHRI09 Wednesday, July 5, 2017 5:04 PM
    Wednesday, July 5, 2017 12:16 PM

Answers

  • I am  learning as I am converting my code ......  I made a few changes to your code ... A map does now appear.  Hopefully this will help somewhat.  BTW - I would remove your Bing Key from your post so that it is not stolen or wrongfully used.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script type='text/javascript'>
        var map, infobox, tooltip;
        var tooltipTemplate = '<div style="background-color:white;height:20px;width:150px;padding:5px;text-align:center"><b>{title}</b></div>';
        function GetMap() {
    myMap = new Microsoft.Maps.Map('#mapDiv', {
            credentials: 'Your Bing Key',
            center: new Microsoft.Maps.Location(-37.820539101073436, 144.957143),
            mapTypeId: Microsoft.Maps.MapTypeId.aerial,
            zoom: 10
        });
    
      Microsoft.Maps.loadModule('Microsoft.Maps.Directions', directionsModuleLoaded);
    }
    function directionsModuleLoaded() {
        var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(myMap);
    
        // Set Route Mode to driving
        directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
    
        var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: '76 Moore St, Campsie, NSW' });
        var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: '39 Walker St, Lavender Bay, NSW' });
    
        directionsManager.addWaypoint(waypoint1);
        directionsManager.addWaypoint(waypoint2);
    
        // Set the element in which the itinerary will be rendered
        //directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('outputDiv') });
        directionsManager.calculateDirections();
    }
        </script>
    
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    </head>
    <body>
        <div id="mapDiv" style=";width:800px;height:600px;"></div>
    </body>
    </html>


    • Edited by TedKowal Wednesday, July 5, 2017 4:50 PM
    • Marked as answer by FAKHRI09 Wednesday, July 5, 2017 5:05 PM
    Wednesday, July 5, 2017 4:47 PM
  • 1) The V8 control is async control. You are likely trying to call the map API before it is fully loaded. Note that $(document).ready fires long before the page is fully loaded. Get rid of that line of code and add the following to the map script URL: ?callback=LoadMap  Once the map script is loaded, it will call your LoadMap function. I also recommend loading the map script URL after the rest of your map code as this callback can fire right away, before your other map code is loaded, if the control is cached. Take a look at this code sample to see the best way to load the map: https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Map/Load%20Map%20Async.html

    Live sample: http://bingmapsv8samples.azurewebsites.net/#Load%20Map%20Async

    2) If you want to update a route there are many options; you can change the waypoints and call calculateDirections again. You can simply drag the route, you can simply clear everything. If you want to keep things simple, use the built in directions input panel as it takes care of everything for you:  http://bingmapsv8samples.azurewebsites.net/#Directions_InputPanel

    Documentation for the directions manager can be found here: https://msdn.microsoft.com/en-us/library/mt750375.aspx


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Wednesday, July 5, 2017 5:07 PM
    • Marked as answer by FAKHRI09 Wednesday, July 5, 2017 5:28 PM
    Wednesday, July 5, 2017 5:07 PM

All replies

  • I am  learning as I am converting my code ......  I made a few changes to your code ... A map does now appear.  Hopefully this will help somewhat.  BTW - I would remove your Bing Key from your post so that it is not stolen or wrongfully used.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script type='text/javascript'>
        var map, infobox, tooltip;
        var tooltipTemplate = '<div style="background-color:white;height:20px;width:150px;padding:5px;text-align:center"><b>{title}</b></div>';
        function GetMap() {
    myMap = new Microsoft.Maps.Map('#mapDiv', {
            credentials: 'Your Bing Key',
            center: new Microsoft.Maps.Location(-37.820539101073436, 144.957143),
            mapTypeId: Microsoft.Maps.MapTypeId.aerial,
            zoom: 10
        });
    
      Microsoft.Maps.loadModule('Microsoft.Maps.Directions', directionsModuleLoaded);
    }
    function directionsModuleLoaded() {
        var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(myMap);
    
        // Set Route Mode to driving
        directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
    
        var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: '76 Moore St, Campsie, NSW' });
        var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: '39 Walker St, Lavender Bay, NSW' });
    
        directionsManager.addWaypoint(waypoint1);
        directionsManager.addWaypoint(waypoint2);
    
        // Set the element in which the itinerary will be rendered
        //directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('outputDiv') });
        directionsManager.calculateDirections();
    }
        </script>
    
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    </head>
    <body>
        <div id="mapDiv" style=";width:800px;height:600px;"></div>
    </body>
    </html>


    • Edited by TedKowal Wednesday, July 5, 2017 4:50 PM
    • Marked as answer by FAKHRI09 Wednesday, July 5, 2017 5:05 PM
    Wednesday, July 5, 2017 4:47 PM
  • 1) The V8 control is async control. You are likely trying to call the map API before it is fully loaded. Note that $(document).ready fires long before the page is fully loaded. Get rid of that line of code and add the following to the map script URL: ?callback=LoadMap  Once the map script is loaded, it will call your LoadMap function. I also recommend loading the map script URL after the rest of your map code as this callback can fire right away, before your other map code is loaded, if the control is cached. Take a look at this code sample to see the best way to load the map: https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Map/Load%20Map%20Async.html

    Live sample: http://bingmapsv8samples.azurewebsites.net/#Load%20Map%20Async

    2) If you want to update a route there are many options; you can change the waypoints and call calculateDirections again. You can simply drag the route, you can simply clear everything. If you want to keep things simple, use the built in directions input panel as it takes care of everything for you:  http://bingmapsv8samples.azurewebsites.net/#Directions_InputPanel

    Documentation for the directions manager can be found here: https://msdn.microsoft.com/en-us/library/mt750375.aspx


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Wednesday, July 5, 2017 5:07 PM
    • Marked as answer by FAKHRI09 Wednesday, July 5, 2017 5:28 PM
    Wednesday, July 5, 2017 5:07 PM
  • Thanks Ted. Exactly that was the issue.The script tag for mapcontrol was not required. I have removed the below script to make it work. 

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

    Posting the Working code :

    <script type='text/javascript' >

    $(window).load(function () {

         LoadMap();

    }

    function LoadMap() {

        myMap = new Microsoft.Maps.Map('#mapDiv', {
            credentials: 'bingkey',
            center: new Microsoft.Maps.Location(-37.820539101073436, 144.957143),
            mapTypeId: Microsoft.Maps.MapTypeId.aerial,
            zoom: 10
        });

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

    function directionsModuleLoaded() {
        var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(myMap);

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

        var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: '76 Moore St, Campsie, NSW' });
        var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: '39 Walker St, Lavender Bay, NSW' });

        directionsManager.addWaypoint(waypoint1);
        directionsManager.addWaypoint(waypoint2);

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

    </script>

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



    Thanks, Mohammed Fakhri


    • Edited by FAKHRI09 Thursday, July 6, 2017 5:52 PM
    Wednesday, July 5, 2017 5:07 PM