Monday, June 2, 2008

Earth and JavaScript, Together at Last

By now, many of you have heard about the new Google Earth API that we announced Wednesday during Google I/O. It's exciting that you can now enjoy the 3D Google Earth experience in the browser, and you can create your own custom interactive apps on top of it. This new API lets you use JavaScript to programmatically interact with the Earth browser, changing camera views, loading KML or 3D models, or even creating KML objects from scratch.


Here's your basic "Hello Earth" app:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>Hello Google Earth!</title>
<!-- *** Replace the key below below with your own API key, available at http://code.google.com/apis/maps/signup.html *** -->
<script src="http://www.google.com/jsapi?key=abcd"></script>
<script>
google.load("earth", "1");

var ge = null;

function init() {
  google.earth.createInstance("map3d", initCallback, failureCallback);
}

function initCallback(object) {
  ge = object;
  ge.getWindow().setVisibility(true);
}

function failureCallback(object) {
  // Gracefully handle failure.
}
</script>
</head>

<body onload='init()' id='body'>
<center>
 <div>
   Hello, Earth!
 </div>

 <div id='map3d_container'
      style='border: 1px solid silver; height: 600px; width: 800px;'>
   <div id='map3d' style='height: 100%;'></div>
 </div>
</center>

</body>
</html>

And, if you're already a Google Maps API developer, adding Google Earth to your mashup is really easy. Just add the following line:

 map.addMapType(G_SATELLITE_3D_MAP);

To view apps written in the Earth API, you will have to download a browser plug-in. Currently, the plug-in is Windows only, and works on Mozilla and Internet Explorer based browsers, including Firefox. We are working to expand the number of browsers, and have announced Mac and Linux plug-ins will be released in August.

Check out the cool sample apps. If you have any questions or come across any problems, post them in our Earth API developer group.