+1  A: 

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.

thomasrutter
+2  A: 

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.

Tim Schoffelman
+3  A: 

Hi,

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

Fraser
+6  A: 

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

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

Roman Nurik
A: 

This technique looks very interesting, and it might help us for developing an application for students to use Google Maps underneath another layer (that they might draw in, for example). I am not sure any of my ideas are even possible, since untested, but your examples and those from commenters show it might indeed.

Question though. Have you or any of the other any idea of whether it is legal and allowed in the Google API agreements to layer over top of the google map in the iframes?

http://code.google.com/apis/maps/index.html "Google Maps has a wide array of APIs that let you embed the robust functionality and everyday usefulness of Google Maps into your own website and applications, and overlay your own data on top of them." While that won't satisfy a lawyer, I'd say that's a pretty clear indication that it's encouraged.
Neil McKeown