Postal Search APIs & Solutions
Postal Search APIs & Solutions
  • チュートリアル
  • ダイジェスト
  • リファレンス
  • デモ
  • テスト
  • 構築キット
  • with Gadgets
  • with jQuery
  • with Microformats
  • よくある質問
  • お問い合わせ
  • 利用規約
  • フォーラム
  • ブログ
Design by
Studio7designs
opensourcetemplates.org
ホーム > 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>
    

    関連情報

    ベーシック
    • 郵便番号から住所を検索する
    • 住所の単語から郵便番号を検索する
    • 住所の単語から郵便番号を検索してその住所を表示する
    送信フォーム
    • 郵便番号を住所に変換するフォーム
    • 郵便番号を住所とフリガナに変換するフォーム #1
    • 郵便番号を住所とフリガナに変換するフォーム #2
    • 郵便番号を住所に変換し、都道府県を選択するフォーム
    • 郵便番号を住所とフリガナに変換し、都道府県を選択するフォーム
    with jQuery
    • 郵便番号から住所を検索する #1
    • 郵便番号から住所を検索する #2
    • 送信フォームの入力形式を郵便番号に制限する
    • 住所の単語から郵便番号を検索する
    • 住所の単語から郵便番号を検索してその住所を表示する
    • 住所の単語から住所の候補をサジェスト表示する #1
    • 住所の単語から住所の候補をサジェスト表示する #2
    • 住所の単語から住所の候補をサジェスト表示する #3
    Google Maps API
    • ジオコーダを使って郵便番号の周辺地図を表示する
    • 都道府県の県庁所在地を日本地図に表示する
    • 都道府県を選択してその県庁所在地の周辺地図を表示する
    • ジオコーダを使わずに郵便番号の周辺地図を表示する
    BLOGRANGER API
    • 郵便番号の地域に関連するブログを検索する
    Copyright© 2007 LEARNING RESOURCE LAB and the Postal Search APIs & Solutions team.