前回，その1：KML 形式ファイルを作るというのを書いた。今回はその続きで，いよいよ Google Maps API V3 を使って，KML 形式ファイルに記録した移動経路を地図に載せる。ここでは Google Maps API という JavaScript を用いたツールを使って KML ファイルを読み込んで地図上に経路を作成する。作業としては web ページの html ファイルを一個作成する。ここでは html ファイルについてしか書かないが，実際には Perl で自動的にこの html ファイルを作っている。その際に，どの WayPoint に，どの写真を割り当てるか？などの処理をさせている。つまりは，ここを読んだだけではうまくいかないかも？？（なんて無責任…）
以下にあるのが基本となる地図のための html ファイルである。ここでは（この後も）表示の都合で最初の行などの長い行を途中で折り返している。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Route : EXAMPLE</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var ctaLayer = new google.maps.KmlLayer('http://www.xxxx.yyyy.zzz.jp/map_data.kml');
// initialize function
var centerLatLng = new google.maps.LatLng(35.0, 136.5);
function initialize() {
var myOptions = {
zoom: 11,
center: centerLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scaleControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER }
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
ctaLayer.setMap(map);
}
</script>
</head>
<body bgcolor="#D0D0D0" onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
ここで青い字の部分は下記の(4)に相当する JavaScript 部分である。ここでのポイントはというと，
(1) title より前の行は基本的におまじないと思ってそのまま書く。
(2) Google から css ファイルを読み込む。
(3) 同じく Google から http://maps.google.com/maps/api/js?sensor=false として読み込む。
「?」以降もおまじないとして必要らしい。
(4) JavaScript で地図を作る（上記の青字の部分，後で詳しく述べる）
(5) html の <body> 部に onload="initialize()" を入れておく。
これにより，body 部を表示する時に，JavaScript の中の initialize() 関数が実行される。
(6) 地図を表示するための領域を用意する（<div id="map_canvas"></div>の部分）
ここにある id の map_canvas が JavaScript の中にでてくるのがわかる。
さて，一番肝心な JavaScript の部分について見てみよう。
var map;
var ctaLayer = new google.maps.KmlLayer('http://www.xxxx.yyyy.zzz.jp/map_data.kml');
// initialize function
var centerLatLng = new google.maps.LatLng(35.0, 136.5);
function initialize() {
var myOptions = {
zoom: 11,
center: centerLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scaleControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER }
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
ctaLayer.setMap(map);
}
まず，ここでは最初に map と ctaLayer という変数を最初に定義している。実はこれらの変数を定義する場所は通常は（Google の例では）initialize() 関数の中になっている。関数の外で定義するのは（global 変数として定義するのは）あくまで好みなので，気になるようなら Google の例にならってもらえばよいと思う。また，centerLatLng として地図の最初の中心座標を定義している。initialize() 関数では，まず地図のオプション（myOptions）を定義している。この例では zoom を 11 にしている。また center: centerLatLng として地図の中心を指定している。しかし，KML 形式で経路等を指定すると， Google Maps API が KML ファイルを読み込んだ時点で地図の中心や表示範囲を自動で変えるので，これら zoom と center には実質的な意味はないが，念の為に入れておいた。
次に「mapTypeId: google.maps.MapTypeId.ROADMAP,」とあるが，これは地図の種類を表している。ROADMAP は通常の道路地図であり，他にも SATELLITE，HYBRID，TERRAINがあり，それぞれ，航空写真，航空写真上に主要な道路を表示したもの，地形や樹木などの地形的特徴を持つ地図，を表示してくれる。
また，scaleControl を true に設定しておくことで，長さのスケールが地図に表示される（デフォルトでは表示されなかった）。scaleControlのオプションとして，BOTTOM_CENTER が指定してあるが，これは地図の中央下部に長さスケールを表示することを意味している。
これらのオプションの各項目はコンマ「,」でつなぎ，最後のオプションの後ろにだけコンマがない。オプションとオプションの間のコンマがないとエラーになって地図はうまく表示されないのでご注意を。
他にもあるオプションについては地図のオプション（myOptions）を見てみてほしい。
次の行で地図を描いている。単に map という変数に値を代入しているように見えるが，その際に地図の描画も行われる。
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
ここで，地図を描く場所は，map_canvas という id を持つ要素（この場合は web 本体の中の div が map_canvas という id を持っている）であり，直前に定義したオプション myOptions を指定している。そして最後の行で KML ファイルに書かれている内容を，地図に描画している。
ctaLayer.setMap(map);これで何故地図上に KML ファイルの内容が描画されるかというと，JavaScript では変数の種類（クラス）ごとにその変数に対して行える処理がメソッドとして定義されている。ctaLayer は，google.maps.KmlLayer という種類（クラス）の変数であり，このクラスの変数に対しては setMap という作業（メソッド）が定義されていて，その中身は KML 形式のファイルの中身を地図上に描画しろ，というものなので，地図上に経路の線が現れる，ということである。
（その3：アイコン(Marker)の表示に続く）
0 件のコメント:
コメントを投稿