Getting started with Google Earth
Written by Ian Elliot   
Friday, 03 September 2010
Article Index
Getting started with Google Earth
Locating places
Placemarks

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 principles behind what looks like a complex API.

 

Banner

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, 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 Aptana Studio 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 do need a key to use Google Earth but the only information you have to supply the domain name of the site that is going to be serving web pages that contain the maps. You also have to agree to Google's terms and conditions. Sign up at:

http://code.google.com/apis/maps/signup.html

and make sure to record your key somewhere safe.

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.

Every page that uses the Map control has to load:

<script src="http://www.google.com/
jsapi?key="Your Key"></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");
google.setOnLoadCallback(init);

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 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.

The complete web page is:

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=iso-8859-1">
<script
src="http://www.google.com/
jsapi?key=Your Key">
</script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
google.setOnLoadCallback(init);

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

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

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

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

 

default

<ASIN:0470095288>

<ASIN:0321525590>

<ASIN:0471790095>

<ASIN:0470381248>

<ASIN:1430216204>

<ASIN:1419689037>

<ASIN:1449502768@COM>

<ASIN:0596101619>



Last Updated ( Friday, 03 September 2010 )
 
 

   
RSS feed of all content
I Programmer - full contents
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.