makotoworld/maps_geocoding.html

## gistfile1.txt
http://hampom.humming-code.com/google-map-api-v3/
http://hampom.wordpress.com/2010/03/03/google-maps-apiv3-%E3%81%A7%E4%BD%8F%E6%89%80%E3%81%8B%E3%82%89%E5%9C%B0%E5%9B%B3%E3%81%AB%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%82%92%E7%BD%AE%E3%81%8F%EF%BC%81/

## maps_geocoding.html

<!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" dir="ltr" lang="ja">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Google Maps API(v3) で住所から地図にマーカーを置く サンプル！ &laquo;  hampom TODAY</title>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja" charset="UTF-8"></script>

<script type="text/javascript">
$(document).ready(function() {
  var mapdiv = document.getElementById('map_canvas');
  var geocoder = new google.maps.Geocoder();
  var org_lat = $("#lat").val();
  var org_lng = $("#lng").val();

  var point = new google.maps.LatLng(org_lat, org_lng);
  var myOptions = {
      zoom: 16,
      center: point,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scaleControl: true
  };

  var map = new google.maps.Map(mapdiv, myOptions);
  var marker = new google.maps.Marker({
      position: point,
      map: map,
      draggable: true
  });

  google.maps.event.addListener(marker, 'dragend', function() {
      var p = marker.position;
      $("#lat").val(p.lat());
      $("#lng").val(p.lng());
  });

  $("#getad").click(function() {

    var sad = $("#address").val();
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode({ 'address': sad}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {

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

        var p = marker.position;
        $("#lat").val(p.lat());
        $("#lng").val(p.lng());
      } else {
        alert("住所から場所を特定できませんでした。最初にビル名などを省略し、番地までの検索などでお試しください。");
      }
    });

    return false;

  });
});

</script>

<style type="text/css">
#map_canvas {
  width: 600px;
  height: 371px;
}
</style>

</head>

<body>
<form>
<label class="label">住所</label>
<input type="text" name="address" id="address" value="" />

<label class="label">地図表示位置</label>
緯度: <input type="text" name="lat" id="lat" value="35.6585873" />
経度: <input type="text" name="lng" id="lng" value="139.7454247" />

<button id="getad">住所から取得</button>
</form>

<div id="map_canvas"></div>

<p>
  こちらの「Google Maps API(v3) で住所から地図にマーカーを置く」に関しては、以下のブログ記事のサンプルです。
</p>
<p>
  <a href="http://hampom.wordpress.com/2010/03/03/google-maps-apiv3-%E3%81%A7%E4%BD%8F%E6%89%80%E3%81%8B%E3%82%89%E5%9C%B0%E5%9B%B3%E3%81%AB%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%82%92%E7%BD%AE%E3%81%8F%EF%BC%81/">Google Maps API(v3) で住所から地図にマーカーを置く</a>
</p>
</body>
</html>
	http://hampom.humming-code.com/google-map-api-v3/
	http://hampom.wordpress.com/2010/03/03/google-maps-apiv3-%E3%81%A7%E4%BD%8F%E6%89%80%E3%81%8B%E3%82%89%E5%9C%B0%E5%9B%B3%E3%81%AB%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%82%92%E7%BD%AE%E3%81%8F%EF%BC%81/

	<!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" dir="ltr" lang="ja">
	<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Google Maps API(v3) で住所から地図にマーカーを置くサンプル！ « hampom TODAY</title>

	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("jquery", "1.3.2");</script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja" charset="UTF-8"></script>

	<script type="text/javascript">
	$(document).ready(function() {
	var mapdiv = document.getElementById('map_canvas');
	var geocoder = new google.maps.Geocoder();
	var org_lat = $("#lat").val();
	var org_lng = $("#lng").val();

	var point = new google.maps.LatLng(org_lat, org_lng);
	var myOptions = {
	zoom: 16,
	center: point,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	scaleControl: true
	};

	var map = new google.maps.Map(mapdiv, myOptions);
	var marker = new google.maps.Marker({
	position: point,
	map: map,
	draggable: true
	});

	google.maps.event.addListener(marker, 'dragend', function() {
	var p = marker.position;
	$("#lat").val(p.lat());
	$("#lng").val(p.lng());
	});

	$("#getad").click(function() {

	var sad = $("#address").val();
	var geocoder = new google.maps.Geocoder();

	geocoder.geocode({ 'address': sad}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {

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

	var p = marker.position;
	$("#lat").val(p.lat());
	$("#lng").val(p.lng());
	} else {
	alert("住所から場所を特定できませんでした。最初にビル名などを省略し、番地までの検索などでお試しください。");
	}
	});

	return false;

	});
	});

	</script>

	<style type="text/css">
	#map_canvas {
	width: 600px;
	height: 371px;
	}
	</style>

	</head>

	<body>
	<form>
	<label class="label">住所</label>
	<input type="text" name="address" id="address" value="" />

	<label class="label">地図表示位置</label>
	緯度: <input type="text" name="lat" id="lat" value="35.6585873" />
	経度: <input type="text" name="lng" id="lng" value="139.7454247" />

	<button id="getad">住所から取得</button>
	</form>

	<div id="map_canvas"></div>

	<p>
	こちらの「Google Maps API(v3) で住所から地図にマーカーを置く」に関しては、以下のブログ記事のサンプルです。
	</p>
	<p>
	<a href="http://hampom.wordpress.com/2010/03/03/google-maps-apiv3-%E3%81%A7%E4%BD%8F%E6%89%80%E3%81%8B%E3%82%89%E5%9C%B0%E5%9B%B3%E3%81%AB%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%82%92%E7%BD%AE%E3%81%8F%EF%BC%81/">Google Maps API(v3) で住所から地図にマーカーを置く</a>
	</p>
	</body>
	</html>