地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]

都道府県別に集められた地点データ群を使って、以下のようなページをつくらなければならなくなりました。

とある目的で収集された地点データを扱います
地点データはXML形式で渡されます
地点データをgooglemap上にマーカーとして表示させます
マーカーをクリックすると地点データがふきだし（情報ウィンドウというらしい）で表示されます（名前など）
現在表示されている地点データの名前を、地図の外にリストとして表示します
リストに表示された名前をクリックしたら、該当地点のマーカーのふきだしが表示されます

単純に地図を表示するだけなら触った事がありますが、GoogleMapsAPIを使って色々やるのは初めてです。
GoogleMapsAPIを調べながらゴリゴリと書いていきます。

GoogleMapsAPIVersion3で地図を表示する

まずはコレができないと話になりません。
さっさと済ませます。

Google Maps API Version3 日本語ドキュメント(非公式)
http://sites.google.com/site/gmapsapi3/Home/google-maps-version3introduction

ここにサンプルコードが落ちているので、拾ってきてもろもろ調整してさくっと表示させます。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var map;
	function initialize() {
		var latlng = new google.maps.LatLng(34.985458, 135.757755);
		var myOptions = {
			zoom: 8,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	}

</script>
</head>
<body onload="initialize()">
	<div id="map_canvas" style="width:600px; height:600px"></div>
</body>
</html>

→動作サンプル

5行目のAPIを呼び出すところは、必ずtrueまたはfalseである必要があります。（私は、最初はサンプルをそのまま貼り付けてエラーを出しました。バカですね…。）

9行目の地図中央座標の設定のところ。サンプルの座標ではオーストラリアの端っこが表示されます。
やるからには身近な場所を表示させたいので、地元京都の中心、「京都駅」の座標に変えておきました。
些細ですが、重要なところ…だと思ってます。個人的に。

7行目と15行目。サンプルでは、7行目がなく、15行目が

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

となっていました。
これだと他の関数とかから呼べません。後々支障が出てくるので、外に放り出しておきました。

21行目。サンプルでは地図が画面全体に表示されます。いくらなんでも大きすぎなので、600px四方にしておきました。

サンプルからの変更点はそれくらいです。
毎度簡単ですね。

かつては、地図を掲載しようと思えばデザイナとかが書き起こしてたりしてましたけど、コレが登場してからどこもGoogleMapを貼っるようになりました。
ストリートビューとかも登場した今では…お手軽になりました。

緯度経度の取得

地図を表示が表示できたので、今度は現在表示されている地図の中央の緯度経度を表示させたいところです。
そこは天下のGoogleMaps。

var mapcenter = map.getCenter();

と書けばmapcenterに　(35.010517, 135.759638)　のようにさくっと緯度経度データが入ります。
スゴイ便利です。

ここからを取り出すには

mapcenterlng = mapcenter.lng(); //経度
mapcenterlat = mapcenter.lat(); //緯度

と書けば、ちゃんとそれぞれの数字を取得する事が出来ます。

ちなみに現在表示されている地図がどこからどこまで表示さているか知りたいときは、

var bounds = map.getBounds();

と書けば、現在表示されている地図の領域が、北西端および東南端の緯度経度という形でboundsに入ります。
便利ですねー。

boundsには
((35.009528409470235, 135.75762634323883), (35.011505578581605, 135.76164965676116))
といった値が返ってきます。
これも以下のように書いてやると

var bounds = map.getBounds();
map_ne_lat = bounds.getNorthEast().lat();
map_sw_lat = bounds.getSouthWest().lat();
map_ne_lng = bounds.getNorthEast().lng();
map_sw_lng = bounds.getSouthWest().lng();

もうさっくりと簡単に値がとれます。
ああ便利。

地図の下に緯度経度を表示するテキストフィールドを作って、ボタンを押せば、地図中央の緯度経度情報が表示されるように仕込みます。
地図表示のdivの下に

<div>
	経度<input type="text" size="20" id="ido" value="" />
	緯度<input type="text" size="20" id="keido" value="" />
	<input type="button" value="地図中央の緯度経度" onclick="getMapcenter()" onkeypress="getMapcenter()" />
<div>

を追加して、緯度経度表示用のテキストフィールドとボタンを設置して、

//地図中央の緯度経度を表示
function getMapcenter() {
	//地図中央の緯度経度を取得
	var mapcenter = map.getCenter();

	//テキストフィールドにセット
	document.getElementById("keido").value = mapcenter.lng();
	document.getElementById("ido").value = mapcenter.lat();
}

表示処理を追記します。
出来上がったのがこちら。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var map;
	var marker_ary = new Array();
	function initialize() {
		var latlng = new google.maps.LatLng(34.985458, 135.757755);
		var myOptions = {
			zoom: 8,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	}

	//地図中央の緯度経度を表示
	function getMapcenter() {
		//地図中央の緯度経度を取得
		var mapcenter = map.getCenter();

		//テキストフィールドにセット
		document.getElementById("keido").value = mapcenter.lng();
		document.getElementById("ido").value = mapcenter.lat();
	}

	//地図の中央にマーカー
	function setMarker() {
		var mapCenter = map.getCenter();

		//マーカー削除
		MarkerClear();

		//マーカー表示
		MarkerSet(mapCenter.lat(),mapCenter.lng());
	}
</script>
</head>
<body onload="initialize()">
	<div id="map_canvas" style="width:600px; height:600px"></div>
	<div>
		経度<input type="text" size="20" id="ido" value="" />
		緯度<input type="text" size="20" id="keido" value="" />
		<input type="button" value="地図中央の緯度経度" onclick="getMapcenter()" onkeypress="getMapcenter()" />
	<div>
</body>
</html>

→動作サンプル

無事動きました。
むちゃくちゃ簡単。Googleさんありがとう。

参考サイト
http://sites.google.com/site/gmapsapi3/Home/services
http://alfa.way-nifty.com/blog/2010/04/googlemap-v3-3-.html

気ままにWeb