Iframe Shim technique "for Dummies?!"

[Derek Tonn]

Hey everyone!

First time posting for me on this forum...so take it easy on a
newbie! :-)

I recently figured out how to use the Google Earth plug-in to display
a few KMZs of some SketchUp work that designers on our team have been
producing for non-profit educational clients. Very cool! Only one
problem: the plug-in is running rough-shot over all other elements of
a web page.

I know this topic has been discussed in numerous other threads, so I
don't want to beat a dead horse. That said, I am wondering if there
is a "Lite" version of Markw65's iframe shim technique and/or a
simplified tutorial for getting around the problem.

I'm not trying to introduce new pop-ups or other information on top of
the plug-in. All I'm trying to do is get a CSS nav menu on my site to
show up over top of the plug-in. I've spent most of the day reading
through Mark's technique and experimenting, but after several failed
attempts to get it working on my own site, I thought I'd start from
scratch and ask for help.

An example of a page on my website that includes the plugin and
illustrates the problem can be found at:
http://www.mapformation.com/portfolio/sketchup/ustminneapolis360test2.htm
Hovering over various drop-down nav menu categories will show that the
menu is hidden behind the plugin.

Any ideas? Maybe I just need someone to "dumb it down" for me to
share the exact JS code I need to introduce to the page (and
where)...as well as exactly how to introduce the Iframe. If anyone
out there has a few minutes to take pity on me and help, I would be
grateful. Thanks!

[Josh L]

Hi there,

As you noted, there's a lot of discussion of different ways to use
iframes with the plugin. One demo that I have found useful is at
http://earth-api-samples.googlecode.com/svn/trunk/demos/customcontrols/index.html

There's also some helpful comments at http://code.google.com/p/earth-api-samples/issues/detail?id=9
(including a recent one from yesterday that shows some example code,
and other great demos such as Markw65's jquery example at view-
source:http://maps.myosotissp.com/demos/popups2/index.html)

Cheers,

-Josh

On Dec 21, 8:38 pm, Derek Tonn wrote:
> Hey everyone!
>
> First time posting for me on this forum...so take it easy on a
> newbie!  :-)
>
> I recently figured out how to use the Google Earth plug-in to display
> a few KMZs of some SketchUp work that designers on our team have been
> producing for non-profit educational clients.  Very cool!  Only one
> problem: the plug-in is running rough-shot over all other elements of
> a web page.
>
> I know this topic has been discussed in numerous other threads, so I
> don't want to beat a dead horse.  That said, I am wondering if there
> is a "Lite" version of Markw65's iframe shim technique and/or a
> simplified tutorial for getting around the problem.
>
> I'm not trying to introduce new pop-ups or other information on top of
> the plug-in.  All I'm trying to do is get a CSS nav menu on my site to
> show up over top of the plug-in.  I've spent most of the day reading
> through Mark's technique and experimenting, but after several failed
> attempts to get it working on my own site, I thought I'd start from
> scratch and ask for help.
>
> An example of a page on my website that includes the plugin and

> illustrates the problem can be found at:http://www.mapformation.com/portfolio/sketchup/ustminneapolis360test2...

[tristan]

