title: how to display tile layers in google earth api?
body: <p>I am creating an interactive map for a non profit association "Friends of Knox Mountain Park" but I am getting trouble with the Google Earth view.</p>
  
  <p>This is the project: <a href="http://www.virtualbc.ca/knoxmountain/" rel="nofollow">http://www.virtualbc.ca/knoxmountain/</a></p>
  
  <p>and this is the code associated to google map's code:</p>
  
  <pre><code>google.load('earth', '1');
  var map;
  var googleEarth;
  
  var gmarkers = [];
  
  var iconShadow = new google.maps.MarkerImage('icons/shadow.png',
        // The shadow image is larger in the horizontal dimension
        // while the position and offset are the same as for the main image.
  new google.maps.Size(46, 42),
  new google.maps.Point(0,0),
  new google.maps.Point(13, 42));
  
  var sites = [
  ['1',49.905305,-119.491191, 37, '&lt;img src="images/parking.jpg" /&gt;','parking'],
  ['2',49.905842,-119.481927, 36, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['3',49.907366,-119.490439, 35, '&lt;img src="images/shelter.jpg" /&gt;','shelter'],
  ['4',49.907878,-119.491058, 34, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['5',49.908405,-119.491083, 33, '&lt;img src="images/parking.jpg" /&gt;','parking'],
  ['6',49.910402,-119.492423, 32, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['7',49.911380,-119.480236, 31, '&lt;img src="images/shelter.jpg" /&gt;','shelter'],
  ['9',49.911389,-119.480571, 30, '&lt;img src="images/playground.jpg" /&gt;','playground'],
  ['a',49.911417,-119.485104, 29, '&lt;img src="images/shelter.jpg" /&gt;','shelter'],
  ['b',49.911578,-119.479905, 28, '&lt;img src="images/parking.jpg" /&gt;','parking'],
  ['8',49.911656,-119.480227, 27, '&lt;img src="images/picnic.jpg" /&gt;','picnic'],
  ['c',49.91174271,-119.48507050, 26, '&lt;a href="vtours/apex_trail_shelter/index.html?iframe=true&amp;width=88%&amp;height=98%" rel="prettyPhoto"&gt;&lt;img src="images/apex_point_high.jpg" /&gt;&lt;/a&gt;','icon'],
  ['d',49.911916,-119.485581, 25, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['e',49.912234,-119.485175, 24, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['f',49.912662,-119.485008, 23, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['g',49.91286999,-119.48413424, 22, '&lt;a href="vtours/apex_trail_1/index.html?iframe=true&amp;width=88%&amp;height=98%" rel="prettyPhoto"&gt;&lt;img src="images/apex_point_low.jpg" /&gt;&lt;/a&gt;','icon'],
  ['h',49.913207,-119.482843, 21, '&lt;img src="images/parking.jpg" /&gt;','parking'],
  ['i',49.914174,-119.472531, 20, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['j',49.914445,-119.482013, 19, '&lt;img src="images/information.jpg" /&gt;','information'],
  ['k',49.914687,-119.482042, 18, '&lt;img src="images/washroom.jpg" /&gt;','washroom'],
  ['l',49.914747,-119.482432, 17, '&lt;img src="images/shelter.jpg" /&gt;','shelter'],
  ['m',49.914814,-119.483070, 16, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['n',49.915162,-119.482393, 15, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['o',49.916277,-119.481530, 14, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['p2',49.919028,-119.479564, 13, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['p',49.919065,-119.478622, 12, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['q',49.91971281,-119.47954356, 11, '&lt;a href="vtours/gordon_trail_1/index.html?iframe=true&amp;width=88%&amp;height=98%" rel="prettyPhoto"&gt;&lt;img src="images/gordon_trail_1.jpg" /&gt;&lt;/a&gt;','icon'],
  ['r',49.919778,-119.479044, 10, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['s',49.920243,-119.480118, 9, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['t',49.922075,-119.481165, 8, '&lt;img src="images/viewpoint.jpg" /&gt;','viewpoint'],
  ['u',49.924514,-119.478223, 7, '&lt;img src="images/swim.jpg" /&gt;','swimming'],
  ['v',49.924599,-119.477396, 6, '&lt;img src="images/washroom.jpg" /&gt;','washroom'],
  ['w',49.924867,-119.477636, 5, '&lt;img src="images/picnic.jpg" /&gt;','picnic'],
  ['x',49.925053,-119.477334, 4, '&lt;img src="images/picnic.jpg" /&gt;','picnic'],
  ['y',49.925211,-119.476506, 3, '&lt;img src="images/picnic.jpg" /&gt;','picnic'],
  ['z',49.925446,-119.476789, 2, '&lt;img src="images/swim.jpg" /&gt;','swimming'],
  ['z2',49.92555541,-119.47710250, 1, '&lt;a href="vtours/paul_tomb_bay_1/index.html?iframe=true&amp;width=88%&amp;height=98%" rel="prettyPhoto"&gt;&lt;img src="images/tomb_bay.jpg" /&gt;&lt;/a&gt;','icon']
  ];
  
  
  var infowindow = null;
  
  var overlay;
  
  // Used to make Google Map quard coords to MapCruncher/BingMaps quard coords    
  function TileToQuadKey ( x, y, zoom)
  {
      var quad = "";
      for (var i = zoom; i &gt; 0; i--)
      {
          var mask = 1 &lt;&lt; (i - 1);
          var cell = 0;
          if ((x &amp; mask) != 0)
              cell++;
          if ((y &amp; mask) != 0)
              cell += 2;
          quad += cell;
      }
      return quad;
  }
  
  function init() {
      var centerMap = new google.maps.LatLng(49.909671,-119.482241);
  
      var myOptions = {
          zoom: 10,
          center: centerMap,
          mapTypeId: google.maps.MapTypeId.SATELLITE
      }
  
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
          // Create the tile layers     
  
      // ASTER Tile Layer  
      myASTEROptions = {
       getTileUrl : function (a,b) { 
  return  "http://www.virtualbc.ca/knoxmountain/map/" + TileToQuadKey(a.x,a.y,b) + ".png"; 
  },
       isPng: true,
       opacity: 1.0,
       tileSize: new google.maps.Size(256,256),
       name: "ASTER",
       minZoom:13,
       maxZoom:20
       }
  
      ASTERMapType = new google.maps.ImageMapType( myASTEROptions );
      map.overlayMapTypes.insertAt(0, ASTERMapType);
  
       // Aerial Tile Layer  
      myAerialOptions = {
       getTileUrl : function (a,b) { 
  return  "http://www.virtualbc.ca/knoxmountain/map/" + TileToQuadKey(a.x,a.y,b) + ".png"; 
  },
       isPng: true,
       opacity: 1.0,
       tileSize: new google.maps.Size(256,256),
       name: "Aerial",
       minZoom:15,
       maxZoom:21
       }
  
     AerialMapType = new google.maps.ImageMapType( myAerialOptions );
     map.overlayMapTypes.insertAt(1, AerialMapType);
  
      var panorama = new google.maps.StreetViewPanorama(map.getDiv()); 
      panorama.setVisible(false); 
      panorama.set('enableCloseButton', true); 
      map.setStreetView(panorama); 
      panorama.setPosition(centerMap); 
  
      setMarkers(map, sites);     
      setZoom(map, sites);
  
      infowindow = new google.maps.InfoWindow({
          content: "Loading..."
      });
  
      googleEarth = new GoogleEarth(map);
  
      google.maps.event.addListenerOnce(map, 'tilesloaded', addOverlays);
  
  }
  
  
  /*
  This functions sets the markers (array)
  */
  function setMarkers(map, markers) {
      for (var i = 0; i &lt; markers.length; i++) {
          var site = markers[i];
          var siteLatLng = new google.maps.LatLng(site[1], site[2]);
  
          var marker = new google.maps.Marker({
              position: siteLatLng,
              map: map,
              title: site[0],
              zIndex: site[3],
              html: site[4],
              // Markers drop on the map
              animation: google.maps.Animation.DROP,
              icon: 'http://www.virtualbc.ca/knoxmountain/icons/'+site[5]+'.png',
              shadow: iconShadow
          });
  
          gmarkers.push(marker);
  
          google.maps.event.addListener(marker, "click", function () {
              infowindow.setContent(this.html);
              infowindow.open(map, this);
          });
      }
  }
  
  /*
  Set the zoom to fit comfortably all the markers in the map
  */
  function setZoom(map, markers) {
      var boundbox = new google.maps.LatLngBounds();
      for ( var i = 0; i &lt; markers.length; i++ )
      {
        boundbox.extend(new google.maps.LatLng(markers[i][1], markers[i][2]));
      }
      map.setCenter(boundbox.getCenter());
      map.fitBounds(boundbox);
  }
  
  // This function picks up the click and opens the corresponding info window
  
  function myclick(i) {
      google.maps.event.trigger(gmarkers[i-1], "click");
  //  gmarkers[i].setAnimation(null);
  //  gmarkers[i-1].setAnimation(google.maps.Animation.BOUNCE);
  //  value = i-1;
  }
  
  google.maps.event.addDomListener(window, 'load', init);
  </code></pre>
  
  <p>The questions:</p>
  
  <ul>
  <li><p>How to make the tiles visible in Google Earth API?</p></li>
  <li><p>or how to display a KML file <strong>ONLY</strong> in Google Earth Tab?</p></li>
  <li><p>is there any way to run code only when Google Earth Tab is selected?</p></li>
  </ul>
  
  <p>Thanks in advance.</p>