|Getting Started with Google Earth|
|Written by Ian Elliot|
|Tuesday, 08 July 2014|
Page 1 of 3
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 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.
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.
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.
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:
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:
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.
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:
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:
The the simplest initCB function is something like:
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:
If you load this page you should see the default map.
|Last Updated ( Tuesday, 08 July 2014 )|