Google Mapsで住所、緯度・経度を取得。

2012.01.27 / Labs

Google Maps APIを使って、マーカーの位置から住所、緯度・経度を取得と、住所からマーカーの移動および、緯度・経度の取得するためのコードのメモです。
サンプルはこちら

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Google Map Search</title>
<script type="text/javascript" src="common/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="common/js/functions.js"></script>
<script type="text/javascript">
$(function() {
	setMapSearch({
		container: "map",
		lat: 35.68075,
		lng: 139.76720,
		zoom: 15
	});
});
</script>
</head>
<body>



<div id="map" style="width:500px; height:500px;"></div>



<form>
緯度：<input type="text" id="lat"/><br />
経度：<input type="text" id="lng"/><br />
住所：<input type="text" id="address"/>
<input type="submit" id="search" value="検索"/>
</form>



</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Google Map Search</title>

$(function() {

setMapSearch({

container: "map",

lat: 35.68075,

lng: 139.76720,

zoom: 15

});

</script>

</head>

<body>

<form>

緯度：<input type="text" id="lat"/><br />

経度：<input type="text" id="lng"/><br />

住所：<input type="text" id="address"/>

</form>

</body>

</html>

マーカーのドラッグで緯度・経度を書き換えて、ドロップの際に住所を書き換えています。
また住所から検索で、マーカーを移動して、緯度・経度を書き換えています。
JavaScript自体のコードはこちら。

function setMapSearch(params) {
	var geocoder = new google.maps.Geocoder();
	var position = new google.maps.LatLng(params.lat, params.lng);
	var map_options = {
		zoom: params.zoom,
		center: position,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById(params.container), map_options);
	var marker = new google.maps.Marker({
		position: position,
		map: map, 
		draggable: true
	});
	
	//マーカーのドラッグ時
	google.maps.event.addListener(marker, "drag", function() { 
		updateLatLng();
	});
	
	
	//マーカーのドロップ時
	google.maps.event.addListener(marker, "dragend", function() {
		var latlng = marker.getPosition();
		geocoder.geocode({latLng:latlng, language:"ja"}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				if (results[0].geometry) {
					updateAddress(results[0].formatted_address);
				}
			}
		});
	});
	updateLatLng();
	setSearch();
	
	//緯度・経度を書き換え
	function updateLatLng() {
		var latlng = marker.getPosition();
		$("input#lat").val(latlng.lat());
		$("input#lng").val(latlng.lng());
	}
	
	//住所を書き換え
	function updateAddress(address) {
		$("input#address").val(address);
	}
	
	//住所から検索して、マップを移動
	function setSearch() {
		$("input#search").click(function() {
			var address = $("input#address").val();
			geocoder.geocode({"address": address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					map.setCenter(results[0].geometry.location);
					marker.setPosition(results[0].geometry.location);
					updateLatLng();
				}
			});
			return false;
		});
	}
}

function setMapSearch(params) {

var geocoder = new google.maps.Geocoder();

var position = new google.maps.LatLng(params.lat, params.lng);

var map_options = {

zoom: params.zoom,

center: position,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById(params.container), map_options);

var marker = new google.maps.Marker({

position: position,

map: map,

draggable: true

});

//マーカーのドラッグ時

google.maps.event.addListener(marker, "drag", function() {

updateLatLng();

});

//マーカーのドロップ時

google.maps.event.addListener(marker, "dragend", function() {

var latlng = marker.getPosition();

geocoder.geocode({latLng:latlng, language:"ja"}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

if (results[0].geometry) {

updateAddress(results[0].formatted_address);

}

});

updateLatLng();

setSearch();

//緯度・経度を書き換え

function updateLatLng() {

var latlng = marker.getPosition();

$("input#lat").val(latlng.lat());

$("input#lng").val(latlng.lng());

}

//住所を書き換え

function updateAddress(address) {

$("input#address").val(address);

}

//住所から検索して、マップを移動

function setSearch() {

$("input#search").click(function() {

var address = $("input#address").val();

geocoder.geocode({"address": address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

map.setCenter(results[0].geometry.location);

marker.setPosition(results[0].geometry.location);

updateLatLng();

}

});

return false;

});

}