First, some background: There is a bug in many modern browsers that causes plugin
objects (not just the Earth plugin) to be destroyed when their containing DOM nodes
or their ancestors are hidden. Internet Explorer isn't affected by this bug.

Now, I've written a temporary workaround that parents the Earth DOM nodes to the
document body and hackishly positions it where it would usually be. The workaround
does nothing in the case of IE, since it isn't affected.

WARNING 1: this is quite a hack; it should only be used temporarily until we have a
long term solution. I'll post a message once the bug is fixed in the API.
WARNING 2: this workaround should only be used on sites affected by the bug mentioned
in this thread, and where no other workaround will do.

The workaround:

1) Add a call to displayNoneWorkaround before createInstance like so:

displayNoneWorkaround('map3d');
google.earth.createInstance('map3d', ...

2) Paste this displayNoneWorkaround method in your code, before your createInstance
is called:

function displayNoneWorkaround(earthNodeID) {
  // IE isn't affected by this bug
  if (navigator.userAgent.toLowerCase().indexOf('msie') < 0) {
    // Firefox, Safari, etc. are affected
    var earthNode = document.getElementById(earthNodeID);
    var earthWatchNode = earthNode.parentNode;
    
    earthNode.style.position = 'absolute';
    earthNode.style.left = earthNode.style.top = '0';
    earthNode.style.width = earthNode.style.height = '0';
    document.body.appendChild(earthNode);
    
    function repositionEarth() {
      earthNode.style.height = earthWatchNode.offsetHeight + 'px';
      earthNode.style.width = earthWatchNode.offsetWidth + 'px';
      
      // calculate position on page
      var left = earthWatchNode.offsetLeft;
      var top = earthWatchNode.offsetTop;
      var p = earthWatchNode.offsetParent;
      
      while (p && p != document.body) {
        if (isFinite(p.offsetLeft) && isFinite(p.offsetTop)) {
          left += p.offsetLeft;
          top += p.offsetTop;
        }
        
        p = p.offsetParent;
      }
      
      earthNode.style.left = left + 'px';
      earthNode.style.top = top + 'px';
    }
    
    repositionEarth();
    
    // reposition every 100ms
    window.setInterval(function() {
      repositionEarth();
    }, 100);
  }
}

Note for the workaround above... the <div> node containing the plugin should be set
up to take up the entire client area of its parent, which should have some nonzero
width and height. For example, this node layout is ideal:

  <div id="map3d_container" style="width: 500px; height: 500px;">
    <div id="map3d" style="height: 100%;"></div>
  </div>

This is just like all of the official samples.

Hi, 
i have integrated the earth plugin in our application with google map, 2d and 3d 
mixed, and have the same problem, only in FF.
Our application toggles the complete map to show or not. If I hide the map, the earth 
plugin is destroyed.

I tryied the workwround here. I can toggle the map div, but l can't use map (default 
sat), clicking and dragging in the map takes no reaktion.

Here are what I did:

1) copy the function displayNoneWorkaround(earthNodeID) at first line
2) add call before create earth instance

var mapDiv = document.getElementById("googleMap");
var map = new google.maps.Map2(mapDiv);

if (isGEInstalled) { 
 displayNoneWorkaround('googleMap');
 map.getEarthInstance(function(ge) {   });
 map.addMapType(G_SATELLITE_3D_MAP);
}

<div id="googleMapContainer" style="width:578px; height:338px;">
	<div id="googleMap" style="height: 100%;"></div>		
</div>

what did I wrong ? thanks for help.

I had could not get it to work either for a while, but what I forgot to do was to
switch the div that I was hiding. 

You should now be hiding the div "googleMapContainer" rather than "googleMap"

Hope this helps

thanks for this workaround - helped a lot. 
However, it seems that it causes problems for content of balloons to be displayed
properly (see attached picture).
I hope there will be a final bug-fix on this one - anyway, the plugin is fantastic.
Cheers.
C. 

	balloon nos showing.jpg 134 KB   View   Download

I am having the same error and not sure what I am doing wrong. I followed all of the
above suggestions. FF's firebug is complaining that "earthNode is null". I am using
JQuery tabs and hiding the "googleMapContainer" div. 

Could someone take a look at my code and offer some suggestions. thanks.

http://www.chrisborkowski.info/view-sketchup-projects/project/13

(No comment was entered for this change.)

Bulk edit.

May I ask when can be solved this issue or if already be solved in newest version? 
thanks 

We also anxiously await a fix! Thanks

Ditto, waiting for a fix.  I tried the workaround, and it did not work for me.  Thanks!

I'm having the same problem.  I am trying to integrate EXT JS as a portal.  FF is
failing at this, but at some points the plug-in fails and at others it doesn't.  For
example, when the window is resized or if one of the controls causes the plug-in to
resize.  But I guess when the control disappears, that the plug-in goes arwy, like
doing a drag and drop or switching tabs, and coming back to the same tab.  But other
times, switching tabs where the plug-in is a portlet, does not fail.  So what is the
behavior that is causing this.  IE has a similar problem when you attempt to drag the
portlet somewhere else.