Googleマップ上に数千の情報ウィンドウを作成するための最適化戦略

Question

私はGoogleMaps APIを初めて使用し、MarkerClustererを使用して地図上に最大2,000個のマーカーをプロットするRoRアプリケーションを引き継ぎました。各マーカーには、関連付けられた情報ウィンドウがあります。

現在の実装では、JavaScriptで情報ウィンドウコンテンツ文字列の配列を作成し、JavaScriptをブラウザにダウンロードします。非圧縮（サーバーコンテンツの圧縮なし）の場合、アレイとJavascriptは最大9MBになる可能性があります。

私が見つけたこの実装に関連するパフォーマンスのボトルネックは次のとおりです。 1.サーバーで2000個の文字列を作成し、JavaScript配列に配置します。 （〜4-5秒） 2.ブラウザに送信する前に、サーバーで数メガバイトのJavaScriptを圧縮する時間。 （〜2〜3秒）

私の最初の考えは、すべてのHTMLフォーマットを含む情報ウィンドウコンテンツ文字列のテンプレートを作成して、情報ウィンドウコンテンツの配列に含まれるデータが実際に表示される生の数値だけになるようにすることです。これにより、サーバー上でコンテンツ文字列配列をアセンブルする計算時間が大幅に短縮され、それに応じてブラウザーで配列によって消費されるメモリが削減されます。また、一度に開く必要がある情報ウィンドウは1つだけです。

Google Maps v3 APIに慣れていないので、これが最適化の最良の戦略であるかどうかについてのガイダンスを探しています。そして、このタイプの戦略を実装するコードサンプルへのポインタ。

よろしくお願いします

-スコット

Answer 1

配列に2000個のデータセットをすべてロードするのではなく、次の2つの方法のいずれかを実行する必要があると思います。

1. 現在のビューポートにあるマーカーと情報ウィンドウのみをロードします。
2. マーカーをクリックすると、ajaxによって情報ウィンドウのコンテンツが読み込まれます。