Question

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

Answer 1

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.