locked
Bing Map V8 Not Loading In WebForm RRS feed

  • Question

  • Has anyone tried to load Bing Map V8 in an aspx page in a web form? I cannot get it to work. I get an error...

    Unable to get property 'prototype' of undefined or null reference.

    Please help.

    Thanks,

    Dave


    david bafri

    Tuesday, June 28, 2016 4:34 PM

Answers

  • For anyone else who comes across this issue. The root cause is that the code was trying to load the map before the map control code had downloaded. Loading the map script asynchronously and adding a callback to the script resolved the issue:

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

    [Blog] [twitter] [LinkedIn]

    Tuesday, June 28, 2016 9:38 PM
  • Not really related to the original question in this thread. Looks like a lot of extra code that isn't really needed. Simply add the script tag to the top of your page, use a callback in the script tag, and add async defer to the script tag so that it loads after the rest of the page has loaded. Also, just use https and don't worry about using http. For example:

    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    With the above, you just need a function called GetMap which will be called once the map code has fully loaded. You could also load this dynamically if you want, but I would recommend use the callback in the script tag.


    [Blog] [twitter] [LinkedIn]


    Friday, October 21, 2016 4:49 PM
  • Is there any errors thrown?

    Does you map div have a width/height/position value?


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Roohi Shaikh Thursday, October 27, 2016 7:10 AM
    • Unproposed as answer by Roohi Shaikh Thursday, October 27, 2016 7:11 AM
    • Marked as answer by Ricky_Brundritt Thursday, October 27, 2016 6:45 PM
    Wednesday, October 26, 2016 4:57 PM
  • Looking at your V7 code, you can simply use the following URL for Bing Maps:

    https://www.bing.com/api/maps/mapcontrol?callback=BingMapApiLib.getMap

    It will call your getMap function after the map control has loaded.

    If you are having issues with the map loading in all browsers, be sure to set the position, width and height values of the map.

    Here is a code sample the lazy loads the map control:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <script type='text/javascript'>
        var map;
    
        function loadMap() {
            if (!map) {
                var mapScriptUrl = 'https://www.bing.com/api/maps/mapcontrol?callback=getMap';
                var script = document.createElement("script");
                script.setAttribute('defer', '');
                script.setAttribute('async', '');
                script.setAttribute("type", "text/javascript");
                script.setAttribute("src", mapScriptUrl);
                document.body.appendChild(script);
            }
        }
    
        function getMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
        }
        </script>
    </head>
    <body>
        <input type="button" onclick="loadMap()" value="Load Map"/>
        <div id="myMap" style=";width:600px;height:400px;"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Monday, December 26, 2016 7:27 PM

