ジオコーダを使わずに郵便番号の周辺地図を表示する - Google Maps API - Postal Search Ajax API サンプル

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

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

Google Maps API を使って日本地図を表示します。

検索ボックスで入力した郵便番号から Postal.Lookup クラスを使って住所を検索し、その結果から住所をリスト表示します。

続けて、GClientGeocoder クラスを使って、その住所の緯度経度を検索し、その緯度経度を中心とした周辺地図をズーム表示します。さらにマーカーと吹き出しを表示します。その吹き出しには住所を表示します。

同様に、リスト表示した住所をクリックすると、GClientGeocoder クラスを使って、その住所の緯度経度を検索し、その緯度経度を中心とした周辺地図をズーム表示します。さらにマーカーと吹き出しを表示します。その吹き出しには住所を表示します。

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

var map;
var geocoder;
var focusId;

// window.onload
window.onload = function() {
  map = new GMap2(document.getElementById('map'));
  map.setCenter(new GLatLng(37,139),4);
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.addControl(new GOverviewMapControl());
  map.setMapType(G_NORMAL_MAP);
  geocoder = new GClientGeocoder();
}

// run
function run(c) {
  var lookup = new Postal.Lookup();
  lookup.onload = function() {
    var ul = document.getElementById('r');
    ul.innerHTML = '';
    focusId = null;
    for (var i=0; i<lookup.response.length; i++) {
      var postal = lookup.response[i];
      var li = document.createElement('li');
      li.setAttribute('id', i);
      var a = document.createElement('a');
      a.appendChild(document.createTextNode(postal.a));
      a.setAttribute('href', 'javascript: select("' + i + '")');
      a.setAttribute('id', 'link_' + i);
      li.appendChild(a);
      var span = document.createElement('span');
      span.setAttribute('id', 'warn_' + i);
      li.appendChild(span);
      ul.appendChild(li);
      
      if (focusId == null) {
        selectedAddress = postal.a;
        focusId = i;
      }
    }
    select(focusId);
  };
  lookup.send(c);
}

// show
function show(address) {
  if (geocoder) {
    geocoder.getLatLng(
      address,
      function(point) {
        if (!point) {
          var span = document.getElementById('warn_' + focusId);
          span.innerHTML = '(地図が見つかりませんでした)';
        } else {
          var span = document.getElementById('warn_' + focusId);
          span.innerHTML = '';
          map.setCenter(point, 13);
          var marker = new GMarker(point);
          map.addOverlay(marker);
          marker.openInfoWindowHtml(address);
        }
      }
    );
  }
}

// select
function select(selectId) {
  focusId = selectId;
  var a = document.getElementById('link_' + selectId);
  a.setAttribute('class', 'selected');
  show(a.innerHTML);
}

//]]>
</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>

<ul id="r"></ul>
<div id="map" style="width:480px;height:400px"></div>

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

関連情報