Comments (56)
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 [email protected]
on 28 Oct 2008 at 5:18
- Changed state: Accepted
from earth-api-samples.
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 [email protected]
on 11 Nov 2008 at 2:16
Attachments:
from earth-api-samples.
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 [email protected]
on 11 Nov 2008 at 2:28
from earth-api-samples.
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 [email protected]
on 11 Nov 2008 at 3:26
from earth-api-samples.
[deleted comment]
from earth-api-samples.
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
[email protected]
[email protected]
Original comment by [email protected]
on 8 Dec 2008 at 5:39
from earth-api-samples.
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 [email protected]
on 20 Dec 2008 at 7:54
from earth-api-samples.
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 [email protected]
on 22 Dec 2008 at 2:57
from earth-api-samples.
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 [email protected]
on 30 Jan 2009 at 6:42
from earth-api-samples.
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 [email protected]
on 31 Jan 2009 at 2:01
from earth-api-samples.
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 [email protected]
on 31 Jan 2009 at 10:15
from earth-api-samples.
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 [email protected]
on 1 Feb 2009 at 2:36
from earth-api-samples.
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 [email protected]
on 5 Feb 2009 at 8:43
- Changed state: Fixed
from earth-api-samples.
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 [email protected]
on 6 Feb 2009 at 2:27
from earth-api-samples.
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
from earth-api-samples.
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 [email protected]
on 6 Feb 2009 at 3:25
from earth-api-samples.
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 [email protected]
on 6 Feb 2009 at 6:53
from earth-api-samples.
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
from earth-api-samples.
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 [email protected]
on 6 Feb 2009 at 7:22
from earth-api-samples.
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 [email protected]
on 6 Feb 2009 at 7:36
from earth-api-samples.
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 [email protected]
on 9 Feb 2009 at 10:24
from earth-api-samples.
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 [email protected]
on 9 Feb 2009 at 10:52
from earth-api-samples.
Your div is behind on a Mac. You should check again...
Original comment by [email protected]
on 9 Feb 2009 at 11:31
from earth-api-samples.
re comments 22 & 23: Thanks for the suggestions and comments, I think I've got
it
working properly now!
Original comment by [email protected]
on 10 Feb 2009 at 12:54
from earth-api-samples.
[deleted comment]
from earth-api-samples.
Another update to http://maps.myosotissp.com/demos/popups.html, now includes
ability
to create modal popups.
Original comment by [email protected]
on 25 Feb 2009 at 6:54
from earth-api-samples.
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 [email protected]
on 28 Feb 2009 at 9:18
from earth-api-samples.
There's a temporary problem with maps.myosotissp.com. Should be back soon. Im
working
on it...
Original comment by [email protected]
on 28 Feb 2009 at 9:21
from earth-api-samples.
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 [email protected]
on 26 May 2009 at 9:14
from earth-api-samples.
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 [email protected]
on 26 Jun 2009 at 10:33
from earth-api-samples.
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 [email protected]
on 26 Jun 2009 at 10:52
from earth-api-samples.
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 [email protected]
on 26 Jun 2009 at 11:04
from earth-api-samples.
Issue 328 has been merged into this issue.
Original comment by [email protected]
on 10 Sep 2009 at 7:18
from earth-api-samples.
Hello!!!
Mark, your example works fine on FF 3.58, but doesn´t on 3.6.
thank you!!!
Original comment by [email protected]
on 22 Feb 2010 at 4:23
from earth-api-samples.
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 [email protected]
on 7 Mar 2010 at 5:38
from earth-api-samples.
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 [email protected]
on 7 Mar 2010 at 12:53
Attachments:
from earth-api-samples.
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 [email protected]
on 7 Mar 2010 at 5:37
from earth-api-samples.
Sorry, i forgot to mention it... It happens in Chrome 5.0.342.2 in both Vista
and Win7
Original comment by [email protected]
on 8 Mar 2010 at 12:12
from earth-api-samples.
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 [email protected]
on 8 Mar 2010 at 12:36
from earth-api-samples.
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 [email protected]
on 8 Mar 2010 at 12:42
from earth-api-samples.
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 [email protected]
on 18 Apr 2010 at 4:35
from earth-api-samples.
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 [email protected]
on 20 Sep 2010 at 10:31
from earth-api-samples.
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 [email protected]
on 21 Sep 2010 at 7:03
Attachments:
from earth-api-samples.
@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 [email protected]
on 21 Sep 2010 at 3:00
from earth-api-samples.
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 [email protected]
on 22 Sep 2010 at 11:06
from earth-api-samples.
[deleted comment]
from earth-api-samples.
@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 [email protected]
on 24 Nov 2010 at 10:03
from earth-api-samples.
[deleted comment]
from earth-api-samples.
[deleted comment]
from earth-api-samples.
[deleted comment]
from earth-api-samples.
[deleted comment]
from earth-api-samples.
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 [email protected]
on 2 May 2012 at 11:35
from earth-api-samples.
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 [email protected]
on 3 Oct 2013 at 9:29
from earth-api-samples.
Please open this issue and help resolve this without ugly hacking.
Anyway why this is closed? Any explanation?
Thanks.
Original comment by [email protected]
on 13 Dec 2013 at 9:12
from earth-api-samples.
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 [email protected]
on 8 Sep 2014 at 7:34
from earth-api-samples.
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 [email protected]
on 9 Sep 2014 at 3:30
from earth-api-samples.
Related Issues (20)
- googleearth will no longer run
- Patch for /trunk/demogallery.html
- google earth浏览器插件在windows 7 64bit系统上使用失败
- Linux .deb version can't use proxy HOT 2
- Hit test for terrain above sky
- please support linux HOT 1
- KML Interactive Sampler "Download" button doesn't work
- Time slider won't interval in one day increments HOT 1
- Time slider won't interval to days correctly
- select and move as locked entity HOT 1
- Break line string HOT 1
- KMZ remote loading via GE API is broken! HOT 2
- Error ERR_VERSION with latest plug-in
- .vn
- API for finding photo spheres
- Using CSS to scale player messes up in Mac/Chrome
- Using CSS to scale earth messes up in Mac/Chrome
- Plugin does not work with Chrome Version 39.0.2171.65 (64-bit) on OSX HOT 2
- Plugin disappears in Chrome when the F12-menu is brought up
- Add Shortcut to Switch Between UTM/Lat Lon
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from earth-api-samples.