「サテライト」画面でローマのバチカンを写してみました。サンピエトロ寺院の形が鮮明にわかります。
前回取り上げたAPI Documentaionに用意されている６つのコントロールの中から、上の図では以下の三つを表示してあります。
- GSmallMapControl - 小型のズームと位置移動コントロール。地図の左上に表れる。
- GScaleControl - 地図のスケール（縮尺）
- GMapTypeControl - 地図のタイプを切り替えるコントロール（地図表記、サテライト、デュアル）
緯度経度を表示するには
さて、上の図の下の部分には、新たに地図の緯度経度を表示させてあります。地図上の地点の正確な緯度経度を知ることができると、後にマーカーを地図に打つ際に非常に便利になります。今回は、この緯度経度の表示の埋め込み方について検討しましょう。
またも、まずは細かい説明は抜きにして、ｈｔｍｌタグに下の赤字の部分を追加してみましょう。今回は、二ヵ所です。
|
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(35.660373, +139.729260), 17);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<div id="message"></div>
</body>
</html>
|
|
うまく行けば、これで地図の下の部分に緯度経度の表示が出てくるはずです。
最初の赤字の数行は、地図上で"moveend"イベントが起きたときにGEvent.AddListenerを使ってgetCenter()で地図の中心緯度経度を獲得して変数"center"に代入し、その数値を"document.getElementById("message").innerHTML = center.toString();"の行によって"message"という名前のidに用意しておくと解釈できます。下にある赤字の一行は、その"message"というidを具体的に表示するための行です。このように解釈できるものの、プログラミングについて私もあまり深入りするつもりはありませんので、とりあえず上の赤字の部分は、
- 最初の数行が、"moveend"イベントすなわち新しい位置への地図の移動が終わったときに、緯度経度の数値を獲得して"message"というidに用意するための式。
- 下の一行が、具体的に"message"を表示するためのタグ。
という程度にとどめておきましょう。したがって、最後の部分を下のようにひっくり返して書けば、緯度経度の表示は地図の上に出てくるのです。
|
<body onload="load()" onunload="GUnload()">
<div id="message"></div>
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
|
|
最後に、例えば下のように書くと、地図上にマウスを置くと地図の中心部の緯度経度が表示され、離すと"Try again!"の表示が出るようになります。これは、"mouseover"と"mouseout"のイベントが起きたときにGEvent.AddListenerがそれぞれ発動する式です。イベントについての詳細は、"Google Maps API Version 2"の中の"classGmap2"以下を参照してください（英語）。
|
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, "mouseover", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
GEvent.addListener(map, "mouseout", function() {
document.getElementById("message").innerHTML = "Try again!"
});
map.setCenter(new GLatLng(35.660373, +139.729260), 17);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<div id="message"></div>
</body>
</html>
|
|
