概要
このチュートリアルでは、Google マップとサイドバーに KML ファイルの情報を表示する方法について説明します。 マップでの KML ファイルの使用方法に関する詳細については、KML レイヤのガイドをご覧ください。
以下のマップ上のマーカーをクリックすると、サイドバーにデータが表示されます。
以下のセクションに、このチュートリアルでマップとサイドバーを作成するために必要なコード全体を載せています。
var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
/**
* Initializes the map and calls the function that loads the KML layer.
*/
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: 'terrain'
});
loadKmlLayer(src, map);
}
/**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* @param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, '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';
/**
* Initializes the map and calls the function that loads the KML layer.
*/
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: 'terrain'
});
loadKmlLayer(src, map);
}
/**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* @param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, '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>
はじめに
このチュートリアルでマップとサイドバーを作成するには、次のステップを実行します。
インポートする 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
タグの変数です。
次の表は、このセクションのコードについて説明しています。
| コードと説明 | |
|---|---|
|
KML ファイルには、すべての場所マーカーに適用される Style 要素が 1 つあります。
この Style 要素は、#[video] の値を BalloonStyle のテキスト要素に割り当てます。$[x] 形式は、video という名前の Data 要素を検索して、バルーンのテキストとして使用するように
KML パーサーに指示します。 |
|
各 Placemark には ExtendedData
要素が含まれており、これには Data 要素が格納されています。
各 Placemark には、video という name 属性を持つ Data 要素が 1 つずつ存在しています。このチュートリアルのファイルでは、場所マーカーのバルーン テキストとして、埋め込まれた YouTube 動画を使用しています。 |
エンティティ置換の詳細については、KML ドキュメントのカスタムデータの追加の章をご覧ください。
KMLLayer の表示
マップの初期化
次の表は、このセクションのコードについて説明しています。
| コードと説明 | |
|---|---|
|
マップ上に KML を表示するには、まずマップを作成する必要があります。 このコードは、新しい Google マップ オブジェクトを作成し、中心の位置とズームレベルを指定し、マップを div に追加しています。Google マップの基本的な作成方法については、チュートリアルのGoogle マップをウェブサイトに追加する をご覧ください。 |
KMLLayer の作成
次の表は、KMLLayer を作成するコードについて説明しています。
| コードと説明 | |
|---|---|
|
KML を表示するための新しい KMLLayer オブジェクトを作成します。 |
|
KMLLayer コンストラクタで、KML ファイルの URL を設定します。 次の操作を実行する KMLLayer オブジェクトのプロパティも定義します。
このレイヤで使用できるすべてのオプションについては、Google Maps JavaScript API リファレンス ガイド をご覧ください。 |
サイドバーでのデータの表示
このセクションでは、マップ上の地物をクリックしたときに、サイドバーに情報ウィンドウのコンテンツを表示するための設定について説明します。 この操作の手順:
- KMLLayer の地物のクリック イベントをリッスンする。
- クリックされた地物のデータを取得する。
- 取得したデータをサイドバーに書き込む。
イベント リスナーの追加
Google マップは、クリックやキー入力など、マップ上のユーザー イベントをリッスンして対応する関数を提供しています。
この関数は、click イベントなどのリスナーを追加します。
次の表は、このセクションのコードについて説明しています。
| コードと説明 | |
|---|---|
|
この google.maps.event.addListener イベント リスナーは、次の項目に重点を置きます。
イベントの詳細については、デベロッパー ガイドをご覧ください。 |
サイドバーへの KML 地物データの書き込み
チュートリアルのここまでの段階で、レイヤの地物のクリック イベントを取得しました。 これで、地物のデータと情報ウィンドウのコンテンツをサイドバーに書き込むように、アプリケーションを設定できます。
次の表は、このセクションのコードについて説明しています。
| コードと説明 | |
|---|---|
|
情報ウィンドウのコンテンツを変数に書き込みます。 |
|
書き込み先の div を特定し、その領域の HTML を地物のコンテンツで置き換えます。
|
|
これらのコード行が、 addListener
コンストラクタ内の関数になります。
|
マップ上で KML 地物をクリックするたびに、サイドバーが更新され、情報ウィンドウのコンテンツが表示されます。
詳細
KML ファイルの使用に関するページをご覧ください。
ご不明な点がありましたら、Google の