Display jquery dialog over Google Earth plugin

Question

When my web app initially loads, the goal is to render a jquery ui dialog box over a google earth plugin. However, my current code the dialog box successfully renders over a google earth plugin on Mac OS, but fails on Windows 8. Using Chromium as browser on both OS.

I've read here and here that using an iframe shim or z-indexing might help (not sure how to incorporate this with the jquery dialog), but its not Windows specific and I was also wondering if there is a reason why not using iframe shim or z-indexing still works on Mac? Is there something in particular about Windows that may have a simpler resolution than using shim or z-indexing?

Also, on Windows only, I've noticed that after the google earth plugin renders in its div, there is a hole in the map where I can see the background layer. Any ideas about that?

Code Snippets

HTML snippet

<button id="btn">Open Dialog</button>
<div id='containter'>
  <div id="gEarth" ></div>
</div>
<div id='dialog'></div>

dialog box event listener

(function(window, document) {
$(document).ready(function () {
    $dialog = $('#dialog').html('Dialog Demo...note background of this part renders under gEarth').dialog({
        autoOpen: false,
        height: 350,
        width: 350,
        modal: true,
        title: 'My Dialog'
      });

      $('#btn').click(function () {
          $dialog.dialog('open');
          return false;
      });
  });
})(this, this.document);

load google earth

(function(window, document) {
  var ge;
  google.load("earth", "1", {"other_params":"sensor=true_or_false"});

  function init() {
    google.earth.createInstance('gEarth', initCB, failureCB);
  }

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

  function failureCB(errorCode) {
  }

  google.setOnLoadCallback(init);
  console.log('gEarth initialized.');
})(this, this.document);