3

I am loading the Bing Map API script dynamically. When the script finishes loading, I would like to construct my map. The problem is Microsoft and Microsoft.Maps are defined, but Microsoft.Maps.Map is not. I realize that their script will asynchronously load more scripts, but even after waiting 10 seconds for these additional hypothetical scripts, Microsoft.Maps.Map continues to be undefined. So how do I load their Map class? I see nothing in their example, that explicitly loads the class.

Javascript (Prototype Framework):

var script = new Element(
    'script', {
        type: 'text/javascript',
        src: 'http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'
    }
);

script.observe(
    'load',
    function(event) {
        console.info(Microsoft);
        console.info(Microsoft.Maps);
        console.info(Microsoft.Maps.Map);
    }
);

document.body.appendChild(script);

Console Output:

>>>  Microsoft
Object { Maps={...}}
>>>  Microsoft.Maps
Object { Globals={...}}
>>>  Microsoft.Maps.Map
undefined
Pwner
  • 3,714
  • 6
  • 41
  • 67

2 Answers2

2

cbayram is right that you're looking too early. But specifically you are not using the Bing Map specific way of firing your script once theirs is done loading (onscriptload). We avoid global functions, but AFAIK you really need to use one here.

Try this:

var script = new Element(
    'script', {
        type: 'text/javascript',
        src: 'http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=DrawMap'
    }
);

function DrawMap() {
   console.info(Microsoft);
   console.info(Microsoft.Maps);
   console.info(Microsoft.Maps.Map);
}

document.body.appendChild(script);

Not important, but why do you append it to body? I always append it to head.

Brian White
  • 1,265
  • 1
  • 10
  • 16
  • The `onscriptload` parameter fixes it. Without specifying it, they will never load `Microsoft.Maps.Map`. I have no particular reason for adding scripts to the body. I just haven't seen any difference between adding to body or head. – Pwner Oct 22 '12 at 21:56
  • Actually a javascript guru at work was recommending appending scripts to the body. I guess the approach now is to stick them at the end of the body so you don't slow page loading, so if you're dynamically appending them to the dom somewhere it should be the body where the rest of them are going. – Brian White Oct 24 '12 at 01:08
0

BING Map API's JavaScript file dynamically loads/injects additional JS and CSS files into your page. 

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20121012100453.93/js/en-us/veapicore.js">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20121012100453.93/js/en-us/veapidelay.js">
<link rel="stylesheet" type="text/css" rev="stylesheet" href="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20121012100453.93/css/en/mapdelay.css">
<link rel="stylesheet" type="text/css" rev="stylesheet" href="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20121012100453.93/css/en/mapcontrol.css">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20121012100453.93/js/en-us/veapiAnalytics.js">

The Map function/object seems to be created in

http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20121012100453.93/js/en-us/veapicore.js

EDIT:

Your script.observe runs upon the first (initial) JS file being loaded. It's too early for the Map function as it's instantiated in the veapicore.js that's subsequently loaded by the initial mapcontrol.ashx?v=7.0. You are simply too early in looking for that Map object.

cbayram
  • 2,259
  • 11
  • 9
  • I inspected the DOM and did not see those additional JS and CSS load. This Prototype way of loading the script works for Google Maps and MapBox. – Pwner Oct 20 '12 at 00:11
  • If I include the script statically in ``, everything works. But if I dynamically attach the script either to `` or ``, it doesn't work. I need a way to dynamically load it though. – Pwner Oct 20 '12 at 00:32
  • You have to debug it. It's tricky and painful given the JavaScript source code is obfuscated. See if you can find a dev version of the script. OK see, the edit on the answer. – cbayram Oct 20 '12 at 00:36
  • After your page loads, go to console and manually re-execute console.info(Microsoft.Maps.Map). Is it still empty? – cbayram Oct 20 '12 at 00:45
  • It continues to be undefined after waiting 10 seconds and manually printing out in the console. – Pwner Oct 20 '12 at 01:14