グーグルマップと郵便番号検索 #JavaScript

お世話になります。

現在入力フォームの郵便番号で住所入力の補助の機能を実装しているのですが、グーグルマップAPIを使用して実装を考えています。

まず入力フォームに郵便番号を入力して住所をコールバックするところまでは実装したのですが、グーグルマップAPIの規約に則って実装するために以下の様な流れにしたいと考えています。

1.郵便番号を入力して「郵便番号で検索」のようなボタンを押下する
2.モーダル（ダイアログ）が開き、グーグルマップが表示され、マッチングした住所にピンが刺されて（複数ある場合は全てにピンが刺さり、選択させる）、「この住所で良いですか？」のボタンが表示され、押下すると、その住所が住所入力欄に自動入力される

上記のような形で実装したいのですが、うまくいかなくて困っています
知識がないもので、コード込みでご教授いただければ幸いです。

以下のURLのサイトのグーグルマップ部分をモーダルにするようなイメージです。

http://www.benricho.org/map_zip_address/

現在作成中のコードを以下に示します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="../js/jquery-1.11.3.min.js"></script>

<style type="text/css">
* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #fff;
  font: 30px sans-serif;
    font-size:12px;   
}

fieldset{
    margin:10px;
}

label{
    display:block;
    width:100px;
}

input[type=text]{
    line-height:16px;
    padding:5px;
    border:1px #999 solid;
    border-radius:3px;
    width:80%;
}

h2{
    border-bottom:1px #333 dotted;
}    
</style>
<script>
$(function(){
    $('input[name=zip]').blur(function(){
        $('input[name=address]').zip2adr($(this).val());
    });
});

(function($) {
    $.fn.zip2adr = function(zip,callback){
        var cb   = (arguments.length > 1) ? true : false;
        if(zip === ''){
            return false;
        }
        var target = $(this);
        $.ajax({
            type : 'get',
            url : 'https://maps.googleapis.com/maps/api/geocode/json',
            crossDomain : true,
            dataType : 'json',
            data : {
                address : zip,
                language : 'ja',
                sensor : false 
            },
            success : function(resp){
                if(resp.status == "OK"){   
                    var obj = resp.results[0].address_components;
                    var adrSize = obj.length -1;
                    switch(cb){
                        case true: // コールバック関数があるとき
                            var respObj = {};
                            respObj.pref = obj[adrSize - 1].long_name;
                            respObj.below = ''; 
                            for(i=adrSize - 2;i > 0; i --){
                                respObj.below += obj[i].long_name;
                            }
                            respObj.adr = respObj.pref + respObj.below;
                            callback(respObj);
                            break;
                        case false: // コールバック無し
                            var tmp = '';
                            for(i=adrSize - 1;i > 0; i --){
                                tmp += obj[i].long_name;
                            }
                            target.val(tmp);
                            break;
                        default:
                            return false;
                    }
                }else{
                    return false;
                }
            }
        });
    };
})(jQuery);


</script>
</head>
<body>
<c id="sample1">
    <fieldset>
        <label>郵便番号</label>
        <input type="text" name="zip"><br>
    </fieldset>

    <fieldset>
        <label>住所</label>
        <input type="text" name="address">
    </fieldset>
</section>
</body>
</html>