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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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;
		});
	}
}