Ability to z-index divs over the plugin region

[GoogleCodeExporter]

See this thread

Requested by: Robert S

Supported by: DougH, sylehc, bFlood, jan.wischnat,cjorba, marcin.archive

Original issue reported on code.google.com by api.roman.public@gmail.com on 12 Aug 2008 at 8:45

[GoogleCodeExporter]

Hi all, a current workaround for this, that I'm hoping to soon write an example
implementation for, is to use the IFRAME shim technique as described here:

http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-
applet/
http://www.macridesweb.com/oltest/IframeShim.html
http://blog.codefront.net/2006/08/01/unobtrusive-iframe-shim-a-half-solution/

Original comment by api.roman.public@gmail.com on 28 Oct 2008 at 5:18

• Changed state: Accepted

[GoogleCodeExporter]

After some experimentation, I am not sure if the shim technique will work for 
the
Earth Plugin as it is written.  When I place an IFrame with a higher z-order 
over the
div containing the GMap2 instance, it only shows through where the MapType 
controls
reside.

Original comment by riddle.a...@gmail.com on 11 Nov 2008 at 2:16

Attachments:

• shim-effect.png

[GoogleCodeExporter]

I have effectively used the shim technique to place dragable windows over the 
plugin
area, so I can vouch for its viability. Don't give up, you'll figure it out.

Original comment by heidtm...@gmail.com on 11 Nov 2008 at 2:28

[GoogleCodeExporter]

Thanks for the encouragement heidtmare.

I can now also vouch for the shim technique's viability, my problem was that I 
wanted
to have my cake and eat it too.  I was setting the allowTransparency attribute 
on the
IFrame, which caused the situation in the attachment to my last post.  Between
firefox and IE there is (not suprisingly) different behavior when the IFrame is 
made
transparent via either allowTransparency or style.backgroundColor = 
transparent. 

Thanks again.

Original comment by riddle.a...@gmail.com on 11 Nov 2008 at 3:26

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

hi, i am working on a GIS application using GE API and Zapatec Framework. When 
i use 
Zapatec Menu i can't get menu items over GE Plug In cause GE is top most. i 
tried 
IFRAME tag but IFRAME cuts Zapatec Menu elements so the menu elements can't be 
totally visible. Is there a way to get mi components inside a div tag over GE 
Plug 
In? getting div tags over GE Plug In is a headache, please bring some help.

Kind regards,

Att. Roberto Jimenez
rjimenez@geoware.com.mx
desarrollo.web.suscripciones@live.com.mx

Original comment by rjimenez...@gtempaccount.com on 8 Dec 2008 at 5:39

[GoogleCodeExporter]

Absolutely...

This is one of the MOST important issues facing the plugin.

Here are some reason:

