An Interactive Google Earth KML Editor
Written by Ian Elliot   
Monday, 06 September 2010
Article Index
An Interactive Google Earth KML Editor
Button handler
Page 2 of 2

Banner

The Button handler

Now all that is left is to write the Button1_onclick() function. This has to get the text from the textarea and use it with the parseKML method. First there is one small problem to be taken care of. It is possible that the user might click the button before the Google Earth object is loaded. To stop this happening we can test to see if the ge variable has been set to reference the Earth object:

function Button1_onclick(){
 if(!ge)return;

As long as the ge variable has been initialised we can move on to get the text into a string. There are lots of different ways of doing this and every Javascript programmer has a favourite way, mind is to use the getElementById method:

var KML = document.getElementById('input').value;

Now we have the KML in the KML variable and we can parse to Google Earth objects and display on the map:

 var kmlObject = ge.parseKml(KML);
 ge.getFeatures().appendChild(kmlObject);
}

That's it! All very easy.

The complete listing for the 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=YourKey">
 </script>
 <script type="text/javascript">
 function init(){
  google.earth.createInstance('map3d', 
                      initCB, failureCB);
 }
 
 function initCB(instance){
  ge = instance;
  ge.getNavigationControl().
       setVisibility(ge.VISIBILITY_SHOW);
  ge.getWindow().setVisibility(true);
 }
 
 function failureCB(errorCode){
 }
 
 function Button1_onclick(){
  if(!ge)return;
  var KML = document.getElementById(
                        'input').value;
  var kmlObject = ge.parseKml(KML);
  ge.getFeatures().appendChild(kmlObject);
 }
  
 var ge;
 google.load("earth", "1");
 google.setOnLoadCallback(init);
 </script>
 </head>
 <body>
  <div style="width:620px;height:450px;">
   <div style="float:left;margin-right:5px;">
    <textarea id="input" 
        wrap="off" 
       style="overflow:scroll;
          width:300px;height:400px;">
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
Enter or paste your KML here 
</kml>
    </textarea>
   </div>
   <div id="map3d" 
     style="width:300px;height:408px;
                         float:left;">
   </div>
   <input value="Draw KML" 
       id="Button1" 
       type="button" 
       value="button" 
       style="margin:20px;" 
       onclick="Button1_onclick()"/>
  </div>
 </body>
</html>
 

If you would like to try the web page out go to:

KMLEditor.

For some  XML to try you could copy and paste the second example in the article  KML in Google Maps and Earth listed below:

<Document>
 <name>My Markers</name>
 <Placemark>
 <name>My Marker</name>
 <description> 
 My Marker description
 </description>
 <Style>
 <IconStyle> 
 <Icon>
 <href>
 http://www.i-programmer.info/maps/IP.png
 </href>
 </Icon>
 </IconStyle>
 </Style>
 <Point>
 <coordinates>-1.5,55</coordinates>
 </Point>
 </Placemark>  
 </Document>

demo

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Banner

<ASIN:0789743647>

<ASIN:1430218290>

<ASIN:0470515112>

<ASIN:0470236825>

<ASIN:1430216204>

<ASIN:0596008651>


<< Prev - Next
Last Updated ( Wednesday, 01 August 2018 )