Google Maps API v3でKMLをロードする(geoxml3.js編)
geoxml3 ライブラリは、Google Maps API v3でKMLファイルをロードすることができます。
【使い方】
- SVNを用いてダウンロードし、geoxml3.js と ProjectedOverlay.js を同じ階層に設置します。
- <script src="geoxml3.js"></script> でライブラリをインポートします。
- var myParser = new geoXML3.parser({map : map});
myParser.parse(kmlUrl);
geoXML3.parserメソッドでmapを指定し、geoXML3.parse()メソッドでKMLファイルのURLを指定するだけで読み込めます。
追記(2010/5/14):Google Maps API v3でも標準でKMLがサポートされました。
使い方は、Google Maps API v3でKMLをロードする(KMLLayer編)を参考にしてください。
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false&hl=ja"></script>
<script src="geoxml3/geoxml3.js"></script>
<script type="text/javascript">
function initialize() {
var initPos = new google.maps.LatLng(35.127152, 138.910627);
var myOptions = {
noClear : true,
center : initPos,
zoom : 5,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var kmlUrl = "http://googlemaps.googlermania.com/uploads/kmlsample3.kml";
var myParser = new geoXML3.parser({map : map_canvas});
myParser.parse(kmlUrl);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:500px"></div>
</body>
</html>


