ぐらめぬ・ぜぷつぇんのはてダ(2007 to 2011)

2007年~2011年ごろまで はてなダイアリー に書いてた記事を引っ越してきました。

GoogleMapで、現在表示中のマップの中心緯度・経度を取得する為のカスタムコントロール


適当にGoogleMapのサンプルとかAPIドキュメント見ながらでっち上げたやつです。GoogleAJAX API経由でロードする方式に併せてます。あと、コードピースですので、実際に組み込む時は自己責任の上で、適宜足りない部分を想像等で補って下さい。

"WhereAmI?"カスタムコントロール

<script type="text/javascript">
<!--
function WhereAmIControl() {}

function build_whereami() {
	WhereAmIControl.prototype = new google.maps.Control();

	WhereAmIControl.prototype.initialize = function(map) {
		var container = document.createElement("div");
		var mainDiv = document.createElement("div");
		mainDiv.style.textDecoration = "underline";
		mainDiv.style.color = "#0000cc";
		mainDiv.style.backgroundColor = "white";
		mainDiv.style.font = "small Arial";
		mainDiv.style.border = "1px solid black";
		mainDiv.style.padding = "2px";
		mainDiv.style.marginBottom = "3px";
		mainDiv.style.textAlign = "center";
		mainDiv.style.width = "6em";
		mainDiv.style.cursor = "pointer";
		container.appendChild(mainDiv);
		mainDiv.appendChild(document.createTextNode("WhereAmI?"));
		google.maps.Event.addDomListener(mainDiv, "click", function() {
			var latlng = map.getCenter();
			void(window.prompt('latitude, longitude', latlng.toUrlValue()));
		});

		map.getContainer().appendChild(container);
		return container;
	}

	WhereAmIControl.prototype.getDefaultPosition = function() {
		return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(7, 20));
	}
}
//-->
</script>

以上のJSコードを適当な箇所に挿入し、google.load()で呼び出しておきます。

// 適当にonloadなイベントに組み込んで下さい。
google.load("maps", "2", {"callback" : build_whereami });

GMap2のコントロールに貼り付けるには、普通にaddControlでOKです。右下から20px程上、著作権表示と被らない辺りに"WhereAmI?"リンクボックスが表示されるようにしてます。リンクをクリックすると、地図の中心座標を「緯度, 経度」の順でpromptで表示しますので、そのままコピペしちゃえます。

google.load("maps", "2", {"callback" : function() {
	if (!google.maps.BrowserIsCompatible()) {
		return;
	}
	var map = new google.maps.Map2(document.getElementById('エレメントのID'));
	map.setCenter(new google.maps.LatLng(lat, lng), zoom);
	map.addControl(new WhereAmIControl());
}});

JavaScript名前空間とかスコープ、めちゃあやふやな頭で書いてますので、注意して下さい。一応WinXPのFirefox2, IE7, Opera9で確認はしてますが・・・。