読者です 読者をやめる 読者になる 読者になる

PSLブログ

ヨシナシゴトヲツヅリマス

Google map APIを使った郵便番号→住所自動入力

問い合わせフォームなどで、住所の入力をする際に、郵便番号を入れると都道府県と市区町村名+町名(×丁目の手前まで)が自動入力されるしくみはいろいろなものがあるが、従来のタイプだと、郵便番号と住所の変換テーブルを手元に持っておく必要があり、日本郵便のサイトでken_all.csvをダウンロードしてきてDBに入れて…とやっていたが、Google map APIを使って住所データを持ってきてしまう方法があった。

郵便番号→住所 変換スクリプト(google maps API 使用)

上記のスクリプトで簡単に実現できる。しかしこのコードのままだと、不完全なまたは存在しない郵便番号を入力すると、日本以外の住所を返してくるため、除外する必要がある。

            success : function(resp){
                if(resp.status == "OK"){   
                    var obj = resp.results[0].address_components;
                    var adrSize = obj.length -1;
                    if (obj[adrSize].short_name != "JP") return false; //この行を追加
                    switch(cb){
                        case true: // コールバック関数があるとき

日本以外の住所を返したときは、return falseする。

呼び出し側は、以下のようにして、blurだけでなく、keyupでも動くようにする。

$(function () {
    $("#pcode").bind("blur keyup", function() {
        $.fn.zip2adr($(this).val(), function(resp) {
            $("#pref").val(resp.pref);
            $("#city").val(resp.below);
        });
    });
});