iFrame shim for Google Earth


I was recently developing a new User interface (UI) for my client’s Google earth driven site. The idea behind the site is easy enough to understand; a 3D interactive map of Whistler mountain. The map shows ski runs, lodges, parks and lifts. The user is able to navigate the 3D space to see the locations, select a point of intrest and get information about it, you can view it here. This is fantastic for users who know where the point of intrest is, my charge was to create a UI that helps those that are looking for a specific point and have no clue where that is.

The perils of plugins

Google earth for the web has a few inherit problems, the biggest currently is that it requires a plugin. In the early 2000′s Plugins appeared to be poised to take over the the web. Flash, for example, was (and still is) being used for all manner of sites. Plugins gave a set of features not natively available to browsers, thus “enhancing” the users experience on the web. While this might initially seem like a plus, in actual fact it’s more of a burden, causing issues with SEO, locking content and incompatibility with those iProduct everyone loves.

On the desktop browser, plugins run like a self contained program within the window. This poses all sorts of nasty problems for usability, for example; search engines can’t browse data inside a plugin. Plugins also don’t act like any other object in the browser. Once the page has loaded, the plugin object sits on top of all other objects on the page (see figure 1).

Figure 1
Figure 1

Let’s say we wanted to make a nice Google Earth map that takes up the entire browser window. Any controls or UI features on the page would be inaccessible to the user. Traditionally developers using Plugins like google Earth have skirted around this problem by simply placing the plugin in a containing box and have the UI around the map display window, 3D Hawaii uses this technique, as does Google themselves! While this works, it doesn’t really give the design savvy developer many options for layouts. Lucky for us there’s a cross browser hack to the rescue!

iFrame for the win (??)

Yup, the much criticized iFrame is our saviour here. Sorry. The idea behind it is relatively simple, the iFrame works as a shim and forces the content contained within it to appear infront of the plugin, Google earth in this case. Therefore everything that needs to be displayed by must be inside one of these iFrame shims. the code is fairly straight forward:


<!-- iFrame Shim -->
<div class ="iframe-container">
	<div class ="content-container"">
		<!-- content goes here! -->
	</div>
<iframe class="iframeshim" frameborder="0" scrolling="no">
	<html><head></head><body></body></html>
</iframe>
</div> <!-- end iframe-container -->

We also need to add a little styling to get everything in the right place and make sure this badboy works the way we need it to.


.iframe-container {z-index: 100;}

.content-container {
	margin:0px;
	padding:0px;
	overflow-x: hidden;
	overflow-y: hidden;
	}

.iframeshim {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: -10000;
	background: black;
	}

Essentially, what we are doing here is creating a wrap (iframe-container) that contains our content and the iFrame shim. The CSS places the iframe-shim and the content-container so that they occupy the same space on the page. Even though the iFrame is z-indexed well below the wrap, the browser will push the iFrame on top of our plugin to the front the page and content will sit on top of it see figure 2. Handy eh?

Figure 2
Figure 2

Final Thoughts

Your results will allow you to make interfaces that look like this one I created for 3DWhistler. I should also note There are some styling limitations to this hack. iFrames act like pages, as such RGBa and transparent background won’t work on many browsers (*ahem* IE). Also applying rounded corners in CSS to your content will make the iFrame page show through at the corners, so we’re stuck with square corners.

 

6 Comments on iFrame shim for Google Earth

  • Will says:

    I’ve tried using your example in IE8, but each time I interact with the map. My .png rendered in the iframe gets pushed to the back of the GE map layer. What am I doing wrong? Attached is my code:

    index2

    google.load(“earth”, “1″);

    var ge;
    google.load(“earth”, “1″);
    function init() {
    google.earth.createInstance(‘map3d’, initCB, failureCB);
    }

    function initCB(instance) {
    ge = instance;
    ge.getWindow().setVisibility(true);
    }

    function failureCB(errorCode) {
    }

    google.setOnLoadCallback(init);

    #map3d {position: absolute; height: 800px; margin: 0; padding: 0; width: 1200px; z-index: 1;}
    .iframe-container {z-index: 100; position: absolute; left: 1100px;}
    .content-container {margin: 0px; padding:0px; overflow: hidden;}
    .iframeshim {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -10000;}

  • Will says:

    It looks my code got eaten on the post:
    google.load(“earth”, “1″);

    var ge;
    google.load(“earth”, “1″);
    function init() {
    google.earth.createInstance(‘map3d’, initCB, failureCB);
    }

    function initCB(instance) {
    ge = instance;
    ge.getWindow().setVisibility(true);
    }

    function failureCB(errorCode) {
    }

    google.setOnLoadCallback(init);

    #map3d {position: absolute; height: 800px; margin: 0; padding: 0; width: 1200px; z-index: 1;}
    .iframe-container {z-index: 100; position: absolute; left: 1100px;}
    .content-container {margin: 0px; padding:0px; overflow: hidden;}
    .iframeshim {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -10000;}


 
Leave a comment.

Please, keep in mind:

  • Be cool, no smack talk.
  • Basic HTML is allowed in posts.
  • If you like what you read, spread the word!
  • Fields marked with a * are required to post a comment.