1. Drop down menus get hidden behind the map (
    Having the map plugin be placed on top of all other objects disallows developers 
from having drop down menus anywhere above the map (because the dropdown menu 
would 
be hidden behind the map

2. Modal pop ups (
    Modal popups are unusable on pages with a google earth plugin (Again, because it 
will be hidden behind the map div)
)

3. difficult (but not impossible) to employ AJAX resizable control (
    I employ an ajax resize control extender on the div containing the map on my 
page. It is very difficult to resize the dic because it insists on being the 
top 
level item. This is because you have to assign a resize icon which to drop in 
order 
to resize the control but that image can get "sucked" behind the map and 
becomes 
unclickable.
)

Original comment by sabr...@gmail.com on 20 Dec 2008 at 7:54

[GoogleCodeExporter]

re: comment 7

Its certainly desirable to have this fixed (if that turns out to be possible - 
I 
suspect it may be a browser issue), but meanwhile the iframe shim technique 
described 
in comment #1 works well.

You can see an example here: http://maps.myosotissp.com/demo.html

I'm not sure I follow your problem with the resize control, but I would think 
that a 
combination of a shim under the resize icon, and the use_capture flag to 
addEventListener (or setCapture/releaseCapture in ie) would do exactly what you 
want 
(note that my windows are draggable and resizable, even over the earth div, 
using 
exactly this technique).

Original comment by mark...@gmail.com on 22 Dec 2008 at 2:57

[GoogleCodeExporter]

I've created a small demo of how to put content over the plugin: 
http://maps.myosotissp.com/demos/popups.html

It works in FF, IE and Chrome (with the geplugin_browserok hack).

I'll try to add more features (and maybe some comments :-) ) as time allows.

Original comment by mark...@gmail.com on 30 Jan 2009 at 6:42

[GoogleCodeExporter]

your demo doesnt use ge when in chrome, and i find it odd that you use 
openlayers 
buttons to do things completely different that what we have come to expect from 
them.

i do like how you have managed to turn openlayers into a graphing mechanism, 
thats pretty cool.

Original comment by heidtm...@gmail.com on 31 Jan 2009 at 2:01

[GoogleCodeExporter]

Re: comment 10. 
 - The popups demo (see comment 9) *does* use ge in chrome if you use the 
geplugin_browserok hack. The replay routes demo page (see comment 8) doesnt, 
because 
it uses an iframe (so the geplugin_browserok hack goes on the wrong url). The 
site 
itself does work (and use ge) in chrome, however.
 - sorry for hijacking the openlayer's buttons. They were handy :-)
 - openlayer's *seemed* like a good way to make graphs at the time. It turns out not 
to have been such a good idea for performance reasons. If I ever get time, Im 
going 
to rewrite it to use SVG and VML directly, just as soon as my copious spare 
time 
allows...

Original comment by mark...@gmail.com on 31 Jan 2009 at 10:15

[GoogleCodeExporter]

sry, guess im just not familiar with that browser hack, i assumed it was 
javascript 
and built into the app. check out http://www.liquidx.net/plotkit/ for your 
charts. 
best ive found so far to client side charting.

Original comment by heidtm...@gmail.com on 1 Feb 2009 at 2:36

[GoogleCodeExporter]

Hi all,

I'm closing this out because there is enough documentation out there now on how 
to
overlay HTML on top of the plugin. See Mark's sample above (now in the demo 
gallery)
for a great sample.

If there is a chance we can get this baked natively into the plugin, we'll do 
that
and I'll post about it in the Groups, as well as to this issue feed.

If anyone feels strongly that there is still more work to be done here to 
address the
core problem, let me know.

- Roman

Original comment by api.roman.public@gmail.com on 5 Feb 2009 at 8:43

• Changed state: Fixed

[GoogleCodeExporter]

Roman,
Although this "workaround" does work it is still a workaround and there is no 
way to
create a transparent iframe. Which in some cases would be even more helpful.

Original comment by jaws...@gmail.com on 6 Feb 2009 at 2:27

[GoogleCodeExporter]

I agree. It would be nice to be able to say, place a transparent mask over the 
plugin for implementing modal 
windows. Also, using the iframe workaround is not sufficient for any drag and 
drop interaction (at least from 
what I see on a mac) due to the lag time.

Original comment by underbluewaters on 6 Feb 2009 at 7:16

[GoogleCodeExporter]

I have been using mocha, it is built on top of mootools. I did have to hack a 
bit to
get the iframe/shim to work but it allows to drag/drop and I have replaced the 
html
ballons with my own "mocha" windows to get more info etc. but transparency 
would make
this even greater. you can get it from.
http://mochaui.com

Original comment by jaws...@gmail.com on 6 Feb 2009 at 3:25

[GoogleCodeExporter]

Unless the plugin goes windowless (like Flash did with wmode), transparency 
will be
unlikely; I'm in discussion with the engineers about considering windowless, but
there are several big issues with windowlessness so I wouldn't bank on it 
coming any
time in the near future.

Original comment by api.roman.public@gmail.com on 6 Feb 2009 at 6:53

[GoogleCodeExporter]

Its great to get feedback on this, even though its not likely to be 
implemented. Sometimes its very difficult to 
work with the google products due to the secrecy surrounding new features. Not 
having the ability to do true 
modal windows will require some ui tweaking that I didn't want to embark on 
unless it was truly necessary.

Original comment by underbluewaters on 6 Feb 2009 at 7:08

[GoogleCodeExporter]

I agree Roman and the google group do a great job with the feedback and helping 
and I
also agree that If I not have had found the js framework to help with the 
overlays.
It would have been a show stopper for our application.

Original comment by jaws...@gmail.com on 6 Feb 2009 at 7:22

[GoogleCodeExporter]

Only a fix for one of the issues, but I've just posted an update to 
http://maps.myosotissp.com/demos/popups.html which does rounded corners on the 
windows (you could, of course, use the same technique to create any rounded 
corner 
iframe-shim). The magic is in fixup.js Window.prototype._makeRoundShim.

Also, I think I have a way to do true modal popups (dimming the earth, and 
disabling 
clicks on it). And note that with my mods, you can already do modal popups; 
there's 
just nothing to stop you mousing around in the earth view.

Original comment by mark...@gmail.com on 6 Feb 2009 at 7:36

[GoogleCodeExporter]

Hi, 

Thanks all for the tips.  I've been successful at adding a div on top of my 
Google
Earth window, however I'm hoping someone can suggest how I can set the position
relative to the right side of the map.  Please see this link and click on the 
Earth
tab for an example:
http://www.parkinfo.org/index_ge.html

I'd like the div that includes check boxes for various overlays to remain
right-aligned with the maptype buttons if the user resizes their browser window.

Thanks for the help,
Jennifer

Original comment by jenni...@greeninfo.org on 9 Feb 2009 at 10:24

[GoogleCodeExporter]

re comment 21: Should be as simple as moving your overlay_togglesGE div inside 
the
RightColumn div, and then setting style.right, rather than style.left.

I say *should* because IE tends to have issues, although I think in this case, 
it
will work even there (as long as you set "right" and "width", rather than both 
"left"
and "right").

Original comment by mark...@gmail.com on 9 Feb 2009 at 10:52

[GoogleCodeExporter]

Your div is behind on a Mac. You should check again...

Original comment by xjubier@gmail.com on 9 Feb 2009 at 11:31

[GoogleCodeExporter]

re comments 22 & 23: Thanks for the suggestions and comments, I think I've got 
it
working properly now!

Original comment by jenni...@greeninfo.org on 10 Feb 2009 at 12:54

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Another update to http://maps.myosotissp.com/demos/popups.html, now includes 
ability 
to create modal popups.

Original comment by mark...@gmail.com on 25 Feb 2009 at 6:54

[GoogleCodeExporter]

I could not get to the link http://maps.myosotissp.com/demos/popups.html and 
even 
from the demo gallery.  Is there a problem with the link?

Thanks

Original comment by tho...@hotmail.com on 28 Feb 2009 at 9:18

[GoogleCodeExporter]

There's a temporary problem with maps.myosotissp.com. Should be back soon. Im 
working 
on it...

Original comment by mark...@gmail.com on 28 Feb 2009 at 9:21

[GoogleCodeExporter]

If there a more generic example to follow For Javacript novices ? I see that the
example at http://maps.myosotissp.com/demos/popups.html is working but that's a 
bit
much to digest.

I would just like to run a modal type effect to allow photos on the same page 
as the
GE plugin to be able to pop up in front of the GE plugin window.

thanks

Original comment by museum.guggenheim@gmail.com on 26 May 2009 at 9:14

[GoogleCodeExporter]

Hello! I am trying to use a draggable div over google earth plugin, but I am not
able. I can put an iframe over the plugin, but can't do the same with a div. 
Reading
these comments I see some links with examples where this was got, but those 
links
seem to be dead right now. In example: http://www.parkinfo.org/index_ge.html 
(in root
I can see a map but it is over Google Map plugin, not Google Earth one).

Anyone has any info that could help me?
Thank you so much!

Original comment by betis...@gmail.com on 26 Jun 2009 at 10:33

[GoogleCodeExporter]

your halfway there.
the trick is to use z-indexing to position your div above the iframe that you 
got to 
showup above the plugin.

div
iframe
plugin

Original comment by heidtm...@gmail.com on 26 Jun 2009 at 10:52

[GoogleCodeExporter]

Even easier - just create the iframe as the first child of the div,
style="position:absolute;height:100%;width:100%", and you're done (*) - 
whenever the
div is moved or resized the iframe will adjust automatically. So you can forget 
about it.

(*) actually, if any of the other children of the div have negative zIndex, you 
need
to make sure the iframe also has a zIndex at least as negative - but thats 
generally
not going to be an issue.

Original comment by mark...@gmail.com on 26 Jun 2009 at 11:04

[GoogleCodeExporter]

Issue 328 has been merged into this issue.

Original comment by api.roman.public@gmail.com on 10 Sep 2009 at 7:18

[GoogleCodeExporter]

Hello!!!

Mark, your example works fine on FF 3.58, but doesn´t on 3.6.

thank you!!!

Original comment by nabil.ka...@gmail.com on 22 Feb 2010 at 4:23

[GoogleCodeExporter]

I've just fixed it. Basically, the iframe needs to have a background color set
(transparent wont work as of FF3.6).

The following should all now work in FF3.6

The original demo: http://maps.myosotissp.com/demos/popups.html
A newer, jquery based demo (much simpler, assuming you are working with jquery
anyway): http://maps.myosotissp.com/demos/popups2/index.html
My website: http://replayroutes.com

Original comment by mark...@gmail.com on 7 Mar 2010 at 5:38

[GoogleCodeExporter]

Mark, the newer example does not work in Chrome (the box seems to be behind the 
earth
div) and the older one doesn't either (figure bellow).

Original comment by luizrodr...@gmail.com on 7 Mar 2010 at 12:53

Attachments:

• ChromeWithOldSite.png

[GoogleCodeExporter]

What version of chrome, and what os? Its working for me on windows xp (not sure 
of
the version - Im away from my pc).

I have a bug filed against chrome where the shims dont work if the ge instance 
is
inside an iframe; but thats not the case here.

Also, it looks like its working (the hole is quite clearly being punched in the
plugin), its just not putting the shim in quite the right place... Did you try 
the
jquery example? That one puts the iframe inside the div, so there's less room 
for
mispositioning it...

Original comment by mark...@gmail.com on 7 Mar 2010 at 5:37

[GoogleCodeExporter]

Sorry, i forgot to mention it... It happens in Chrome 5.0.342.2 in both Vista 
and Win7

Original comment by luizrodr...@gmail.com on 8 Mar 2010 at 12:12

[GoogleCodeExporter]

Right, I see it now. So for now its only the dev build thats broken.

Dont have a good handle on it yet but it seems like:
 - if the shim is there before the earth instance is created, then it punches a hole
at its initial location, but moving the shim doesnt move the hole
 - if the shim is created after the earth instance it has no effect
 - resizing the window containing the plugin causes any shims to punch new holes at
their current location.

That last point means that there is probably a (rather unpleasant) workaround...
resize the div containing the ge plugin by a pixel each time a shimmed object is
moved or resized. eg toggle the bottom bit of the width...

I'll see if I can come up with something...

Original comment by mark...@gmail.com on 8 Mar 2010 at 12:36

[GoogleCodeExporter]

Actually, Im going to hold off on the workarounds, because this also breaks the
plugin's balloons (no content appears). Balloons rely on the iframe shim 
technique to
display their contents.

So its reasonable to assume that this will be fixed before dev makes it to 
production
- or that some other way of making html content appear will be made available.

Original comment by mark...@gmail.com on 8 Mar 2010 at 12:42

[GoogleCodeExporter]

I just revisited this in the latest chrome dev-channel build (5.0.375.9) and it 
looks
like its been fixed.

Original comment by mark...@gmail.com on 18 Apr 2010 at 4:35

[GoogleCodeExporter]

Mark, thanks for your helpful tips on working around this issue.
I tried using your simpler jsquery-based solution, 
http://maps.myosotissp.com/demos/popups2/index.html
but AFAICT this only works with a dialog, and a dialog must have a title bar. I 
just want to put a button over the map. But if I try to do this with a button 
instead of a dialog, I get '$("#dialog_test").button is not a function' if I'm 
still using a div; and if I use a button (input element) instead of a div, the 
button appears *below* (after) the plugin instead of on top of it. Is there a 
way to put a button on top of the map? Maybe I need to do the iframe shim 
directly, but it seems complex.

Original comment by hutt...@gmail.com on 20 Sep 2010 at 10:31

[GoogleCodeExporter]

Good work Mark

I'm still seeing small problems in the iframe technique:

e.g. if I use
http://maps.myosotissp.com/demos/popups/index.html
then resize the browser window, then I get white areas (using Chrome)

I've also seen similar problems using the same sample (and the popups2 sample) 
in just map mode - i.e. not using the gearth plugin.

Hope that helps

Stuart

Original comment by lodge.st...@gmail.com on 21 Sep 2010 at 7:03

Attachments:

• googleearthsizing.png

[GoogleCodeExporter]

@huttarl: you can apply an iframe shim to any block element, or elements using 
$(<elements>).bgiframe(). Not sure if you can directly apply it to a button, 
but if not, just put the button in a div, and shim the div. If you cant make it 
work, post a url, and I'll take a look.

@lodge.stuart: The debug window is anchored bottom right, and the library 
doesnt take account of that when resizing the browser. Next time you drag or 
resize that window (ie the "debug" pseudo window) it will update correctly. I 
would fix it, except that I moved away from that library in favor of jquery.

Original comment by mark...@gmail.com on 21 Sep 2010 at 3:00

[GoogleCodeExporter]

Hi Mark, 

Do you know what I need to change to make your bgiframe-function work with the 
latest jQuery version (1.4.2)? "$.ui.plugin.add" seems to be deprecated.  

Bjørn

Original comment by bjorn.sa...@gmail.com on 22 Sep 2010 at 11:06

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

@api.roman.public #13 wrote: "there is enough documentation out there now on 
how to
overlay HTML on top of the plugin."

Roman, I see links to articles about iframe shims in general (not specific to 
GE plug-in); and I see two GE-specific demos, where iframe shims are mixed in 
with a lot of other stuff. Like @museum.guggenheim #29 said, it's not trivial 
to digest the samples and distinguish between the part we should imitate and 
the part that's irrelevant.

Has anyone written a demo or article distilled down to just showing how to use 
an iframe shim with GE plug-in?

Original comment by hutt...@gmail.com on 24 Nov 2010 at 10:03

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

With the plethora of demos and documentation on Google Maps Javascript API, I 
have spent a week searching for a solution for simply creating a menu div above 
a google earth embed where a menu can rollout and display over the embed.  

The solution provided is so complex that any sane user will use his source as 
their base, due to their inability to distill the individual part they wanted. 

As I only require a simple floating expandable menu to load kml files into my 
GE embed, the fact that it is next to impossible is extremely frustrating.

Original comment by rez...@gmail.com on 2 May 2012 at 11:35

[GoogleCodeExporter]

I'm curious, why has this been closed out as an issue?  

I couldn't agree more with comment 7... the iframe shim solution is a clever 
hack, but it's still a hack.  It disallows GUIs with drop down menus, overlay 
DIVs that are semi-transparent, etc.  

I have a very elegant site with Google Earth on all Mac browsers, but now have 
to go back to the drawing board since it the GE plugin is drawn on top for all 
Windows browsers.  

Original comment by mobo...@gmail.com on 3 Oct 2013 at 9:29

[GoogleCodeExporter]

Please open this issue and help resolve this without ugly hacking.
Anyway why this is closed? Any explanation?
Thanks.

Original comment by email.an...@gmail.com on 13 Dec 2013 at 9:12

[GoogleCodeExporter]

I agree we need a more elegant solution. I am using the Highslide modal popup 
plugin on the same page as the GE Plugin. Implementing the above hacks would be 
somewhat onerous considering we would be hacking 3rd party tools.

Original comment by jrile...@gmail.com on 8 Sep 2014 at 7:34

[GoogleCodeExporter]

Here is an example I put together with drop down menus, etc.
http://jsfiddle.net/5jm7c/105/

As you can simply use multiple shims or resize them with the content.

Hope that helps.

Original comment by fraser.c...@gmail.com on 9 Sep 2014 at 3:30