how to use kml file in my code..

Question

i download a kml file :

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2"&gt;
  <Document>
    <Style id="transGreenPoly">
      <LineStyle>
        <width>1.5</width>
      </LineStyle>
      <PolyStyle>
        <color>7d00ff00</color>
      </PolyStyle>
    </Style>
    <Style id="transYellowPoly">
      <LineStyle>
        <width>1.5</width>
      </LineStyle>
      <PolyStyle>
        <color>7d00ffff</color>
      </PolyStyle>
    </Style>
    <Style id="transRedPoly">
      <LineStyle>
        <width>1.5</width>
      </LineStyle>
      <PolyStyle>
        <color>7d0000ff</color>
      </PolyStyle>
    </Style>
    <Style id="transBluePoly">
      <LineStyle>
        <width>1.5</width>
      </LineStyle>
      <PolyStyle>
        <color>7dff0000</color>
      </PolyStyle>
    </Style>
    <Folder>
      <name>Placemarks</name>
      <open>0</open>
      <Placemark>
        <name>Simple placemark</name>
        <description>Attached to the ground. Intelligently places itself at the height of the
          underlying terrain.</description>
        <Point>
          <coordinates>-122.0822035425683,37.42228990140251,0</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Descriptive HTML</name>
        <description><![CDATA[Click on the blue link!<br/><br/>
Placemark descriptions can be enriched by using many standard HTML tags.<br/>
For example:
<hr/>
Styles:<br/>
<i>Italics</i>, 
<b>Bold</b>, 
<u>Underlined</u>, 
<s>Strike Out</s>, 
subscript<sub>subscript</sub>, 
superscript<sup>superscript</sup>, 
<big>Big</big>, 
<small>Small</small>, 
<tt>Typewriter</tt>, 
<em>Emphasized</em>, 
<strong>Strong</strong>, 
<code>Code</code>
<hr/>
Fonts:<br/> 
<font color="red">red by name</font>, 
<font color="#408010">leaf green by hexadecimal RGB</font>
<br/>
<font size=1>size 1</font>, 
<font size=2>size 2</font>, 
<font size=3>size 3</font>, 
<font size=4>size 4</font>, 
<font size=5>size 5</font>, 
<font size=6>size 6</font>, 
<font size=7>size 7</font>
<br/>
<font face=times>Times</font>, 
<font face=verdana>Verdana</font>, 
<font face=arial>Arial</font><br/>
<hr/>
Links: 
<br/>
<a href="http://earth.google.com/"&gt;Google Earth!</a>
<br/>
 or:  Check out our website at www.google.com
<hr/>
Alignment:<br/>
<p align=left>left</p>
<p align=center>center</p>
<p align=right>right</p>
<hr/>
Ordered Lists:<br/>
<ol><li>First</li><li>Second</li><li>Third</li></ol>
<ol type="a"><li>First</li><li>Second</li><li>Third</li></ol>
<ol type="A"><li>First</li><li>Second</li><li>Third</li></ol>
<hr/>
Unordered Lists:<br/>
<ul><li>A</li><li>B</li><li>C</li></ul>
<ul type="circle"><li>A</li><li>B</li><li>C</li></ul>
<ul type="square"><li>A</li><li>B</li><li>C</li></ul>
<hr/>
Definitions:<br/>
<dl>
<dt>Google:</dt><dd>The best thing since sliced bread</dd>
</dl>
<hr/>
Centered:<br/><center>
Time present and time past<br/>
Are both perhaps present in time future,<br/>
And time future contained in time past.<br/>
If all time is eternally present<br/>
All time is unredeemable.<br/>
</center>
<hr/>
Block Quote:
<br/>
<blockquote>
We shall not cease from exploration<br/>
And the end of all our exploring<br/>
Will be to arrive where we started<br/>
And know the place for the first time.<br/>
<i>-- T.S. Eliot</i>
</blockquote>
<br/>
<hr/>
Headings:<br/>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h3>Header 4</h4>
<h3>Header 5</h5>
<hr/>
Images:<br/>
<i>Remote image</i><br/>
<img src="http://code.google.com/apis/kml/documentation/googleSample.png"&gt;&lt;br/&gt;
<i>Scaled image</i><br/>
<img src="http://code.google.com/apis/kml/documentation/googleSample.png" width=100><br/>
<hr/>
Simple Tables:<br/>
<table border="1" padding="1">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
</table>
<br/>]]></description>
        <Point>
          <coordinates>-122,37,0</coordinates>
        </Point>
      </Placemark>
    </Folder>
    <Folder>
      <name>Google Campus - Polygons</name>
      <open>0</open>
      <description>A collection showing how easy it is to create 3-dimensional buildings</description>
      <Placemark>
        <name>Building 40</name>
        <styleUrl>#transRedPoly</styleUrl>
        <Polygon>
          <extrude>1</extrude>
          <altitudeMode>relativeToGround</altitudeMode>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates> -122.0848938459612,37.42257124044786,17
                -122.0849580979198,37.42211922626856,17 -122.0847469573047,37.42207183952619,17
                -122.0845725380962,37.42209006729676,17 -122.0845954886723,37.42215932700895,17
                -122.0838521118269,37.42227278564371,17 -122.083792243335,37.42203539112084,17
                -122.0835076656616,37.42209006957106,17 -122.0834709464152,37.42200987395161,17
                -122.0831221085748,37.4221046494946,17 -122.0829247374572,37.42226503990386,17
                -122.0829339169385,37.42231242843094,17 -122.0833837359737,37.42225046087618,17
                -122.0833607854248,37.42234159228745,17 -122.0834204551642,37.42237075460644,17
                -122.083659133885,37.42251292011001,17 -122.0839758438952,37.42265873093781,17
                -122.0842374743331,37.42265143972521,17 -122.0845036949503,37.4226514386435,17
                -122.0848020460801,37.42261133916315,17 -122.0847882750515,37.42256395055121,17
                -122.0848938459612,37.42257124044786,17 </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>Building 41</name>
        <styleUrl>#transBluePoly</styleUrl>
        <Polygon>
          <extrude>1</extrude>
          <altitudeMode>relativeToGround</altitudeMode>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates> -122.0857412771483,37.42227033155257,17
                -122.0858169768481,37.42231408832346,17 -122.085852582875,37.42230337469744,17
                -122.0858799945639,37.42225686138789,17 -122.0858860101409,37.4222311076138,17
                -122.0858069157288,37.42220250173855,17 -122.0858379542653,37.42214027058678,17
                -122.0856732640519,37.42208690214408,17 -122.0856022926407,37.42214885429042,17
                -122.0855902778436,37.422128290487,17 -122.0855841672237,37.42208171967246,17
                -122.0854852065741,37.42210455874995,17 -122.0855067264352,37.42214267949824,17
                -122.0854430712915,37.42212783846172,17 -122.0850990714904,37.42251282407603,17
                -122.0856769818632,37.42281815323651,17 -122.0860162273783,37.42244918858723,17
                -122.0857260327004,37.42229239604253,17 -122.0857412771483,37.42227033155257,17
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>Building 42</name>
        <styleUrl>#transGreenPoly</styleUrl>
        <Polygon>
          <extrude>1</extrude>
          <altitudeMode>relativeToGround</altitudeMode>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates> -122.0857862287242,37.42136208886969,25
                -122.0857312990603,37.42136935989481,25 -122.0857312992918,37.42140934910903,25
                -122.0856077073679,37.42138390166565,25 -122.0855802426516,37.42137299550869,25
                -122.0852186221971,37.42137299504316,25 -122.0852277765639,37.42161656508265,25
                -122.0852598189347,37.42160565894403,25 -122.0852598185499,37.42168200156,25
                -122.0852369311478,37.42170017860346,25 -122.0852643957828,37.42176197982575,25
                -122.0853239032746,37.42176198013907,25 -122.0853559454324,37.421852864452,25
                -122.0854108752463,37.42188921823734,25 -122.0854795379357,37.42189285337048,25
                -122.0855436229819,37.42188921797546,25 -122.0856260178042,37.42186013499926,25
                -122.085937287963,37.42186013453605,25 -122.0859428718666,37.42160898590042,25
                -122.0859655469861,37.42157992759144,25 -122.0858640462341,37.42147115002957,25
                -122.0858548911215,37.42140571326184,25 -122.0858091162768,37.4214057134039,25
                -122.0857862287242,37.42136208886969,25 </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
      <Placemark>
        <name>Building 43</name>
        <styleUrl>#transYellowPoly</styleUrl>
        <Polygon>
          <extrude>1</extrude>
          <altitudeMode>relativeToGround</altitudeMode>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates> -122.0844371128284,37.42177253003091,19
                -122.0845118855746,37.42191111542896,19 -122.0850470999805,37.42178755121535,19
                -122.0850719913391,37.42143663023161,19 -122.084916406232,37.42137237822116,19
                -122.0842193868167,37.42137237801626,19 -122.08421938659,37.42147617161496,19
                -122.0838086419991,37.4214613409357,19 -122.0837899728564,37.42131306410796,19
                -122.0832796534698,37.42129328840593,19 -122.0832609819207,37.42139213944298,19
                -122.0829373621737,37.42137236399876,19 -122.0829062425667,37.42151569778871,19
                -122.0828502269665,37.42176282576465,19 -122.0829435788635,37.42176776969635,19
                -122.083217411188,37.42179248552686,19 -122.0835970430103,37.4217480074456,19
                -122.0839455556771,37.42169364237603,19 -122.0840077894637,37.42176283815853,19
                -122.084113587521,37.42174801104392,19 -122.0840762473784,37.42171341292375,19
                -122.0841447047739,37.42167881534569,19 -122.084144704223,37.42181720660197,19
                -122.0842503333074,37.4218170700446,19 -122.0844371128284,37.42177253003091,19
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
      </Placemark>
    </Folder>
    <Folder>
      <name>LineString</name>
      <open>0</open>
      <Placemark>
        <LineString>
          <tessellate>1</tessellate>
          <coordinates> -112.0814237830345,36.10677870477137,0 -112.0870267752693,36.0905099328766,0
          </coordinates>
        </LineString>
      </Placemark>
    </Folder>
    <Folder>
      <name>GroundOverlay</name>
      <open>0</open>
      <GroundOverlay>
        <name>Large-scale overlay on terrain</name>
        <description>Overlay shows Mount Etna erupting on July 13th, 2001.</description>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/etna.jpg&lt;/href&gt;
        </Icon>
        <LatLonBox>
          <north>37.91904192681665</north>
          <south>37.46543388598137</south>
          <east>15.35832653742206</east>
          <west>14.60128369746704</west>
        </LatLonBox>
      </GroundOverlay>
    </Folder>
    <Folder>
      <name>ScreenOverlays</name>
      <open>0</open>
      <ScreenOverlay>
        <name>screenoverlay_dynamic_top</name>
        <visibility>0</visibility>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/dynamic_screenoverlay.jpg&lt;/href&gt;
        </Icon>
        <overlayXY x="0" y="1" xunits="fraction" yunits="fraction"/>
        <screenXY x="0" y="1" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <size x="1" y="0.2" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
      <ScreenOverlay>
        <name>screenoverlay_dynamic_right</name>
        <visibility>0</visibility>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/dynamic_right.jpg&lt;/href&gt;
        </Icon>
        <overlayXY x="1" y="1" xunits="fraction" yunits="fraction"/>
        <screenXY x="1" y="1" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <size x="0" y="1" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
      <ScreenOverlay>
        <name>Simple crosshairs</name>
        <visibility>0</visibility>
        <description>This screen overlay uses fractional positioning to put the image in the exact
          center of the screen</description>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/crosshairs.png&lt;/href&gt;
        </Icon>
        <overlayXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
        <screenXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
        <size x="0" y="0" xunits="pixels" yunits="pixels"/>
      </ScreenOverlay>
      <ScreenOverlay>
        <name>screenoverlay_absolute_topright</name>
        <visibility>0</visibility>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/top_right.jpg&lt;/href&gt;
        </Icon>
        <overlayXY x="1" y="1" xunits="fraction" yunits="fraction"/>
        <screenXY x="1" y="1" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <size x="0" y="0" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
      <ScreenOverlay>
        <name>screenoverlay_absolute_topleft</name>
        <visibility>0</visibility>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/top_left.jpg&lt;/href&gt;
        </Icon>
        <overlayXY x="0" y="1" xunits="fraction" yunits="fraction"/>
        <screenXY x="0" y="1" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <size x="0" y="0" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
      <ScreenOverlay>
        <name>screenoverlay_absolute_bottomright</name>
        <visibility>0</visibility>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/bottom_right.jpg&lt;/href&gt;
        </Icon>
        <overlayXY x="1" y="-1" xunits="fraction" yunits="fraction"/>
        <screenXY x="1" y="0" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <size x="0" y="0" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
      <ScreenOverlay>
        <name>screenoverlay_absolute_bottomleft</name>
        <visibility>0</visibility>
        <Icon>
          <href>http://code.google.com/apis/kml/documentation/bottom_left.jpg&lt;/href&gt;
        </Icon>
        <overlayXY x="0" y="-1" xunits="fraction" yunits="fraction"/>
        <screenXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
        <size x="0" y="0" xunits="fraction" yunits="fraction"/>
      </ScreenOverlay>
    </Folder>
  </Document>
