以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

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 defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

実際に試す

コードブロックの右上にカーソルを合わせて、コードをコピーするか、コードを JSFiddl で開きます。

<!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 defer
    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 のウェブサイトをご覧ください。

Google の KML ドキュメントでもこの言語について説明し、リファレンスとデベロッパー ドキュメントを提供しています。

KML ファイルがなく、学習目的のみで使用する場合は、次のいずれかを実行してください。

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

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml
    
  • ウェブ上で KML ファイルを探す。 Google の filetype 検索演算子を使用できます。

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

ファイルを自作する場合、この例のコードの前提条件は次のとおりです。

  • ファイルはインターネット上でホスティングされ、一般公開されています。 Google のサーバーがコンテンツを見つけて取得し、マップ上に表示できるようにするため、この要件は KML を KMLLayer に読み込むすべてのアプリケーションに適用されます。

  • ファイルはパスワードで保護されていないページ上に存在します。

  • 地物には情報ウィンドウのコンテンツが設定されています。 このコンテンツは、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 要素が 1 つあります。
この Style 要素は、#[video] の値を BalloonStyle のテキスト要素に割り当てます。
$[x] 形式は、video という名前の Data 要素を検索して、バルーンのテキストとして使用するように KML パーサーに指示します。
<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 には ExtendedData 要素が含まれており、これには Data 要素が格納されています。 各 Placemark には、video という name 属性を持つ Data 要素が 1 つずつ存在しています。
このチュートリアルのファイルでは、場所マーカーのバルーン テキストとして、埋め込まれた 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();

KML を表示するための新しい KMLLayer オブジェクトを作成します。
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 オブジェクトのプロパティも定義します。

  • クリックしたときに情報ウィンドウを表示しないようにレイヤに指示する。
  • レイヤのコンテンツの境界ボックスに中心を設定してズームするようにマップに指示する。
  • 作成済みの Map オブジェクトにマップを設定する。

このレイヤで使用できるすべてのオプションについては、Google Maps JavaScript API リファレンス ガイド をご覧ください。

HTML ファイルを読み込み、ベースマップ上にレイヤとして KML ファイルのコンテンツを表示します。 ただし、どの地物をクリックしてもまだ何も起こりません。

サイドバーでのデータの表示

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

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

イベント リスナーの追加

Google マップは、クリックやキー入力など、マップ上のユーザー イベントをリッスンして対応する関数を提供しています。 この関数は、click イベントなどのリスナーを追加します。

次の表は、このセクションのコードについて説明しています。

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

この google.maps.event.addListener イベント リスナーは、次の項目に重点を置きます。

  • リッスンするオブジェクト。 このチュートリアルでは、kmlLayer オブジェクトです。
  • リッスンするイベントのタイプ。 このチュートリアルでは、click イベントです。
  • イベントが発生したときに呼び出す関数。

イベントの詳細については、デベロッパー ガイドをご覧ください。

サイドバーへの KML 地物データの書き込み

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

次の表は、このセクションのコードについて説明しています。

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

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

書き込み先の div を特定し、その領域の HTML を地物のコンテンツで置き換えます。

google.maps.event.addListener(kmlLayer, 'click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

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

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

詳細

KML ファイルの使用に関するページをご覧ください。

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

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。