This is how I've done it, probably better ways, but it works... it
allows you to specify the width,height,top,left style properties as
options in the argument, easily expandable, and some default sizes
###
function Window( opts ) {
this.top = 10
this.left = 10
this.width = 500
this.height = 130
for (var key in opts) {
if(key == 'top') this.top = opts[key]
if(key == 'left') this.left = opts[key]
if(key == 'width') this.width = opts[key]
if(key == 'height') this.height = opts[key]
}

// Create a window specifically for each browser
if( navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ) { //
google chrome
var iframe = document.createElement('iframe')
iframe.style.position = 'absolute'
iframe.scrolling = 'no'
iframe.style.top = this.top + 'px'
iframe.style.left = this.left + 'px'
iframe.style.width = this.width + 'px'
iframe.style.height = this.height + 'px'
iframe.style.border = '2px solid green'

document.body.appendChild(iframe)
} else if( navigator.userAgent.toLowerCase().indexOf('firefox') >
-1 //mozilla firefox
|| ( navigator.userAgent.toLowerCase().indexOf('msie') > -1 ) ) { //
internet explorer
var div = document.createElement('div')
div.style.display = 'block'
div.style.backgroundColor = 'white'
div.style.position = 'absolute'
div.style.top = this.top + 'px'
div.style.left = this.left + 'px'
div.style.width = this.width + 'px'
div.style.height = this.height + 'px'
div.style.border = '2px solid green'

var iframe = document.createElement('iframe')
iframe.style.position = 'absolute'
iframe.scrolling = 'no'
iframe.frameBorder = 0

div.appendChild(iframe)
document.body.appendChild(div)
}
}
###

Now to use this code,
var blah = new Window( { height: 140, width: 90, top: 10, left:
10 } )
new Window( { height: 140, width: 90, top: 30, left: 30 } )
new Window( { height: 140, width: 90, top: 20, left: 20 } )
etc...

Note, the green border around the boxes. This is to illustrate how the
difference between chrome and ie/mozilla as far as formatting goes...

[tristan]

Oh yeah, and it won't look right in Internet Explorer unless you have
give some style properties to iframe, either in javascript, or i do it
with css to keep it clean:
iframe {
border: 0px;
top: 0px;
left: 0px;
width: 100%;
height: 100%;

[Derek Tonn]

Thanks Josh and Tristan!

I've recently tried another technique, with mixed results, that can be
viewed here: http://www.mapformation.com/portfolio/sketchup/ustminneapolis360.htm

I thought it was the solution I was looking for after test-driving it
in Chrome, Firefox and MSIE 8...but some others I've had review the
solution have told me it's not working properly in Safari (on Windows,
and Macs older than version 3.1). I also had two individuals report
that the Google Earth imagery underneath the information is rendering
at a different projection or axis in MSIE (versions 6-7), although I
cannot replicate that problem personally.

It's a little frustrating, to feel SO close to solving this nagging
problem/issue, only to have the solution break in a few browsers. If
it helps, here's the bit of code/scripts that I'm currently using to
get the plug-in to display underneath my CSS nav menu:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/
libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#GEmap').wrap('<div id="GEmapWrap" />')
$('#menu').mouseenter(function(){
$('#GEmap').hide()
})
$('#menu').mouseleave(function(){
$('#GEmap').show()
})
})
</script>
<style type="text/css">
#GEmapWrap {background: url(../../images/portfolio/sketchup/
ustminneapolis360.png) no-repeat; height: 450px;}
</style>

<script type="text/javascript">
var ge
google.load("earth","1")
function init(){
var supported=google.earth.isSupported()
if(supported){
var installed=google.earth.isInstalled()
if(installed){
google.earth.createInstance('GEmap',initCB,failureCB)}
else{
document.write("The Google Earth plug-in is not currently installed in
your browser. However, you may download a free copy of the plug-in at:
http://www.google.com/earth/explore/products/plugin.html")}}
else{
document.write("The Google Earth plug-in is not currently supported by
your browser.")}}

function initCB(instance){
ge=instance;
ge.getWindow().setVisibility(true);
ge.getOptions().setAtmosphereVisibility(true);
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, false);
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS_LOW_RESOLUTION,
false);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
var link=ge.createLink('');
link.setHref('http://www.mapformation.com' + '/portfolio/sketchup/
ustminneapolis360.kmz');
var networkLink=ge.createNetworkLink('');
networkLink.set(link,true,true);
ge.getFeatures().appendChild(networkLink);}
function failureCB(errorCode){alert("failureCB: " + errorCode);}
google.setOnLoadCallback(init)
</script>

Thanks again! Sorry for the delay in my responding to your posts as
well. Had a bit of travel over the holiday week.

Derek