入力した住所から地図を表示する！google.maps.Geocoder

2012/04/02

入力した住所から緯度・経度を取得（ジオコーディング）して地図表示するJavaScriptサンプルを作ってみました。結構大雑把な住所を入れても正しく判定してくれたりします。

うまく取得できない場合は、町名までとかアバウトな位置になります。住所にビル名などが入っているとそうなる傾向があるようです。

var map;
var geocoder;

function initialize() {
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(35.7102688, 139.811146);
	var map_options = {
		zoom: 12,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById(&quot;gmap&quot;), map_options);
}

function setLocation() {
	var address = document.getElementById("address").value; // 入力された住所
	if (geocoder) {
		// ジオコーディング
		geocoder.geocode({"address" : address}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location); // 地図の中心を移動
			}
		});
	}
}

テキストボックスに住所を入力して、「移動」ボタンを押します。

<body onload="initialize()">
	<input type="text" value="" id="address">
	<input type="button" value="移動" onclick="setLocation()">
	<div id="gmap" style="width: 400px; height: 400px;"></div>
</body>

サンプル

GoogleMap APIではなくYOLP（地図）を使っていますが、住所から地図表示、地図から住所情報表示などができるツール「地図から住所情報取得ツール」を作成してみました。(2012/08/20追加)

JavaScriptGoogleMapsAPI,Geocoder,地図,住所,JavaScript