After searching for a solution to this issue, I still can't figure out why it's not working even though I've seen similar topics. The code I'm using is quite basic and here's an example of what's causing the problem:
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
<script>
var url =
//'http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=GetMap';
'https://www.bing.com/mapspreview/sdk/mapcontrol';
loadScript(url, test_function);
function test_function() {
console.log('inside test_function before map');
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'My Bing Maps Key'});
console.log('inside test_function after map');
};
</script>
</html>
main.js
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
script.async = true;
script.defer = true;
if (script.readyState){ //IE
console.log('inside IE block');
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
console.log('inside Other block');
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
Console output
main.js:18 inside Other block
main.html:17 inside test_function before map
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 test_function (main.html:18)
at HTMLScriptElement.script.onload (main.js:20)
I've tried various methods like jQuery getScript but haven't had any luck. Your feedback would be greatly appreciated!