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>
サイト内検索
Maps APIの本を書きました
Google Maps APIプログラミング入門
全480ページ。Google Maps API ver.2, ver.3, for Flash, Static Maps API v2, Google Maps API Primery, ライセンス…など、Google Maps APIに関連する幅広い内容の本を書きました。
このサイトで公開しているサンプルはもちろん、本のために作ったサンプルも満載です。
詳しくはこちら

Google Maps Designer
Google Maps Designer