javascript - CloudMade マップに多数のマーカーを効率的にプロットする

Question

そこで、CloudMade JavaScript マップを利用する Web サイトに取り組んでいます。マップを読み込んで、約 14,000 個のマーカーをプロットする必要があります。この Web サイトのポイントは、米国全体のマーカー (それぞれがさまざまな色でプロットされている) を視覚化することです。私はこれを行っているため、そこにあるクラスタリング ツールを使用できません。

最初は、PHP を使用してデータベースからデータ ポイントを取得し、map.addOverlay(MyMarker)関数を使用してマップ上に 1 つずつプロットしていました。これには信じられないほど時間がかかったので、その後、アプローチを変更しました。これで、JSON ファイルにすべてのデータが格納され、次の JavaScript コードを使用してポイントをプロットします。

    $(document).ready(function(){
            var url="m/results.json";
            $.getJSON(url,function(json){
                $.each(json.posts,function(i,post){
                    var myMarkerLatLng = new CM.LatLng(post.Latitude,post.Longitude);
                    var myMarker = new CM.Marker(myMarkerLatLng, {
                        title: post.City + ", " + post.State,
                    });

                    map.addOverlay(myMarker);
                });
            });
        });

これははるかに優れていますが、もっと速くしたいと思います。現在、約 8 秒でロードされますが、リアルタイムである必要があります。Web サイトを高速化するために、Google の Web パフォーマンス ガイドライン ( https://developers.google.com/speed/docs/best-practices/rules_intro ) に従いました。しかし、これらの規則に従って、ファイルの最後で上記のコードを実行します。これにより、Web ページ全体 (マップを含む) を読み込むことができますが、数秒間停止してから、すべてのマーカーを一度にプロットします。

高速化に関するヒントや提案はありますか?

PS - 最初に米国全体のマップを読み込みます。つまり、最初の読み込み時にそれらすべてをプロットする必要があります =/. 残念ながら、それを回避する方法はありません。