GoogleMap APIを使用して数千個のマーカーを表示したい

主にモバイル向けWebサイトで、GoogleMap APIを使用して地図描画し、地図にマーカーを大量（数千個）に表示したい

前提

JavaScriptでWebサイト上に（アプリではなく）GoogleMapの地図表示をする予定です。

発生している問題・エラーメッセージ

数千ものマーカーを表示する場合、モバイル端末ではハードウェアのスペックから鑑みて、地図のドラッグやズームなど動作がカクつく場合があります。
すべてのマーカーを表示する必要があるので、優先度が低いマーカーを非表示にすることなどはできません。
どのような対処方法がありますでしょうか？

試したこと

MarkerClustererなどのライブラリを使って、重複するマーカーをまとめて表示しました。

補足情報（FW/ツールのバージョンなど）

Maps JavaScript API : version 3

行動規範の内容に同意します

回答1件

　そのような実装を10年ぐらい前にしたことありますが、マーカーをいくつかのクラスタに分割して、表示領域に合わせて動的にクエリを発行して一部のマーカーを読む込む、表示領域が変わったらデータを追加読み込みする、という方法を取りました。ただ、単純に位置情報でクエリを投げると逆にサーバ側処理で重くなるので、その時は GeoHash を使いました。

　10年経った今であれば、他にももっとよいクラスタリングはあるかもです。

　私は経験ありませんが、マーカー用のレイヤーをサーバ側で1枚作ってしまうというのもアリだと思います。

　マーカーの更新が頻繁である場合はレイヤーの更新タイミングをどうするか、という問題が発生しますので、その辺りも検討が必要だと思います。

投稿2023/09/30 08:28