KML の表示

概要

このチュートリアルでは、Google マップとサイドバーに KML ファイルの情報を表示する方法を説明します。地図上で KML ファイルを使用する方法について詳しくは、KML レイヤのガイドをご覧ください。以下の地図上のマーカーをクリックすると、サイドバーにデータが表示されます。

以下のセクションに、地図とサイドバーの作成に必要なコード全体を記載しています。

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });

  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  kmlLayer.addListener('click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}
<div id="map"></div>
<div id="capture"></div>
html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 360px;
 width: 300px;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }
<!-- Replace the value of the key parameter with your own API key. -->
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

実際に試す

コード ウィンドウの右上にある <> アイコンをクリックすると、JSFiddle でこのコードを試すことができます。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

はじめに

このチュートリアルでは、次の手順で地図とサイドバーを作成します。

  1. KML ファイルを設定する
  2. KMLlayer を表示する
  3. サイドバーにデータを表示する

インポートする KML ファイルを設定する

KML ファイルは KML 標準に準拠している必要があります。この標準の詳細については、Open Geospatial Consortium のウェブサイトをご覧ください。KML に関する Google のドキュメントでもこの言語について説明しており、デベロッパー向けの参考情報やコンセプトの説明が提供されています。

KML ファイルがなく、学習目的のみで使用する場合は、次のいずれかで対応できます。

  • このチュートリアル用の次の KML ファイルを使用します。

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • ウェブ上で KML ファイルを検索します。Google の検索演算子 filetype を使用できます。

    velodromes の代わりに任意の検索キーワードを使用するか、検索キーワードを省略してすべての KML ファイルを検索することもできます。

ファイルを自作する場合、この例のコードは以下を前提として書かれていることにご注意ください。

  • ファイルがインターネット上でホスティングされ、一般公開されていること。これは、KMLLayer に KML を読み込むすべてのアプリケーションに求められる要件です。Google のサーバーがコンテンツを見つけて取得し、地図上に表示するために必要となります。
  • ファイルがパスワードで保護されていないページ上に存在すること。
  • 対象物には情報ウィンドウのコンテンツが設定されていること。このコンテンツは description 要素に含めるか、ExtendedData 要素とエンティティ置換を使用して含めることができます（詳細は後述）。どちらも対象物の infoWindowHtml プロパティとしてアクセスできます。

ExtendedData 要素

このチュートリアルの KML ファイルでは、ExtendedData 要素に対象物の情報が含まれています。この情報を対象物の説明欄に含めるには、エンティティ置換を使用します。これは基本的には BalloonStyle タグ内の変数です。

次の表は、このセクションのコードの説明です。

コードと説明 
<Style id="west_campus_style">
  <IconStyle>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
    </Icon>
  </IconStyle>
  <BalloonStyle>
    <text>$[video]</text>
  </BalloonStyle>
</Style>

KML ファイルには、すべての目印に適用される単一の Style 要素が含まれています。
この Style 要素は、#[video] の値を BalloonStyle のテキスト要素に割り当てます。
$[x] フォーマットは KML パーサーに対し、video という名前の Data 要素を検索し、バルーン テキストとして使用するよう指示します。		 
<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
          allowfullscreen></iframe><br><br>]]></value>
      </Data>
    </ExtendedData>
    <Point>
      <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
    </Point>
</Placemark>

各 Placemark には、Data 要素を保持する ExtendedData 要素が含まれます。各 Placemark には、video の名前属性を持つ単一の Data 要素があります。
このチュートリアルのファイルでは、各目印のバルーン テキストの値として、埋め込みの YouTube 動画を使用します。

エンティティ置換の詳細については、KML に関するドキュメントのカスタムデータの追加をご覧ください。

KMLLayer を表示する

地図を初期化する

次の表は、このセクションのコードの説明です。

コードと説明 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

KML を地図に表示するには、まず地図を作成する必要があります。
このコードでは、新しい Google マップ オブジェクトを作成し、中心地点とズームレベルを指定して、その地図を div に適用しています。
Google マップ作成の基本については、ウェブサイトへの Google マップの追加方法のチュートリアルをご覧ください。

KMLLayer を作成する

次の表は、KMLLayer を作成するコードの説明です。

コードと説明 
var kmlLayer = new google.maps.KmlLayer();

新しい KMLLayer オブジェクトを作成し、KML を表示します。		 
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

KMLLayer コンストラクタで、KML ファイルの URL を設定します。次の操作を実行する KMLLayer オブジェクトのプロパティも定義します。
  • クリック時に情報ウィンドウを表示しないようにレイヤに指示します。
  • レイヤのコンテンツの境界ボックスに中心を設定してズームするように地図に指示します。
  • 先ほど作成したマップ オブジェクトに地図を設定します。
Maps JavaScript API リファレンス ガイドには、このレイヤで利用可能なすべてのオプションが記載されています。
HTML ファイルを読み込み、基本地図上にレイヤとして KML ファイルのコンテンツを表示します。ただし、どの対象物をクリックしてもまだ何も起こりません。

サイドバーにデータを表示する

このセクションでは、地図上の対象物をクリックしたときにサイドバーに情報ウィンドウのコンテンツを表示する設定について説明します。手順は次のとおりです。

  • KMLLayer の対象物のクリック イベントをリッスンします。
  • クリックされた対象物のデータを取得します。
  • 取得したデータをサイドバーに書き込みます。

イベント リスナーの追加

Google マップには、クリックやキーボード操作など、地図上でのユーザー イベントをリッスンして反応する関数があり、このような click イベントに対するリスナーを追加します。

次の表は、このセクションのコードの説明です。

コードと説明 
kmlLayer.addListener('click', function(event) {});

kmlLayer.addListener イベント リスナーでは、以下のものを指定します。
  • リッスンするイベントのタイプ。このチュートリアルでは、click イベントをリッスンします。
  • イベントが発生したときに呼び出す関数。
イベントについて詳しくは、デベロッパー ガイドをご覧ください。

KML 対象物データをサイドバーに書き込む

チュートリアルのここまでの段階で、レイヤの対象物に対するクリック イベントをすでに取得しているため、ここでは、対象物のデータと情報ウィンドウのコンテンツをサイドバーに書き込むように、アプリケーションを設定します。

次の表は、このセクションのコードの説明です。

コードと説明 
var content = event.featureData.infoWindowHtml;

情報ウィンドウのコンテンツを変数に書き込みます。 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

書き込み先の div を識別し、その HTML を対象物のコンテンツに置き換えます。		 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

これらのコードは、addListener コンストラクタ内の関数になります。

これで、地図上の KML 対象物がクリックされるたびに、サイドバーが更新され、情報ウィンドウのコンテンツが表示されます。

詳細

詳しくは、KML ファイルの使用方法をご覧ください。