All replies

  • It works fine in a webform if used correctly. Can you provide more details around how you are trying to use the map?

    [Blog] [twitter] [LinkedIn]

    Tuesday, June 28, 2016 4:52 PM
  • For anyone else who comes across this issue. The root cause is that the code was trying to load the map before the map control code had downloaded. Loading the map script asynchronously and adding a callback to the script resolved the issue:

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

    [Blog] [twitter] [LinkedIn]

    Tuesday, June 28, 2016 9:38 PM
  • I have been running into this as well and this is the only solution I have found to this point.  The map object is taking longer to load into memory so when my page objects get built the map ones are not there yet.  A call back is solving the problem.  Its a little clunky,  but it works.
    Monday, July 11, 2016 4:27 PM
  • Hi Ricky,

    We are facing same issue. Is there any other work around to resolve this issue. In our case we load the Bing map scripts using javascript code so it very importance for us the work without workaround or is it possible code to work as we want.

    below is code we are using in V7. We are looking similar code work in bing map v8.

      if (!BingMapApiLib.IsLoaded()) {
                    BingMapApiLib.LoadMapControl(null, getMap);
                } else {
                    getMap();
                }         

    getMap()

    {

    _map = new Microsoft.Maps.Map(document.querySelector("#mapcontrol"), {
                                credentials: $rootScope._credentials,
                                showDashboard: false
                            });

    }

    ---- Code of BingMapApiLib

    this.LoadMapControl = function (culture, callback) {
            var loaded = isLoaded();
            if (!_isLoading && !loaded) {
                _callback = callback;
                _isLoading = true;

                //if (culture == null || culture == '')
                {
                    culture = 'de';
                }
                var url = '';
                //check the url protocol & load bing map appropriately
                if (location.protocol == "https:") {
                    url = "https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1";
                }
                else {
                    url = "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0";
                }
                //url = "https://www.bing.com/api/maps/mapcontrol?callback=getMap' async defer";
                loadJSFile(url);

                setTimeout('BingMapApiLib.__LoadCallback();', 100);
            } else if (loaded) {
                _callback();
            }
        };

        /******************
    * Private Methods
    ******************/
        function loadJSFile(file) {
            var script = document.createElement("script");
            script.setAttribute("type", "text/javascript");
            script.setAttribute("src", file);
            document.body.appendChild(script);
        }

        function isLoaded() {
            return typeof (Microsoft) != 'undefined'
    && typeof (Microsoft.Maps) != 'undefined'
    && typeof (Microsoft.Maps.Map) != 'undefined';
        }

        this.IsLoaded = function () {
            return isLoaded();
        };

        this.__LoadCallback = function () {
            _timeCounter++;
            if (isLoaded()) {
                _callback();
                _isLoading = false;
            } else {
                setTimeout('BingMapApiLib.__LoadCallback();', 100);
            }

            if (_timeCounter == 35) {
                var url = '';
                //check the url protocol & load bing map appropriately
                if (location.protocol == "https:") {
                    url = "https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1&mkt=de";
                }
                else {
                    url = "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de";
                }
                loadJSFile(url);

                _callback();
            }
        }; 

    Thanks!

    Balasaheb


    Balasaheb


    Friday, October 21, 2016 12:45 PM
  • Not really related to the original question in this thread. Looks like a lot of extra code that isn't really needed. Simply add the script tag to the top of your page, use a callback in the script tag, and add async defer to the script tag so that it loads after the rest of the page has loaded. Also, just use https and don't worry about using http. For example:

    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    With the above, you just need a function called GetMap which will be called once the map code has fully loaded. You could also load this dynamically if you want, but I would recommend use the callback in the script tag.


    [Blog] [twitter] [LinkedIn]


    Friday, October 21, 2016 4:49 PM
  • Hi,

    Thanks for your reply. This works only when we add script tag in HTML and call GetMap function on HTML page then it display map.

    We have tried load map using script as shown above now we did not getting any error. We get the map object as shown in below screenshot.

    But still map did not load it shows blank screen.

    Can you please let us know, how we resolve this view.

    Thanks!


    Balasaheb

    Wednesday, October 26, 2016 1:13 PM
  • Is there any errors thrown?

    Does you map div have a width/height/position value?


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Roohi Shaikh Thursday, October 27, 2016 7:10 AM
    • Unproposed as answer by Roohi Shaikh Thursday, October 27, 2016 7:11 AM
    • Marked as answer by Ricky_Brundritt Thursday, October 27, 2016 6:45 PM
    Wednesday, October 26, 2016 4:57 PM
  • Hi,

    Thanks for your reply. When we give width/height to div then map is showing correctly.

    Thanks!


    Balasaheb

    Thursday, October 27, 2016 7:13 AM
  • Hi Ricky,

    We are using above code to load the map and it works all the times in Google Chrome (takes time to load but load all the times)‎ but in Internet explorer sometimes map did not load and throw the below error in console.

    Unable to get property 'prototype' of undefined or null reference.

    Is there any way to resolve this issue and decrease map load time.

    Thanks!


     


    Balasaheb

    Monday, December 26, 2016 1:55 PM
  • Looking at your V7 code, you can simply use the following URL for Bing Maps:

    https://www.bing.com/api/maps/mapcontrol?callback=BingMapApiLib.getMap

    It will call your getMap function after the map control has loaded.

    If you are having issues with the map loading in all browsers, be sure to set the position, width and height values of the map.

    Here is a code sample the lazy loads the map control:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <script type='text/javascript'>
        var map;
    
        function loadMap() {
            if (!map) {
                var mapScriptUrl = 'https://www.bing.com/api/maps/mapcontrol?callback=getMap';
                var script = document.createElement("script");
                script.setAttribute('defer', '');
                script.setAttribute('async', '');
                script.setAttribute("type", "text/javascript");
                script.setAttribute("src", mapScriptUrl);
                document.body.appendChild(script);
            }
        }
    
        function getMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
        }
        </script>
    </head>
    <body>
        <input type="button" onclick="loadMap()" value="Load Map"/>
        <div id="myMap" style=";width:600px;height:400px;"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Monday, December 26, 2016 7:27 PM
  • Hi Ricky,

    Thanks for your reply.

    Now we are able to load map and get the Microsoft.Maps.Map object but when we tried to load Clustering module as shown below. 

          Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
                            $rootScope.clusterLayer = new Microsoft.Maps.ClusterLayer($rootScope.pinColl, {
                                clusteredPinCallback: createClusteredPin
                            });

    Then we are getting same below error in Internet Explorer but in Google chrome it works.

    Unable to get property 'prototype' of undefined or null reference.

    Here is the error

    Are we missing anything? and solution to resolve issue.

    Thanks! 


    Balasaheb

    Saturday, December 31, 2016 5:03 PM
  • Just to verify, you are loading the clustering module after the map? If you are doing this, there isn't any reason why it shouldn't work. Can you verify that internet explorer 10 or higher is being used and that it isn't using compatibility mode. Can you also verify if the sample in the interactive SDK works for you in the browser as well.

    [Blog] [twitter] [LinkedIn]

    Saturday, December 31, 2016 6:04 PM
  • Hi Ricky,

    Yes we are loading the clustering module after the map. We are using Internet explorer 11 and that is not in compatibility mode. The sample in the interactive SDK is work for us.

    Just wanted confirm one thing we are uisng angular js is that the issue or there is different way to achieve this in angular js. We are loading map using lazy load.

    Any solution to resolve this issue.

    Thanks!


    Balasaheb

    Sunday, January 1, 2017 12:51 PM
  • Do you have a link to where I can test your app? You can email it to me at richbrun at microsoft.com. I can't reproduce this issue no matter what I do. Lazy loading the map control and then loading the clustering module works fine when I test it.

    [Blog] [twitter] [LinkedIn]

    Tuesday, January 3, 2017 12:17 PM