概要
このチュートリアルでは、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>はじめに
このチュートリアルでは、次の手順で地図とサイドバーを作成します。
インポートする 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 タグ内の変数です。
次の表は、このセクションのコードの説明です。
| コードと説明 | |
|---|---|
|
KML ファイルには、すべての目印に適用される単一の Style 要素が含まれています。この Style 要素は、#[video] の値を BalloonStyle のテキスト要素に割り当てます。$[x] フォーマットは KML パーサーに対し、video という名前の Data 要素を検索し、バルーン テキストとして使用するよう指示します。 |
|
各 Placemark には、Data 要素を保持する ExtendedData 要素が含まれます。各 Placemark には、video の名前属性を持つ単一の Data 要素があります。このチュートリアルのファイルでは、各目印のバルーン テキストの値として、埋め込みの YouTube 動画を使用します。 |
エンティティ置換の詳細については、KML に関するドキュメントのカスタムデータの追加をご覧ください。
KMLLayer を表示する
地図を初期化する
次の表は、このセクションのコードの説明です。
| コードと説明 | |
|---|---|
|
KML を地図に表示するには、まず地図を作成する必要があります。 このコードでは、新しい Google マップ オブジェクトを作成し、中心地点とズームレベルを指定して、その地図を div に適用しています。Google マップ作成の基本については、ウェブサイトへの Google マップの追加方法のチュートリアルをご覧ください。 |
KMLLayer を作成する
次の表は、KMLLayer を作成するコードの説明です。
| コードと説明 | |
|---|---|
|
新しい KMLLayer オブジェクトを作成し、KML を表示します。 |
|
KMLLayer コンストラクタで、KML ファイルの URL を設定します。次の操作を実行する KMLLayer オブジェクトのプロパティも定義します。
|
サイドバーにデータを表示する
このセクションでは、地図上の対象物をクリックしたときにサイドバーに情報ウィンドウのコンテンツを表示する設定について説明します。手順は次のとおりです。
- KMLLayer の対象物のクリック イベントをリッスンします。
- クリックされた対象物のデータを取得します。
- 取得したデータをサイドバーに書き込みます。
イベント リスナーの追加
Google マップには、クリックやキーボード操作など、地図上でのユーザー イベントをリッスンして反応する関数があり、このような click イベントに対するリスナーを追加します。
次の表は、このセクションのコードの説明です。
| コードと説明 | |
|---|---|
|
kmlLayer.addListener イベント リスナーでは、以下のものを指定します。
|
KML 対象物データをサイドバーに書き込む
チュートリアルのここまでの段階で、レイヤの対象物に対するクリック イベントをすでに取得しているため、ここでは、対象物のデータと情報ウィンドウのコンテンツをサイドバーに書き込むように、アプリケーションを設定します。
次の表は、このセクションのコードの説明です。
| コードと説明 | |
|---|---|
|
情報ウィンドウのコンテンツを変数に書き込みます。 |
|
書き込み先の div を識別し、その HTML を対象物のコンテンツに置き換えます。 |
|
これらのコードは、 addListener コンストラクタ内の関数になります。
|
これで、地図上の KML 対象物がクリックされるたびに、サイドバーが更新され、情報ウィンドウのコンテンツが表示されます。
詳細
詳しくは、KML ファイルの使用方法をご覧ください。