How can I place a html div over the Google Earth plugin? Involves wmode, I imagine

Question

I'm having trouble laying a html div over the Google Earth plugin in a web application, any help would be appreciated.

It's fine for Map, Terrain and Hybrid mode, but on 'Earth' mode, the Flash kicks in and automatically layers the map on top.

Z-indexing doesn't help.

Presumably I could do something like:

document.getElementById('flashDiv').setAttribute('wmode', 'opaque');

but given that Google's stuff is compiled on the fly, it makes it much more difficult. Viewing the generated code hasn't helped here. Again, due to it being compiled on the fly, stuff like SWFObject can't save the day...

Has anyone encountered anything similar? I've spent the morning trawling the Google Earth API group without much avail.

Update: After more hair-pulling, the answer may lie with an iframe shim. I may have also jumped to the conclusion that the plugin is Flash-based. Investigating...

_{(source: googlepages.com)}

Answer 1

I put together a demo showing how to use IFRAME shims here:

http://earth-api-samples.googlecode.com/svn/trunk/demos/customcontrols/index.html

Answer 2

The there is no direct support for overlaying 'z-indexing' a div either in the Api or Dom. The plug-in loads an executable file that, in very simple terms, punches a hole in the browser window. Using the 'iframe shim' technique is the standard workaround although transparency can be tricky.

There is an open Feature request for this functionality to be added to the api - the comments section has some good information and links.

Also, there is a great online demo of this here