</kml>

and my code is :

function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        var center=new GLatLng(39.9493, 116.3975);
        map.setCenter(center, 13);
        var geoXml = new GGeoXml("SamplesInMaps.kml");
            <!--Place KML on Map -->
            map.addOverlay(geoXml);
    }
}

but ,i don't successful ,,

do you know how to do this..

thanks

this is the html file:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes">

    </head>
<body onload="initialize()" onunload="GUnload()">

<style type="text/css">
*{
    margin:0;
    padding:0;
    }
.b{
    background:url(img/xr.png) right no-repeat;
    }
.b > div{
    width:30px;
    height:31px;
    background:url(img/xpinIcon.png) 0 0 no-repeat;
    }
</style>
<!--<div style="width:100px;height:100px;background:blue;"> </div>-->
<div id="map_canvas" style="width: 500px; height: 300px;"></div>


<div class=b style="position:absolute;left:700px;top:200px;">
    <div></div>
</div>
<div class=b style="position:absolute;left:700px;top:200px;">
    <div></div>
</div>

<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&amp;sensor=false"type="text/javascript"&gt;&lt;/script&gt;

<script type="text/javascript">
var aFn;
//**********
function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        var geoXml = new GGeoXml("SamplesInMaps.kml");
            map.addOverlay(geoXml);
        var center=new GLatLng(-122.0822035425683,37.42228990140251);
        map.setCenter(center, 0);


