GoogleMapにマーカーを置くために待機時間を作りたい

Question

お世話になっております。

現在、DB上に登録している個人情報から住所を取得し、それら全ての場所にGoogelMap上でマーカーを置くウェブアプリケーションを作っています。
10件前後では大丈夫だったのですが、30件前後の住所データを利用すると、「OVER_QUERY_LIMIT」と表示され、一部マーカーが配置されないという問題が出ています。
調べてみたところ、この問題は1度の操作でマーカーを配置しようとしていたために起きているらしく、ちゃんと時間を置いて配置すれば問題なく置けるとの事です。（参考にしたサイトでは、700件マーカーを配置していました）
そこで、sleapやwaitなどの待機時間を作るメソッドをJavaScript内に入れようと考えましたが、setTimeoutは引数にメソッドが必要となり、現在作成しているJavaScriptのマーカー配置メソッドに適用するのは難しいと思いました。
引数が必要ない待機時間を作るメソッドか、もしくは待機時間を取りながらマーカーを配置する良い案があればご回答願います。

現在のJavaScript
var geocoder;
var map;
var detail=new Array();
detail[0] = new Array();
detail[1] = new Array();
detail[2] = new Array();

//GoogleMapの初期描画
function initializeAll() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(緯度,経度);
var opts = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map_canvas"), opts);

}

//取得した個人情報（String）を分解
function getdata(unames,addrs,tels){

detail[0]=addrs.split(",");
detail[1]=unames.split(",");
detail[2]=tels.split(",");

}

//個人情報の数だけマーカー配置メソッドを呼び出す
function plotAddressAll() {
for(var key=1;key<detail[0].length;key++){
codeAddress(detail[0][key], detail[1][key], detail[2][key]);
}
}

//マーカー配置メソッド
function codeAddress(address, name, tel) {

if (geocoder) {
    geocoder.geocode( { 'address': address,'region': 'jp'},
        function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            var bounds = new google.maps.LatLngBounds();

            for (var r in results) {
                if (results[r].geometry) {
                    var latlng = results[r].geometry.location;
                    bounds.extend(latlng);
                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        title: name,
                        icon: "image.png",
                    });

                    // 吹き出しを表示(クリック時)
                    var msg = "";
                    msg += "<p style='color: blue;'>" + marker.title + "</p>";
                    msg += "<p>" + address + "</p>";
                    msg += "<p>" + tel + "</p>";
                    attachMessage(marker, msg);

                    document.getElementById('id_ido').innerHTML = latlng.lat();
                    document.getElementById('id_keido').innerHTML = latlng.lng();

                }
            }
        }else{
        alert("Geocode 取得に失敗しました reason: "
                + status);
        }
    });
}

}

Answer 1

geocoder.geocode( { 'address': address,'region': 'jp'}, 

このように、描画のたびにジオコーディングする仕様だと、待機時間を設定しても同じように制限されます。一度取得した緯度経度情報をDBに登録しておくなど、根本的な仕様変更が必要です。

Comments

[退会済みユーザー]

ありがとうございます。
もう一度コードを見直してみようと思います。

Answer 2

setTimeoutなどで非同期に実行する場合は別として、ブラウザ上で実行されるJavaScriptは基本的にシングルスレッドで動いています。そのため、（同期的に）時間を待たせるような処理を行ってしまうと、その間ブラウザの操作すらできなくなります。最悪、「スクリプトの実行に時間がかかっています。強制終了しますか？」のようなメッセージを発してしまうこととなります。

時間のかかる処理をフロントエンドで行いたい場合は、タイマーなどで呼び出されるごとに小分けで処理をやっていく、というのがほぼ唯一の選択肢です。

なお、毎回ジオコーディングするのは無駄が多いので、データの登録時点で行って経緯度を記録しておけば、APIの利用制限もほぼ気にしなくて良くなります。

Comments

[退会済みユーザー]

ありがとうございます。
ジオコーディングのルールがよくわかっていないので、再度調べてみます。
分からなかった時はもう一度質問するかもしれません。
その時はよろしくお願いします。