KML レイヤと GeoRSS レイヤ

概要
KML レイヤのオプション
KML 地物の詳細

KmlLayer は、KML 要素と GeoRSS 要素を Maps API V3 タイルオーバーレイにレンダリングします。

概要

Google Maps API は、地理情報を表示するために KML および GeoRSS データ形式をサポートします。これらのデータ形式は、KmlLayer オブジェクトを使用してマップ上に表示されます。このオブジェクトのコンストラクタは公開されてアクセス可能な KML または GeoRSS ファイルの URL を受け取ります。

注:KML ドキュメントの KML サポートのページをお読みください。ここには、サポート対象要素およびサイズと複雑さの制限に関する情報が記載されています。

Maps API は、提供された地理 XML データを KML 表現に変換します。これが、V3 タイルオーバーレイを使用してマップ上に表示されます。この KML は、通常の V3 オーバーレイ要素と外見が（動作もいくぶん）似ています。KML <Placemark> および GeoRSS point 要素は、マーカーとしてレンダリングされます。たとえば、<LineString> 要素はポリラインとしてレンダリングされ、<Polygon> 要素はポリゴンとしてレンダリングされます。同様に、<GroundOverlay> 要素はマップ上で矩形画像としてレンダリングされます。ただし、これらのオブジェクトは Google Maps API の Markers、Polylines、Polygons または GroundOverlays ではなく、マップ上の単一のオブジェクトにレンダリングされていることに注意してください。

KmlLayer オブジェクトは、その map プロパティが設定されるとマップ上に表示されます。setMap() を呼び出して null を渡すと、オブジェクトをマップから除去できます。KmlLayer オブジェクトは、マップの所定の範囲に対して適切な地物を自動的に取得することで、これらの子要素のレンダリングを管理します。範囲が変更されると、現在のビューポート内の地物が自動的にレンダリングされます。

KmlLayer 内のコンポーネントはオンデマンドでレンダリングされるため、レイヤを使用することで多数のマーカー、ポリライン、およびポリゴンのレンダリングの管理が容易になります。これらの構成要素オブジェクトに直接アクセスすることはできませんが、それぞれのオブジェクトには、これらの個別のオブジェクト上のデータを返すクリックイベントがあります。

KML レイヤのオプション

KmlLayer() コンストラクタは、オプションで多数のKmlLayerOptions を渡します。

map は、KmlLayer をレンダリングする Map を指定します。setMap() メソッド内でこの値を null に設定すると、KmlLayer を非表示にできます。
preserveViewport は、レイヤの表示時にマップが KmlLayer のコンテンツの領域に合わせて調節されないようにします。デフォルトでは、KmlLayer の表示時に、マップはレイヤのコンテンツ全体が表示されるようにズームと位置決めが行われます。
suppressInfoWindows は、KmlLayer 内のクリック可能な地物が InfoWindow オブジェクトの表示をトリガーしないようにします。

さらに、KmlLayer がレンダリングされると、レイヤの名前、説明、スニペットおよび作成者を含む変更不能な metadata プロパティが KmlLayerMetadata オブジェクトリテラル内に含まれます。この情報は、getMetadata() メソッドを使用して確認できます。KmlLayer オブジェクトのレンダリングには外部サーバーへの非同期通信が必要であるため、プロパティが指定されたことを示す metadata_changed イベントのリッスンが必要となります。

次の例では、指定された GeoRSS フィードから KmlLayer を構築しています。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 49.496675, lng: -102.65625}
  });

  var georssLayer = new google.maps.KmlLayer({
    url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
  });
  georssLayer.setMap(map);
}

GeoRSS の例を見る

次の例では、指定された KML フィードから KmlLayer を構築しています。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 41.876, lng: -87.624}
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: map
  });
}

KML の例を見る

KML 地物の詳細

KML には多数の地物が含まれている場合があるため、KmlLayer オブジェクトから直接地物データにアクセスすることはできません。代わりに、地物が表示されるときに、クリック可能な Maps API オーバーレイのように見えるようにレンダリングされます。デフォルトでは、個々の地物をクリックすると、該当する地物に関する KML <title> および <description> 情報を含む InfoWindow が表示されます。また、KML 地物をクリックすると、KmlMouseEvent が生成されます。これにより、次の情報が渡されます。

position は、KML 地物の InfoWindow が固定されている緯度/経度座標を示します。この位置は、通常はポオリジンリゴン、ポリラインおよび GroundOverlay のクリック位置ですが、マーカーの場合は実際のオリジンです。
pixelOffset は、InfoWindow の「尾」の部分を固定する上記の position からのオフセットを示します。ポリゴンオブジェクトの場合、このオフセットは通常 0,0 ですが、マーカーの場合はマーカーの高さが含まれます。
featureData には、KmlFeatureData の JSON 構造が含まれます。

次に、KmlFeatureData オブジェクトの例を示します。

{
  author: {
    email: "[email protected]",
    name: "Mr Nobody",
    uri: "http://example.com"
  },
  description: "description",
  id: "id",
  infoWindowHtml: "html",
  name: "name",
  snippet: "snippet"
}

次の例では、KML 地物がクリックされたときに地物の <Description> テキストがサイドの <div> 内に表示されます。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 37.06, lng: -95.68}
  });

  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml',
    suppressInfoWindows: true,
    map: map
  });

  kmlLayer.addListener('click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content-window');
    sidediv.innerHTML = text;
  }
}

KML の例を見る

KML レイヤと GeoRSS レイヤ

概要

KML レイヤのオプション

KML 地物の詳細

フィードバックを送信...