This one catches out every developer when they start coding in JavaScript. The issue is that you can’t change the DOM in IE before it has fully loaded. Usually everything is fine locally and in Firefox but when you deploy you get this:
In the case of Virtual Earth it heavily changes the DOM, turning a simple DIV into the fully AJAX map control. What has happened is you have called map.LoadMap() while the page is loading, you need to listen for the body onload event, there are a couple of ways to do this:
The VE SDK simple attached in the body tag itself:
<body onload="GetMap();">
Now this is great in examples but rarely can you do this do to Master pages, CMS or other issues. Instead you can do this in code:
//the map object
var map = null;
//set page event handlers for onload and unload
if (window.attachEvent) {
window.attachEvent("onload", Page_Load);
window.attachEvent("onunload", Page_Unload);
} else {
window.addEventListener("DOMContentLoaded", Page_Load, false);
window.addEventListener("unload", Page_Unload, false);
}
//load map
function Page_Load() {
//add your map loading code here
}
//Clean up all objects
function Page_Unload() {
if (map!=null) {
map.Dispose();
map = null;
}
}
Notice I also dispose the map on unload.
If you are using a javascript library like MS AJAX or JQuery they have helpers to do this also. If you want a more complete sample using jquery have a look at my article here:
http://www.liveside.net/developer/archive/2008/11/13/virtual-earth-basics-part-1-loading-the-map.aspx