How can I place a html div over the Google Earth p

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...

alt text http://neilsimonmckeown.googlepages.com/overlay.jpg

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

After looking into the way Google has users embed the code, it looks like it's with an iFrame. Still, if your running into any issues with a flash, see below...

Running into similar situations with trying to display a dropdown navigation over a flash element (or html over a YouTube video). There were a few factors that came into play.

The first was my html element that I wanted to hover over the flash element had to be a sibling html element with the css properties set for each sibling element and also for the parent div. So, for example:

<div id="parent">
  <div id="sibling"></div>
  <embed id=”flash”><other script code></embed>
</div>

Then my css would be

//.parent may not need to be set to relative
#parent   { position: relative; }
// the value on sibling1 just needs to be higher than .sibling2
#sibling  { position: relative; z-index: 20; }
#flash    { position: relative; z-index: 10; display:inline }

The other thing worth noting is your flash needs to have the wmode parameter set to transparent.

This trick has worked for various flash applications as well as YouTube Video's - the trick is to make sure the html you want to display over the flash is a sibling element to the actual flash code and not the parent div, the z-index for the html to display over the flash is higher than the flash element, both html elements have their positioning set to either relative or absolute, and the wmode parameter is set to transparent.

Hopefully this helps - but my guess is that your issue is with the iFrame.

Answer 3

If it is a plugin, then you cannot reliably place other elements over the top of it. Browsers usually let go of most of their ability to 'layer' elements when plugins are involved.

I guess an Iframe may be a way around it, as long as you check that this still works on most browsers.

Answer 4

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

Answer 5

set "iframe" z-index to 100

and set div that displays on top z-index to 200 (div must be at-least position relative)