Page 1 of 2
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.
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.
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:
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:
ge = instance;
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:
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:
Within this we first have a div to contain the textarea:
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=
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"?>
Enter or paste your KML here
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
and start the div that will contain the map:
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"