Google Earth Plug-in and the ATL 10.00

While playing with the Google Earth Plug-in to integrate in a WebBrowser control of a WPF application I'm currently developing, I started getting this strange background text instead of the map/earth: ATL 10.00.

ATL 10.00

I needed to do two things to get my page working. one simple thing.


Update:  It seems my previous method could still fail in some random times and even throw beautiful IE script errors, so here's what's really going on:

The WebBrowser control will by default, for compatibility reasons, render pages as in Internet Explorer 7 standards. The Google Earth plug-in seems to currently have some compatibility issues with IE7, therefore problems can arise. In this case, the ATL 10.00 stays above the map, blanking it.

The Fix
Use the most recent version of Internet Explorer. In order to do this, you must declare a meta tag in your HTML page like the following (this enables IE9 in WebBrowser when it loads the page):

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

First, I used a workaround which consists in delaying the creation of the Google Earth plug-in, thus avoiding a race condition as mentioned in issue 701 from the earth-api-samples:

function Init() {
    if (google.earth.isSupported()) {
        // timeout is required or google earth plugin may get into a race condition and die
        setTimeout("google.earth.createInstance('map3d', initCB, failureCB); alert('done');", 500);
    }
}

/* other functions like initCV and failureCB */

google.setOnLoadCallback(Init);
google.load("earth", "1");

Second, I made sure the #map_canvas is above everything, especially during loading.


My application initially hides the WebBrowser. If I displayed the WebBrowser before the loading timeout, I could see the map alright... but if I waited longer than the loading timeout and then displayed the map, I just got the ATL 10.00.


So I thought, maybe the map is always being rendered but the ATL 10.00 layer is above it. I set #map_canvas the style z-index: -1 and it worked properly!

#map_canvas {
  z-index: -1;
  /* etc */
}

My JS scripts are simple and small and I cannot reproduce ATL 10.00 in native Internet Explorer (in my case IE9) because, I suppose, the map is always visible with positive dimensions (instead of what happens in my WPF application).

Useful links:

• Defining Document Compatibility
• Regarding IE9 WebBrowser control
• Issue 701: plugin displays white window with ATL 10.00 text