緯度・経度から住所を取得したい (Google Maps API)

Google Mapsの”逆ジオコーディング”ページにサンプルコード付きの解説があった。

  • 住所→緯度・経度:ジオコーディング
  • 緯度・経度→住所:逆ジオコーディング

のよう。
google.maps.Geocoderのgeocodeメソッドで、addressを渡すとジオコーディング、latLngを渡すと逆ジオコーディングされるとのことでお試し。

ボタン押下で現在地周辺の地図を表示:reverse_geocoding.html

var map;
function initialize() {
	var latlng = new google.maps.LatLng(35.658517, 139.701334);
	var myOptions = {
		zoom: 14,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function getAddress() {
	if (navigator.geolocation) {
		function successCallback(position) {
			var currentLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
			map.setCenter(currentLocation);

			var geocoder = new google.maps.Geocoder();
			geocoder.geocode({'latLng': currentLocation}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					for (var i in results) {
						document.getElementById("address").innerHTML += (results[i].formatted_address + "<br />");
					}
				}
				else {
					window.alert("google.maps.GeocoderStatus is not OK. due to " + status);
				}
			});
		}

		function errorCallback(error) {
			var message = "";

			switch (error.code) {
			case error.POSITION_UNAVAILABLE:
				message = "位置情報を取得できませんでした";
				break;

			case error.PERMISSION_DENIED:
				message = "位置情報の取得許可を取得できませんでした";
				break;

			case error.TIMEOUT:
				message = "位置情報を取得中にタイムアウトしました";
				break;
			}

			window.alert(message);
		}

		navigator.geolocation.getCurrentPosition(
			successCallback, errorCallback, {timeout:60000}
		);
	}
	else {
		window.alert("Geolocation APIに対応していません");
	}
}
<body onload="initialize()">
	<div id="map_canvas" style="width: 500px; height: 400px"></div>

	<input type="button" value="現在地周辺の地図表示" onclick="getAddress()">
	<div id="address"></div>
</body>

参考サイト

関連エントリー

  1. Google Maps API 続き
  2. Google Maps API
  3. Geolocation API (JavaScript)
  4. PHPでGoogle Maps APIを利用したい
  5. jQuery mobileでGoogleマップを表示する(jquery-ui-map)
This entry was posted in 未分類 and tagged , . Bookmark the permalink.