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.googleapis.com/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 = "https://googledrive.com/host/0B1ECfqTCcLE8blRHZVVZM1QtRkE/googlemaps_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>





Search
Books
Google Maps API Programming Guide

Four Google Maps API Experts wrote this book. Introducing useful examples for developers!
See more details