ヅラッシュ！ by NI-Lab.

Google Maps JavaScript API V3 の google.maps.KmlLayer クラスを使って経路の情報を持つKMLを地図上に表示してみるサンプルを作ってみた。
⇒ KML on Google Maps API using KmlLayer

JavaScript によるコードを一部抜粋。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&hl=ja"></script>
<script type="text/javascript">
function initialize() {
  var opt = {
    mapTypeId : google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), opt);
  var dataUrl = "http://www.nilab.info/f/0/20110830_sample.kml";
  var kmlLayer = new google.maps.KmlLayer(dataUrl);
  kmlLayer.setMap(map);
}
window.onload = initialize;
</script>

KmlLayer は KML だけでなく GeoRSS にも対応しているらしい。

KML レイヤと GeoRSS レイヤ

Google Maps API は、地理情報の表示で KML と GeoRSS データ形式をサポートしています。これらのデータ形式は KmlLayer オブジェクトを使用して地図上に表示されます。このオブジェクトのコンストラクタは一般公開されている KML または GeoRSS ファイルの URL を使用します。

Maps API は、指定された地理 XML データをインメモリ KML 表現に変換し、これは V3 オーバーレイを使用して地図上に表示されます。たとえば、KML Placemark と GeoRSS point 要素は Marker としてレンダリングされ、ポリラインとポリゴンは Google Maps API Polyline と Polygon オブジェクトとしてレンダリングされます。同様に、KML ファイル内の <GroundOverlay> 要素は地図上に GroundOverlay 要素としてレンダリングされます。

KmlLayer オブジェクトは、map プロパティが設定されると地図上に表示されます（setMap() を呼び出して null を渡すと、地図から削除できます）。KmlLayer オブジェクトは、地図の指定された境界に対する該当する対象物を自動的に取得して、これらの子オーバーレイの表示を管理します。境界が変化すると、現在のビューポート内の対象物が自動的にレンダリングされます。

KmlLayer 内のコンポーネントはオンデマンドでレンダリングされるため、レイヤによって多数のマーカー、ポリライン、ポリゴンのレンダリングを簡単に管理できるようになります。これらのオブジェクトには直接アクセスできませんが、各オブジェクトはクリック イベントを提供し、個々のオブジェクトのデータを返します。

Google Maps JavaScript API V3 オーバーレイ - Google Maps JavaScript API V3 - Google Code

Ref.
- KML レイヤと GeoRSS レイヤ - Google Maps JavaScript API V3 オーバーレイ - Google Maps JavaScript API V3 - Google Code
- KmlLayer クラス - Google Maps JavaScript API V3 リファレンス - Google Maps JavaScript API V3 - Google Code

tags: google_maps_api kml

Posted by NI-Lab. (@nilab)