Geocoderを使って検索した住所を地図で表示するプログラム

gistfile1.html

<div id="map" style="width:300px;height:300px"></div>
<input id="addrArea" value="慶應義塾大学湘南藤沢キャンパス" type="text">
<input value="OK" onclick="geocode()" type="button">
<div id="resArea"></div>
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// 地図の中心を決める
var latlng = new google.maps.LatLng(35.388276, 139.427348);
 
// 地図を表示するためのオプションを設定する
var opt = {
  zoom: 15,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
 
// 地図を表示する。
var map = new google.maps.Map(document.getElementById('map'), opt);

/*
 *  OKボタンが押された際に呼び出される関数
 */
function geocode() {
  // geocoderオブジェクトの取得
  var geocoder = new google.maps.Geocoder();
 
  // 住所の読み込み
  var address = document.getElementById("addrArea").value;
 
  // geocoderを使うためのオブジェクトの準備
  var request = {
    address: address
  };
 
  // Geocoderの呼び出し
  geocoder.geocode(request, listResult);
}
 
/*
 *  Geocoderのコールバック関数
 */
function listResult(results, status) {
  // エラー処理
  if (status != google.maps.GeocoderStatus.OK) {
    alert("ジオコーディング失敗");
    return;
  }
 
  // 結果を表示するエリアの取得
  var resElement = document.getElementById("resArea");
 
  // 結果の表示
  resElement.innerHTML = "";  // 結果を表示するエリアの初期化
  var i;
  for (i in results) {
    resElement.innerHTML += results[i].formatted_address + " "
      + results[i].geometry.location + "<br>";
  }
  
  var dest = results[0];
  map.setCenter(dest.geometry.location);
  
}
</script>