2008年04月02日 06:00 [Edit]

Ajax - Ricollab郵便番号検索+Google Map

早速混ぜてみた。

ricollab Web Tech Blog ? Blog Archive ? ricollab実験サービス第一弾を開始します!
本日より、ricollabの語源の一つである「リコーラボ」としての活動の第一弾、郵便番号検索サービスを開始します。

半角数字7けた
住所

郵便番号を7桁入力すると、対応する住所が住所欄に入ります。そのままでよければsubmit、そうでなければ微調整(たとえば番地も入力)してsubmitすると、地図が切り替わります。

Google Map APIも、jsapi と geocoder に対応しております。

こんなのが30分で出来る世の中になったんだからたまらん。

余談ですが、Safari 3.1のError Console最高! Firefoxよりええわこれ。

HTML

<div style="border:outset 1px;padding:0.5em;">
<table><tbody>
<tr><th>〒</th><td><input id="zip" type="text" size="7" onkeyup="
    if (this.value.length == 7){
        gmap.zip = this.value;
        zip2address.parse(this.value);
    }
"> 半角数字7けた</td></tr>
<tr><th>住所</th><td><input id="address" type="text" size="40">
<input type="submit" onclick="gmap.gotoAddress(
    document.getElementById('address').value,
    document.getElementById('zip').value
)">
</td></tr>
<tr><th></th><td><div id="gmap" style="width:400px;height:400px"></div></td></tr>
</tbody></table>
</div>
<script type="text/javascript" src="http://www.google.com/jsapi?key=API_KEY"></script>

JavaScript

google.load('maps', '2');
var gmap = {};
gmap.gotoAddress = function(address, zip){
    this.geocoder.getLatLng(address, function(point) {
        if (!point) {
            alert(address + " not found");
        } else {
            gmap.point = point;
            gmap.map.setCenter(point, 15);
            var marker = new google.maps.Marker(point);
            gmap.map.addOverlay(marker);
            var html = address;
            if (zip) html = '〒'+zip.replace(/(\d\d\d)/, '$1-')+'<br>'+html;
            html += '<br>' + '緯度:' + point.y + ' 経度:' + point.x;
            google.maps.Event.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(html);
             });
            marker.openInfoWindowHtml(html);
        }
    });
};
google.setOnLoadCallback(function(){
    gmap.map = new google.maps.Map2(document.getElementById('gmap'));
    gmap.map.addControl(new GSmallMapControl());
    gmap.map.addControl(new GMapTypeControl());

    gmap.geocoder = new google.maps.ClientGeocoder();
});
window.onunload=function(ev){  GUnload() }

var zip2address = (function(callback){
  this.proxy     = 'http://zip.ricollab.jp/';
  this.callback  = callback || 'jsonp';
  this.parse = function(zip){
    var script = document.createElement('script'); 
    script.id = this.proxy + '/' + zip + '.json?callback=' + this.callback;
    script.charset = 'UTF-8';
    script.src = script.id; 
    document.lastChild.appendChild(script);
  };
  return this;
})();

function jsonp(json){
    var addr = json.address;
    document.getElementById('address').value = 
        addr ? addr.prefecture + addr.city + addr.town : json.description;
};

Enjoy!

Dan the Musher-up


この記事へのトラックバックURL

この記事へのトラックバック
これはかなりクールなマップ。一文字打つたびに候補地を絞り込みながらズームインし...
郵便番号を打ち込むとその場所へズームインしていくクールなマップ【WEBマーケティング ブログ】at 2008年08月11日 01:43
流行に乗って、一通り出尽くした感も感じるGoogleマップとのマッシュアップ。...
何気に実用的なGoogleマップのマッシュアップ7選【WEBマーケティングブログ】at 2008年04月26日 05:08
リコー、防塵・防水コンパクトデジタルカメラ「G600」を発売マイコミジャーナルリコーは、防塵・防水性能の高いビジネス用のコンパクトデジタルカメラ「Caplio 500G wide」の後継機として、「G...
ノンリコースローン【雄太の「毎日」日記】at 2008年04月22日 15:24
Ajax - Recollab郵便番号検索+Google Map 早速混ぜてみた...
リコー【しんやの日記】at 2008年04月16日 08:56
404 Blog Not Found:Ajax - Recollab郵便番号検索 Google Map
404 Blog Not Found:Ajax - Recollab郵便番号検索 Google Map【oryzaの環境備忘録】at 2008年04月02日 11:40
この記事へのコメント
郵便番号検索とgooglemapのページを作成中です。
助かりました!
有難うございます。
http://www.postjapan.net/map/
Posted by 郵便番号検索(郵便日本) at 2009年08月26日 12:13
IEでもきちんと動いたことを改めて確認。
Dan the IEphobia
Posted by at 2009年08月01日 18:01
すばらしい。
私の運営しているサイトで全国展開するのにどうしようか悩んでたところでした。組込ませてください。
Posted by 松本敏治 at 2008年04月10日 12:18
うーん、IEだとエラーで地図が表示されません・・・
Posted by taka at 2008年04月04日 10:05
さすがに(次のビルを除く)が含まれると not found になりますね。
Posted by Akira28 at 2008年04月03日 10:57
R&iacute;cohさんは過去GPS装着型のデジカメ(Caplio G3 Pro)を作られてますね。
内蔵型のコンデジを希望します。
Posted by ポ at 2008年04月02日 21:55
s/Recollab/ricollab/

弾さん、早速取り上げていただきありがとうございます。
おかげさまでblog公開以来最高のアクセス数を記録しました。
Posted by StL at 2008年04月02日 17:59