aFn=function(x,y){

            var point =new GPoint(x,y)
            point = map.fromContainerPixelToLatLng(point);
            //console.log(point.x+"   "+point.y)
            map.addOverlay(new GMarker(point));


/**********

        var marker = new GMarker(point, {draggable: true});

        GEvent.addListener(marker, "dragstart", function() {
        map.closeInfoWindow();
        });

        GEvent.addListener(marker, "dragend", function() {
        marker.openInfoWindowHtml("正在反弹...");
        });
        map.addOverlay(marker);
        */
    }
$(".b").draggable({
    revert: true,
    revertDuration: 0
    });
$("#map_canvas").droppable({
drop: function(event,ui) {
    //console.log(ui.offset.left+'   '+ui.offset.top)
    aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top);
    }
});
}
}
//*************



</script>
</body>
</html>

---

updated

i make a simple kml file "b.kml":

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2"&gt;
  <Placemark>
    <name>Simple placemark</name>
    <description>Attached to the ground. Intelligently places itself 
       at the height of the underlying terrain.</description>
    <Point>
      <coordinates>-122.0822035425683,37.42228990140251,0</coordinates>
    </Point>
  </Placemark>
</kml>

and the map code is :

var map = new GMap2(document.getElementById("map_canvas"));
var g = new GGeoXml("b.kml");
            map.addOverlay(g);
            var center=new GLatLng(37.42228990140251,-122.0822035425683);
map.setCenter(center, 0);

but ,it show nothing(the map is ok )..

why?

thanks

Answer 1

Your Google Maps API code is correct. Unforuntatly Google Maps only supports a limited set of KML so not all features are supported, and Google Earth is more flexible so it might support KML that Google Maps won't understand.

You can try the following to check that your Maps API code is correct:

var g = new GGeoXml("http://tagzania.com/rss/user/blogwatcher/7wonders%2Bnew/");
map.addOverlay(g);

In addition, note that the setCenter() in your HTML file appears to be using an inverted latitude and longitude. It should probably be:

var center = new GLatLng(37.42228990140251, -122.0822035425683);