none
Getting "Uncaught ReferenceError: Microsoft is not defined" after updating V7 to V8 RRS feed

  • Question

  • First we noticed we were having the following error below (running V7)

    Uncaught TypeError: Cannot read property 'prototype' of null
        at k (mapcontrol?v=7.0:11)
        at n.h [as create] (mapcontrol?v=7.0:11)
        at e (mapcontrol?v=7.0:11)
        at t.l [as instance] (mapcontrol?v=7.0:11)
        at n.h [as create] (mapcontrol?v=7.0:11)
        at e (mapcontrol?v=7.0:11)
        at t.l [as instance] (mapcontrol?v=7.0:11)
        at new Microsoft.Maps.Map (mapcontrol?v=7.0:13)
        at Object.Maps.init (RMMapsUIMap.js:421)
        at OSRM.init (main.js:58)
    I found out V7 is no longer being supported, then decided to update to V8, but now we are getting the error below
    Uncaught ReferenceError: Microsoft is not defined
    I've updated the URL 
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    Keep in mind, the map loads when executing 'Hard Refresh' hold shift + refresh (mac).

    I appreciate any assistance, thank you.







    • Edited by Rob Alkaas Monday, November 13, 2017 4:55 PM
    Wednesday, November 8, 2017 4:18 PM

Answers

  • I've tested in all supported browsers, it appears this issue only occurs in Chrome. I've tried your code (updated URL paths) and it doesn't work since there are references to leaflet in there. I suspect you are using document.ready to initialize the map. This is likely the issue as document.ready will fire before the page and it's resources are fully loaded. Use the pages onload event instead. Modifying your code to the following works fine:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<title dir="ltr">Maps</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol'></script>
    <script>
    function GetMap(){
    	var hiddenBingMap = new Microsoft.Maps.Map( document.getElementById( "hiddenBingMapDIV" ), { credentials: '' } );
    
    	hiddenBingMap.getCredentials( function( sessionID ) {
    		var bingKey = sessionID;  
    	});
    }
    </script>
    </head>
    <body onload="GetMap()">
    	<div id="hiddenBingMapDIV" style="display: none; height: 0px; width: 0px;"></div>
    </body>
    </html>

    Note, hiding the Bing Maps V8 control and using it purely to generate a session key is borderline against the terms of use. Session keys are only meant to be used with official Bing Maps controls, and are provided as an incentive to use the Bing Maps controls rather than 3rd party map controls. 


    [Blog] [twitter] [LinkedIn]

    • Marked as answer by Rob Alkaas Tuesday, November 14, 2017 10:37 PM
    Monday, November 13, 2017 6:37 PM

