Google Mapsは地図上に自由に表示できるアイテムとして、マーカーとポリライン（直線）とウィンドウが用意されています。この三つを組み合わせれば、多彩なデータベースを作ることができるでしょう。まずは、マーカーから見ていきましょう。
マーカーの基本スクリプト
以下のスクリプトで、マーカーを地図上に打つことができます。この変数と数値を変えて追加していけば、地図上にマーカーが増えていきます。マーカーだけならば実は１つの変数でも書けるのですが、後のウィンドウ表示を用意するために、２変数にしておきます。
|
var 変数a = new GLatLng( 緯度 , 経度 );
var 変数b = new GMarker( 変数a );
map.addOverlay( 変数b );
|
|
変数の名前はアルファベットと英数字の組合せで自由に設定できますが、Javaプログラミングのルールとして（１）
冒頭に数字を置いてはならない（たとえば"01marker"は不可）（２）
プログラムが用意している若干の言語は使えない（たとえば、"for"や"var"は使えない）の制約があります。
例として、二つのマーカーを地図上に打つタグを書きました。一つのマーカーに二つの変数を用意して、都合四つの変数（"point1"、"marker1"、"point2"、"marker2"）を用意しています。このタグの中のGoogle Mapsには、以下の機能を付けています。
- GSmallMapControl（小型のズームと位置移動コントロール）、GScaleControl（地図のスケール）、GMapTypeControl（地図のタイプを切り替えるコントロール）の三つのコントロールを付けています。（赤字の部分）
- 緯度経度を下に表示しています。
- 中心位置は、京都府大山崎町天王山のふもと。ズームは１４段階。
マーカーのために今回付け加えた部分は、赤色で示しています。
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxxxxxxxxxxxxxxxxxxxxxxxxx"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
map.setCenter(new GLatLng(34.903671401859576, 135.6913661956787), 14);
var point1 = new GLatLng(34.9144141335787, 135.69767475128174);
var marker1 = new GMarker(point1);
map.addOverlay(marker1);
var point2 = new GLatLng(34.89346406486655, 135.68012237548828);
var marker2 = new GMarker(point2);
map.addOverlay(marker2);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<table bgcolor="#8d878f" cellspacing="5"><tr><td>
<table bgcolor="#c8b4cb"><tr><td width="520">
<div align="center"><font size="5" color="blue">GoogleMapで世界旅行をしようではないか。</font></div><p>
<table><tr><td width="10"></td><td>
― つかいかた ―<br>
<font size="1">
・ドラッグすれば、地図がグリグリ移動します。<br>
・ダブルクリックすれば、クリックした地点に地図の中心点が移動します。<br>
・左上のコントロールで、ズームと移動ができます。<br>
・右上の「マップ」を選択すれば地図に、「サテライト」を選択すれば衛星写真に切り替わります。<p>
<div id="map" style="width: 500px; height: 450px"></div>
<div id="message"></div>
<br>
<font size="1">*ネッシー、イェティ、UMA、野人、サスカッチ、飛行中のICBM、エルヴィス・プレスリーなどを発見した場合には、あなたの判断で当局に届けるかどうか決めてください。</font>
<br>
</td<td width="10"></td></tr>
</table>
</td></tr></table>
</td></tr></table>
</body>
</html>
|
|
このようになるわけです。今回の最も簡単なスクリプトでは、Googleがデフォルトで用意するマーカーが呼び出されます。たとえば自作のマーカーを表示する場合には、サーバー内に画像ファイルを用意した上で、追加のスクリプトが必要となります。それは、次回で検討しましょう。
上のようにマーカーを書き加えていく際に、緯度経度の表示が役に立ちます。Google Mapsの上で目当ての地点をダブルクリックして、目当ての地点を地図の中心に移動させます。そして表示されている緯度経度（まさしく地図の中心点です）を反転させて右クリックでコピーして、数値をスクリプトに貼り付ければよいのです。
