I am trying to use the Bing Maps 7.0 API with Lazy Loading, as it seems to support the onScriptLoad parameter. I used this minimal test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Bing Maps Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id='mapDiv' style="position:absolute; width:600px; height:400px;"></div> <script type="text/javascript"> function initMap() { console.log('Callback called'); var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:"<API KEY>"}); } function loadMapControl() { var script = document.createElement("script"); script.setAttribute("src", "http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onScriptLoad=initMap"); script.setAttribute("type", "text/javascript"); document.documentElement.firstChild.appendChild(script); console.log('Tag appened'); } setTimeout(loadMapControl, 1000); </script> </body> </html>
The callback is called as expected, but Firebug throws me a Microsoft.Maps.Map is not a constructor error. This is even if I delay the creation of the map for 10 seconds after calling callback via setTimeout.
A simple example in Bing docs, however, works just fine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Bing Maps Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> </head> <body> <div id='mapDiv' style="position:absolute; width:600px; height:400px;"></div> <script type="text/javascript"> var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:",API KEY>"}); </script> </body> </html>
Has anyone succeeded in getting API 7.0 to work with lazy loading?
Thanks.
source share