JavaScriptでGoogle Maps APIを挿入 クリックでイベント発生
Googleマップサンプル集
でいろいろ遊んでみた。
マップをクリックすると、緯度、経度、ズームレベルが表示される。
作成したHTML文書はこちら
。
以下にソースの説明をしていきます。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Google map</title>
<script src="http://maps.google.com/maps?
file=api&v=2&sensor=false&key=
ABQIAAAAJXYwFgs3R54rlXBVQrZ-
QRSQX0zcyHiuBBtvLf60RI8qT6jGRBQ
Gp1BCIcxnSAnD57RevlOVEHHbMQ"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
var x = 35.186225462776335;
var y = 136.8989610671997;
var z = 13;
map.setCenter(new GLatLng(x, y), z);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
GEvent.addListener(map,"click", function(overlay,latlng) {
↑
マップでイベントが起こったらfunction部分を実行。latlngには緯度経度、overlayはmarker、InfoWindow等(?)の情報が入る。mapをmarkerにすればmarkerでイベントが起こったら、clickをmoveendにすればmapの移動が終わったらと言う条件になる。
if (overlay) {
// ignore if we click on the info window
return;
}
var tileCoordinate = new GPoint();
var tilePoint = new GPoint();
var currentProjection = G_NORMAL_MAP.getProjection();
tilePoint = currentProjection.fromLatLngToPixel(latlng, map.getZoom());
↑
G.NORMAL.MAPは通常地図(G.SATELLITE.MAPは航空写真。G_HYBRID.MAPは地図+航空写真。)getProjectionで投影を手に入れて、fromLatLngToPixel(latlng, map.getZoom())で地図座標とズームレベルでピクセル座標を割り出す。
戻り値はGPoint();になっているので、変数定義はvar tilePoint = new GPoint();とする。
tileCoordinate.x = Math.floor(tilePoint.x / 256);
tileCoordinate.y = Math.floor(tilePoint.y / 256);
↑
tilePointにピクセル座標が入っているので256分割してタイル化（？）する。
var myHtml = "緯度: " + tilePoint.x + "<br/>経度: " + tilePoint.y + "<br/>タイル座標は<br/> x: " + tileCoordinate.x + "<br/> y: " + tileCoordinate.y + "<br/>ズームレベルは " + map.getZoom() + "です。<br/>ピクセル位置は " + map.fromLatLngToDivPixel(latlng) +"<br/>緯度:"+latlng.lat()+"<br/>経度: "+latlng.lng();
↑
表示されている地図を基点として地図座標からピクセル座標を割り出す。
map.openInfoWindow(latlng, myHtml);
});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
<p id=aa>a</p>
<p id=bb>b</p>
</body>
</html>
Google Maps APIリファレンス
の読み方から理解しないといけない。。
難しいが、こういうものだと思ってやっていこう。。
詳細は下記を参照願います。
http://www.d3.dion.ne.jp/~jkondou/javascript/index.htm
PS.
宝探しゲームをアップしました。やってみてください。
http://www.ylw.mmtr.or.jp/~jkondou/takara/rpgtakarasagashi.cgi?hint=7