An interactive KML editor is a nice tool for trying things out with Google Earth and it is a good project that exercises your skills at writing Javascript and integrating it all with a web page and a user interface.

If you want to know more about KML before moving on see: KML in Google Maps and Earth and if you want to know more about using Google Earth try: Getting started with Google Earth.

It is assumed that you know how to create a web page complete with Javascript and you have a Key to start using the Google Earth add-in.

The basic script

All we need to is to use some very standard code to load and display the Google Earth object As this is described in Getting started with Google Earth there isn't much point in repeating it all here.

First we have to load the Google Javascript API loader:

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

where of course you replace YourKey with your key.

Next we need to setup some functions that handle the loading of the code. First the init function, which does the actual load of the Earth object:

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

This loads the Earth object into the HTML element with id  map3d and calls initCB if the load is successful and failureCB if it isn't.

These two are simply:

function initCB(instance){
 ge = instance;
 ge.getNavigationControl().
       setVisibility(ge.VISIBILITY_SHOW);
 ge.getWindow().setVisibility(true);
}
 
function failureCB(errorCode){
}

The initCB function also sets the navigation control to be visible and then sets the entire earth map to display.

Finally we just need to make it all happen by loading the API and then arranging to call the Init function when it is loaded and ready to go:

var ge;
 google.load("earth", "1");
 google.setOnLoadCallback(init);

Now we have a standard Google Earth map on display - time to turn our attention to the rest of the user interface.

The User Interface

Creating a user interface with HTML isn't difficult. In this case we need some way for the user to enter some text - the KML  and a button to click when they want to see it rendered on the map.

The text entry is obviously best created using a textarea control - even if this does have some idiosyncrasies and browser differences. We also need to work out how to lay things out. Before using tables for layout went out of fashion a table with two cells one for the text input and one for the map would have been what we used. In more modern times we use divs and float. First we need a Div to define the entire user input area i.e. the text area and the map side-by-side:

<div style="width:620px;height:450px;">

Within this we first have a div to contain the textarea:

<div style="float:left;margin-right:5px;">

notice that this is set to float to the left - which is what it will do by default but it is better to be explicit. Next we have the textarea - with wrap turned off and scrollbars set:

<textarea id="input" wrap="off" style=
 "overflow:scroll;width:300px;height:400px;">

The wrap attribute is non-standard but supported by all the major browsers. The worst thing that can go wrong if a browser doesn't support it is that the text wraps.

It is helpful to enter some default text to initialize the textarea:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
Enter or paste your KML here 
</kml>
 </textarea>

Most browsers don't get confused by HTML or XML tags as the content of a text area. now we can close the textarea div

</div>

and start the div that will contain the map:

<div id="map3d" 
 style="width:300px;height:408px;float:left;">
 </div>

Notice that this also floats left and so as long as the div that contains them is big enough to hold them both horizontally that's precisely what will happen. Also notice that the height is 408 because the textbox with scrollbars is slightly bigger than the 400 pixels specified in its construction. Notice also that it has the id map3d so this is where the map will be displayed.

Finally we need the button:

<input value="Draw KML" 
 id="Button1" 
 type="button" 
 value="button" 
 style="margin:20px;
 " onclick="Button1_onclick()"/>
</div>




	

<ASIN:0471790095>

<ASIN:0470095288>

<ASIN:1593853661>

<ASIN:0470156236>

<ASIN:0321525590>