404 Blog Not Found:Ajax - Ricollab郵便番号検索+Google Map

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

Posted by dankogai at 06:00│Comments(7)│TrackBack(5)