日本語住所から、google map APIを用いて、複数のマーカーを地図上に表示させるコードを作っています。

複数の住所は、for文を用いてGeocode処理しています。
また、Geocodeの返り値は非同期処理とのことで、callback関数を使って、すべて住所の緯度経度を取得してから地図を完成させるようにコーディングしています。

実際に当コードを実行してみると、画面上には何の表示もされず（地図は出てこず真っ白）、chromeのデベロッパーツールのconsole上でも何のエラーも表示されません。

コード中にalertを入れて確認してみると、住所の緯度経度自体はきちんと取得できています。
しかし、地図の中心点を指定する変数の部分はundefinedとなっていました。

いろいろ試行錯誤したのですが、どこが間違っているのか、煮詰まって先に進めません。
（callback関数の使い方を含め、いろいろ違っているかと思います。）
何がおかしいのか、ご指摘いただけますでしょうか。

<script>
function initMap() {

    var addresses = [
        '東京都千代田区永田町1丁目7-1',
        '東京都千代田区霞が関2丁目1番1号',
        '東京都千代田区霞が関1-1-1',
        '東京都千代田区霞が関2-1-3'
    ];

    var latlng = []; //緯度経度の値をセット
    var marker = []; //マーカーの位置情報をセット
    var myLatLng; //地図の中心点をセット用
    var geocoder;
    geocoder = new google.maps.Geocoder();

    var map = new google.maps.Map(document.getElementById('map_canvas'));//地図を作成する

    geo(aftergeo);

    function geo(callback){
        for (var i = 0; i < 3; i++) {
            geocoder.geocode({'address': addresses[i]}, 
                function(results, status) { // 結果
                    if (status ===     google.maps.GeocoderStatus.OK) { // ステータスがOKの場合
                        latlng[i]=results    [0].geometry.location;// マーカーを立てる位置をセット
                        marker[i] = new     google.maps.Marker({
                            position: results    [0].geometry.location, // マーカーを立てる位置を指定
                            map: map // マーカーを立てる地図を指定
                        });
                    } else { // 失敗した場合
                    }//if文の終了。ifは文なので;はいらない
                }//function(results, status)の終了
            );//geocoder.geocodeの終了
        }//for文の終了
        callback();//全て取得できたらaftergeo実行
    }//function geo終了

    function aftergeo(){
        myLatLng = latlng[0];//最初の住所を地図の中心点に設定
        var opt = {
            center: myLatLng, // 地図の中心を指定
            zoom: 16 // 地図のズームを指定
        };//地図作成のオプションのうちcenterとzoomは必須
        map.setOptions(opt);//オプションをmapにセット
    }//function aftergeo終了

};//function initMap終了

</script>