Fix for Bing Maps not working in Firefox 4+

UPDATE
Apparently that problem exists for Firefox 5 also and perhaps will apply for the future versions too. So the solution below should be considered a best practice for using Bing Maps 6.x with Firefox 4+.

Recently I've upgraded from Firefox 3.6 to Firefox 4 and while doing regression testing I've notice that apparently Bing Maps has some issues in Firefox 4. In particular I saw a JavaScript error that said "p_elSource.attachEvent is not a function":

The problem at this point looks like this:

1. the error happens in Bing's JavaScript itself; and
2. it only happens in Firefox 4 browser. Other browsers like IE 8 & 9, Chrome, Safari, Opera and Firefox 3.6 don't produce that problem.

Since the page where I saw an error belonged to a web application I've been working on I had to fix the problem. Initial search on the Internet did not bring up anything useful except that a few other people also stepped on this problem. I tried Bing Maps interactive SDK and it worked all right. That told me the Bing Maps script itself does work but it clearly depends on some other condition that does not necessarily happen on other pages like mine.

What's that condition? I looked at the difference between Firefox browser and the other browsers. When in Firefox Bing Maps dynamically loads another JavaScript file atlascompat.js. Apparently that file is required since it contains a definition for the attachEvent function that caused an error and must be loaded first before the main Bing Maps script. So that's the condition I've been looking for! Now the picture got clearer:

1. the error happens in Bing's JavaScript itself; and
2. it only happens in Firefox 4 browser. Other browsers like IE 8 & 9, Chrome, Safari, Opera and Firefox 3.6 don't produce that problem;
3. it happens when the atlascompat.js is not present on a page at the moment when the main Bing Maps script is being loaded.

Now why the error is happening on my page and not on the Bing Maps SDK page? Apparently the conditions #3 is not satisfied since my page contains a whole bunch of other scripts and the atlascompat.js did not load before the main Bing Maps script due to internal differences that have been introduced in Firefox 4. Now I have a complete picture of the problem and can come up with a solution for it.

The solution is simple: since the Bing Maps itself cannot load the atlascompat.js reliably I need to help it and just add a reference to the atlascompat.js script on my page before a reference to the main Bing Maps script. This can be easily accomplished with a few line of code like below:

if ((Page.Request.Browser.Browser.IndexOf("Firefox") >= 0) && (Page.Request.Browser.MajorVersion >= 4))
{
   // add script reference on a page
   // use technique that is suitable for your application
}

Notice that the browser version is more or equal 4 to cover the future versions of Firefox too (for version 5 this solution is confirmed). In my case I've added the code above into a GetScriptReferences method of an IScriptControl that was responsible for rendering the Bing Maps on a page.