bing map v7 to v8 migration - script importing issue
Question
Ok so I have looked around for a solution for this and I am sure someone will say that is a duplicate topic but I am very confused as to why this doesn't work.
This is a basic example of the code I have right now
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 can get a basic example working but when I try to do this method of creating the script element and appending it I get nothing. Since this is the way it was implemented in the larger application that this came from in v7 I am not trying to re-architect it.
I have tried things like jQuery getScript and what not.
Please let me know what you think!!! Thanks.
1 answers
solution1
1 2017-07-07 21:05:17
First thing I can think to say is that you should probably remove your credentials from your publicly posted question. Just a thought.
Secondly, the error is due to attempting to interact with the map before the map is loaded.
I've personally never seen a script loaded in that manner before, but I guess it works - at least in some cases, but probably not this one. I assume you have a reason for doing it in such a way.
Anyway, with my lack of knowledge about it, I can only assume that what is happening is that the script is being loaded and your callback (test_function) is being called as the code appears to suggest it does.
However, the script being loaded and Bing Maps being loaded are, I suspect, two different things in this case.
Your initially commented out url with the &callback=GetMap is the documented way of async loading Bing Maps. Your GetMap function will be called by Bing Maps once it has finished loading. With this particular code, callback=test_function would be what you want.
So test_function should be initiated by Bing Maps itself, not being passed through your script loading function (again, making assumptions about how it works). The loading function, I guess, doesn't actually want to do anything other than get that script in place, so no callback method; Bing Maps will handle that for you.
Here's a Plunker for you of it working.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.