All replies

  • Here is the actual code;

    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    	<title dir="ltr">Maps</title>
    
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/app/assets/js/RMMapsUIMap.js"></script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    </head>
    <body>
    <div id="hiddenBingMapDIV" style="display: none; height: 0px; width: 0px;"></div>
    
    </body>
    
    </html>
    and UIMap.js is were the actual method is located.




    • Edited by Rob Alkaas Monday, November 13, 2017 4:55 PM
    Wednesday, November 8, 2017 4:48 PM
  • Likely a timing issue. In your UIMap.js file, verify that you do not access the Microsoft namespace before the GetMap function is called. Also verify that nothing other than the map script callback is calling the GetMap function. Try adding a break point to your code and finding out which like this error is occurring on, this will likely point you in the right direction.

    [Blog] [twitter] [LinkedIn]

    Friday, November 10, 2017 1:52 AM
  • Thank you, but I'm now running to previous error prior to updating, which is the 

    Uncaught TypeError: Cannot read property 'prototype' of null
        at k (mapcontrol?v=7.0:11)
        at n.h [as create] (mapcontrol?v=7.0:11)
        at e (mapcontrol?v=7.0:11)
        at t.l [as instance] (mapcontrol?v=7.0:11)
        at n.h [as create] (mapcontrol?v=7.0:11)
        at e (mapcontrol?v=7.0:11)
        at t.l [as instance] (mapcontrol?v=7.0:11)
        at new Microsoft.Maps.Map (mapcontrol?v=7.0:13)
        at Object.Maps.init (RMMapsUIMap.js:421)
        at OSRM.init (main.js:58)

    My current code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    	<title dir="ltr">Maps</title>
    
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol'></script>
    <script type="text/javascript" src="/app/assets/js/RMMapsUIMap.js"></script>
    
    </head>
    <body>
    <div id="hiddenBingMapDIV" style="display: none; height: 0px; width: 0px;"></div>
    
    </body>
    
    </html>
    Executing mapcontrol first, prior the function, should this not work?




    • Edited by Rob Alkaas Monday, November 13, 2017 4:56 PM
    Friday, November 10, 2017 8:28 PM
  • In addition, i noticed no errors while running on Microsoft Edge and IE. Issue only occurs on Firefox, Safari and Chrome.
    Friday, November 10, 2017 9:58 PM
  • Try clearing your cache as the error is saying (mapcontrol?v=7.0) which is the V7 control which doesn't exist online anymore and isn't being referenced in your application. Do you have a URL to your application somewhere that we can test and debug?

    [Blog] [twitter] [LinkedIn]

    Friday, November 10, 2017 11:49 PM
  • Here is the actual error while using: <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol'></script>

    The error i used posted was from previously using v7, but the error listed below is current.

    mapcontrol:11 Uncaught TypeError: Cannot read property 'prototype' of null
        at k (mapcontrol:11)
        at n.h [as create] (mapcontrol:11)
        at e (mapcontrol:11)
        at t.l [as instance] (mapcontrol:11)
        at n.h [as create] (mapcontrol:11)
        at e (mapcontrol:11)
        at t.l [as instance] (mapcontrol:11)
        at new Microsoft.Maps.Map (mapcontrol:13)
        at Object.RMMaps.init (RMMapsUIMap.js:421)
        at OSRM.init (main.js:58)


    Monday, November 13, 2017 3:09 PM
  • Ricky Brundritt, thank you for assisting and i appreciate your patience.
    • Edited by Rob Alkaas Monday, November 13, 2017 3:41 PM
    Monday, November 13, 2017 3:41 PM
  • removed the url since it's only for staging, will provide upon request.
    • Edited by Rob Alkaas Monday, November 13, 2017 8:15 PM
    Monday, November 13, 2017 3:42 PM
  • So technically this is what i have:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    	<title dir="ltr">Maps</title>
    
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol'></script>
    <script type="text/javascript" src="/app/assets/js/RMMapsUIMap.js"></script>
    
    
    </head>
    <body>
    <div id="hiddenBingMapDIV" style="display: none; height: 0px; width: 0px;"></div>
    
    </body>
    
    </html>

    • Edited by Rob Alkaas Monday, November 13, 2017 4:56 PM
    Monday, November 13, 2017 4:34 PM
  • I've tested in all supported browsers, it appears this issue only occurs in Chrome. I've tried your code (updated URL paths) and it doesn't work since there are references to leaflet in there. I suspect you are using document.ready to initialize the map. This is likely the issue as document.ready will fire before the page and it's resources are fully loaded. Use the pages onload event instead. Modifying your code to the following works fine:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<title dir="ltr">Maps</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol'></script>
    <script>
    function GetMap(){
    	var hiddenBingMap = new Microsoft.Maps.Map( document.getElementById( "hiddenBingMapDIV" ), { credentials: '' } );
    
    	hiddenBingMap.getCredentials( function( sessionID ) {
    		var bingKey = sessionID;  
    	});
    }
    </script>
    </head>
    <body onload="GetMap()">
    	<div id="hiddenBingMapDIV" style="display: none; height: 0px; width: 0px;"></div>
    </body>
    </html>

    Note, hiding the Bing Maps V8 control and using it purely to generate a session key is borderline against the terms of use. Session keys are only meant to be used with official Bing Maps controls, and are provided as an incentive to use the Bing Maps controls rather than 3rd party map controls. 


    [Blog] [twitter] [LinkedIn]

    • Marked as answer by Rob Alkaas Tuesday, November 14, 2017 10:37 PM
    Monday, November 13, 2017 6:37 PM
  • I'll make sure to meet requirements (use/terms), and thank you for replying. I was encountering a new error but that no longer exists. I'll test the changes and update shortly.


    • Edited by Rob Alkaas Monday, November 13, 2017 8:39 PM
    Monday, November 13, 2017 7:44 PM
  • Ricky, I finally got it to work, thank you!
    Tuesday, November 14, 2017 10:37 PM