Google Earth is more capable than Google Maps, but to use it you have to download a plug-in and learn a new API. This article explains that it's not so difficult and there are some easy to understand principles behind what looks like a complex API.

Google Earth doesn't share much of its API with its smaller brother Google Maps, but it does take the same overall approach of using an object-oriented Javascript interface. If you want to know how to use Google Maps then see Getting started with Google Maps.

Google Maps can be considered to be a lightweight mapping option - it works in the browser without an add-in and it's very suitable for mobile use.

Google Earth is an add-in application that allows you to view the satellite imagery in 3D. Google Earth is fun but it involves installing a download and this can put users off and it is overkill for many web and mobile applications. However if you can tolerate having to download a browser add-in as part of your application then it has lots of additional features that Google Maps can't match.

Getting started

You don't need to download anything more than the Earth plug in fo rthe browser you are using, unless you want to run the Google Earth desktop application, to get started but you do need a web development environment. 

If you already have a web site and the necessary tools you can just use them. If not then I can recommend NetBeans as a good free starting point but you can use Microsoft's Web Developer Express or Eclipse or even just a simple text editor to create the HTML and Javascript.

You no longer need a developer key to use Google Earth and this makes getting started much easier. However if you plan to avoid Google advertising or if you want to charge for access to your app you need to contact Google for a full commercial licence. .

Your first Earth-enabled web page

If you are using an IDE start a new Empty Web site and add an HTML page called Emap.

The whole principle of using the Google Earth add-in control is that you load a Javascript library which you then use to create and manipulate the Map control.This is a multi-step procedure but it once you have set it up you can use it for any page that used Google Earth.

This first example follows the naming conventions used in Google's documentation. If you already know how to get the Google API up and running skip to the next page. 

Every page that uses the Map control has to load:

<script src="http://www.google.com/jsapi>
</script>

Now that we have the Google Earth script loaded we can start to create and initialise a Earth object.

First we create a global variable to hold the reference to the Earth object and load the APIs needed to use it:

<script type="text/javascript">
var ge;
google.load("earth", "1",
       {"other_params": "sensor=false"});
google.setOnLoadCallback(init);

The sensor property is used to tell Earth the the device that it is running on has GPS or not. For a first example it is easier not to use GPS for the users location. 

The final instruction sets the function that you want the Google framework to call when it is loaded. In this case the function is init and this is what we have to write next.

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

This asks for the map to be loaded into the HTML container with the id specified - map3d in this case - and sets two callback functions initCB which is called if everything works and failureCB which is called if there is an error.

The error handling function for a demo page can be as simple as:

function failure(errorCode) {
}

The initCB function is where you write the initialisation and customisation code for the map. We also need an HTML object to act as a container for the map. This is usually a Div be this isn't essential:

<div id="map3d" style="height: 400px;
                       width: 600px;">
</div>

The the simplest initCB function is something like:

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

Notice that this is where the Earth object instance is returned and stored in the global variable ge.

After this the getWindow method is use to display the map set to the default location. If you see:

Then you need to install the plugin. 

If you want to use the Earth object from within other functions - say a button click to move to a specified location then you need to set a state variable within initCB  to show when the object is loaded - see later. If you don't do this the user could click on your button before ge is set to the Earth object and your app would crash.

The complete web page is:

<!DOCTYPE html>
<html>
 <head>
 <title>Earth</title>
 <meta charset="UTF-8">
 <meta name="viewport"
  content="width=device-width,
  initial-scale=1.0">
 <script type="text/javascript"
    src="https://www.google.com/jsapi">
 </script>
 <script type="text/javascript">
  var ge;
  google.load("earth", "1",
          {"other_params": "sensor=false"});
  google.setOnLoadCallback(init);

  function init() {
   google.earth.createInstance(
                   'map3d', initCB, failureCB);
  }
 
  function initCB(instance) {
   ge = instance;
   ge.getWindow().setVisibility(true);
  }

  function failureCB(errorCode) {
  }
  </script>
 </head>
 <body>
  <div id="map3d"
      style="height: 400px;
              width: 600px;">
  </div>
 </body>
</html>

If you load this page you should see the default map.

<ASIN:0470095288>

<ASIN:0321525590>

<ASIN:0471790095>

<ASIN:0470381248>

<ASIN:1430216204>

<ASIN:1419689037>

<ASIN:1449502768@COM>

<ASIN:0596101619>