ジオコーダを使わずに郵便番号の周辺地図を表示する

ホーム > Postal Search Ajax API サンプル > Google Maps API

Google Maps API を使って、東京都(都庁)を中心とした日本地図を表示します。

検索ボックスで入力した郵便番号から Postal.Lookup クラスを使って住所を検索します。その住所の緯度経度から日本地図にマーカーを表示します。

そのマーカーをポイントすると吹き出しを、その噴出しの中に、郵便番号、住所、フリガナ、地方公共団体コード、緯度経度を表示します。また、マーカーをクリックすると、そのマーカー付近の地図をズーム表示します。

<script type="text/javascript">
//<![CDATA[

// GMap2
var map;

// window.onload
window.onload = function() {
  map = new GMap2(document.getElementById('map'));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.addControl(new GOverviewMapControl());
  map.setCenter(new GLatLng(Japan.Tokyo.y, Japan.Tokyo.x), 5);
}

// run
function run(c) {
  map.clearOverlays();
  map.setCenter(new GLatLng(Japan.Tokyo.y, Japan.Tokyo.x), 5);
  var lookup = new Postal.Lookup();
  lookup.onload = function() {
    for (var i=0; i<lookup.response.length; i++) {
      var addr = lookup.response[i];
      map.addOverlay(createMarker(addr));
    }
  };
  lookup.send(c);
}

// createMarker
function createMarker(addr) {
  var marker = new GMarker(new GLatLng(addr.y, addr.x));
  GEvent.addListener(marker, 'mouseover', function() {
    marker.openInfoWindowHtml('<h3>〒' + addr.c + '</h3>'
      + '<dl>'
      + '<dt>住所</dt><dd>' + addr.a + '</dd>'
      + '<dt>フリガナ</dt><dd>' + addr.k + '</dd>'
      + '<dt>地方公共団体コード</dt><dd>' + addr.g + '</dd>'
      + '<dt>経度</dt><dd>' + addr.x + '</dd>'
      + '<dt>緯度</dt><dd>' + addr.y + '</dd>'
      + '</dl>'
    );
  });
  GEvent.addListener(marker, 'click', function() {
    map.setCenter(new GLatLng(addr.y, addr.x), 15);
  });
  return marker;
}

//]]>
</script>

<form name="f" onsubmit="run(this.c.value); return false;">
〒 <input type="text" name="c" value="160-0021" size="20" />
<input type="submit" name="g" value="検索" />
</form>

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

ジオコーダを使わずに郵便番号の周辺地図を表示する

関連情報