none
Loadmodule Microsoft.Maps.Map and callback RRS feed

  • Question

  • Hello everyone.

    I have a problem when loading the Map module.

    On my default JS page I'm loading the main module, then another one, then initializing the map with:

    Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: loadModules });
    
     function loadModules() {
            Microsoft.Maps.loadModule('Microsoft.Maps.AdvancedShapes', { callback: initMap });
        }
    
        function initMap() { // Initialize Bing map
    
           
                var mapDiv = document.querySelector("#mapDiv");
                var mapOptions = {
                    credentials: "my Bing Maps Key"
                };
    
                map = new Microsoft.Maps.Map(mapDiv, mapOptions);
                map.setView({ zoom: 8 });
    
              
        }

    The map isn't loaded when starting the application.

    It seems like the callback functions are not working. Any tips?

    Thanks.

    Tuesday, September 9, 2014 6:53 AM

Answers

  • Have you created a div that has an id of mapDiv? If not, then this is likely the issue. Alternatively it's possible your code is running before the map div is rendered on the page, making it inaccessible. Make sure that you do not run this code until after the page has been loaded. To do this update your code as follows:

    document.addEventListener("DOMContentLoaded", initialize, false);
    
    function initialize(){
        Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: loadModules });
    }
    
     function loadModules() {
            Microsoft.Maps.loadModule('Microsoft.Maps.AdvancedShapes', { callback: initMap });
        }
    
        function initMap() { // Initialize Bing map
    
           
                var mapDiv = document.querySelector("#mapDiv");
                var mapOptions = {
                    credentials: "my Bing Maps Key"
                };
    
                map = new Microsoft.Maps.Map(mapDiv, mapOptions);
                map.setView({ zoom: 8 });     
        }


    http://rbrundritt.wordpress.com

    Tuesday, September 9, 2014 9:42 AM
  • This seems to be localized to your development environment. I've tried to reproduce this in several different ways but without any success.

    http://rbrundritt.wordpress.com

    • Marked as answer by Ricky_Brundritt Wednesday, September 10, 2014 7:47 AM
    Tuesday, September 9, 2014 3:06 PM
  • I suspect that you have not loaded in a script reference to the modules API. When using modules you have to add a second script reference to the Bing Maps API's. Your HTML should have these two references:

    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapimodules.js"></script>

    This is documented here: http://msdn.microsoft.com/en-us/library/hh852186.aspx

    Also, I wrote a free ebook on creating location intelligent Windows Store apps. I talk about using and creating custom modules in Chapter 3.  You can download a copy of the book here: http://rbrundritt.wordpress.com/my-book/


    http://rbrundritt.wordpress.com

    Tuesday, September 9, 2014 8:46 AM
  • Odd. I'm not able to reproduce this. Try some of the following code samples to see if you see this happen with them:http://code.msdn.microsoft.com/Bing-Maps-SDK-for-Metro-31b378eb


    http://rbrundritt.wordpress.com

    • Marked as answer by Ricky_Brundritt Wednesday, September 10, 2014 7:47 AM
    Tuesday, September 9, 2014 12:46 PM

All replies

  • I suspect that you have not loaded in a script reference to the modules API. When using modules you have to add a second script reference to the Bing Maps API's. Your HTML should have these two references:

    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapimodules.js"></script>

    This is documented here: http://msdn.microsoft.com/en-us/library/hh852186.aspx

    Also, I wrote a free ebook on creating location intelligent Windows Store apps. I talk about using and creating custom modules in Chapter 3.  You can download a copy of the book here: http://rbrundritt.wordpress.com/my-book/


    http://rbrundritt.wordpress.com

    Tuesday, September 9, 2014 8:46 AM
  • Thanks Ricky.

    Already added both of them on my default.html.

    When doing the "new Microsoft.Maps.Map" call, VS2013 prompts the following error:

    Exception was thrown at line 1, column 202459 in ms-appx://myappname/Bing.Maps.JavaScript//js/veapicore.js

    0x800a138f - JavaScript runtime error: Unable to get property 'replace' of undefined or null reference

    Tuesday, September 9, 2014 9:15 AM
  • Have you created a div that has an id of mapDiv? If not, then this is likely the issue. Alternatively it's possible your code is running before the map div is rendered on the page, making it inaccessible. Make sure that you do not run this code until after the page has been loaded. To do this update your code as follows:

    document.addEventListener("DOMContentLoaded", initialize, false);
    
    function initialize(){
        Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: loadModules });
    }
    
     function loadModules() {
            Microsoft.Maps.loadModule('Microsoft.Maps.AdvancedShapes', { callback: initMap });
        }
    
        function initMap() { // Initialize Bing map
    
           
                var mapDiv = document.querySelector("#mapDiv");
                var mapOptions = {
                    credentials: "my Bing Maps Key"
                };
    
                map = new Microsoft.Maps.Map(mapDiv, mapOptions);
                map.setView({ zoom: 8 });     
        }


    http://rbrundritt.wordpress.com

    Tuesday, September 9, 2014 9:42 AM
  • Modified the code as your suggestion. The "initialize" function is called, but the "loadModules" callback isn't.

    By the way, I notice a strange behaviour.

    When starting for the first time the App deploy on my machine (uninstalled before beginning the deploy), only "initialize" is working. If I launch the deploy for the second time, (so the App is already installed) "loadModules" and "initMap" are called...

    Tuesday, September 9, 2014 10:08 AM
  • Odd. I'm not able to reproduce this. Try some of the following code samples to see if you see this happen with them:http://code.msdn.microsoft.com/Bing-Maps-SDK-for-Metro-31b378eb


    http://rbrundritt.wordpress.com

    • Marked as answer by Ricky_Brundritt Wednesday, September 10, 2014 7:47 AM
    Tuesday, September 9, 2014 12:46 PM
  • Yes, it's happening the same thing.

    First time I deploy the Sample App, no map displayed.

    Second time, map ok.

    Tuesday, September 9, 2014 1:57 PM
  • This seems to be localized to your development environment. I've tried to reproduce this in several different ways but without any success.

    http://rbrundritt.wordpress.com

    • Marked as answer by Ricky_Brundritt Wednesday, September 10, 2014 7:47 AM
    Tuesday, September 9, 2014 3:06 PM
  • Maybe there's a connection problem behind the scenes. I'll check at home later.

    As always, many thanks for your support Ricky.


    Edit: Confirmed connection problem. At home it's running as expected.
    • Edited by RR2001 Wednesday, September 10, 2014 6:33 AM
    Tuesday, September 9, 2014 3:18 PM