Google Earth Plugin, embedded in Blogger, producing 2 maps

Question

Curious problem whilst embedding a Google Earth network link into Blogger. The code I'm using is as shown below, but I'm getting two instances of GE on the same page, one above the other. They must be getting generated seperately, as if I stick a border into the divs style on the page it only affects one instance.

<div id="map3d" style="border: 4px solid silver; height: 768px; width: 1024px;"></div>

However, if I remove this code from the page entirely. both instances vanish.

Other than that I've got it functioning as I'm wanting. (Eventually)

This is the code I've got in the head section

<!-- Earth -->
<script src="//www.google.com/jsapi?key=mykey"></script>
<script type="text/javascript">
  var ge;
  google.load("earth", "1", {"other_params":"sensor=false"});

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

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

     var href = 'http://urltomykmz';

     google.earth.fetchKml(ge, href, function(kmlObject) {
           if (kmlObject)
              ge.getFeatures().appendChild(kmlObject);
           if (kmlObject.getAbstractView() !== null)
              ge.getView().setAbstractView(kmlObject.getAbstractView());
     });
  }

  function failureCB(errorCode) {
  }

  google.setOnLoadCallback(init);
</script>
<!-- Earth -->

Grateful to anyone who can point to what's causing the second instance. Thanks.

Answer 1

You have to remove either the call to init() in your onload handler or the call to google.setOnLoadCallback(init), otherwise a map will be added every time you call the init function.