AJAXのお勉強

Googleマップ kmlファイル読み込み＠AJAX

GGeoXmlを用いて、kmlファイルを読み込み、
オーバレイに追加します。

kmlファイルは、以下です。
東京駅の情報を格納しています。
coordinatesですが、経度と緯度の順となります。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Placemark>
    <name>東京駅</name>
    <description>東京駅です。</description>
    <Point>
    <coordinates>139.767084,35.681099,0 </coordinates>
    </Point>
</Placemark>
</kml>


GGeoXmlにて、kmlファイルを指定します。
GOverlayを実装しているので、オーバレイに追加が行えます。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Googleマップ kmlファイル読み込み</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=****" type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

var map;

function load() {
    if (GBrowserIsCompatible()) {

        map = new GMap2(document.getElementById("map"));
        var point = new GLatLng(35.681099, 139.767084);
        map.setCenter(point, 15);

        //kbml読み込み
        var geoXml = new GGeoXml("http://www.cocoaliz.com/ajax/test.kml");

        //オーバレイ追加
        map.addOverlay(geoXml);
    }
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 400px; height: 400px"></div>
</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.