JavaScriptでGoogle MapとMarkerClustererを使用してマーカーをまとめて表示する

GoogleMaps APIでSVGアイコンでマーカーを1000件ほど置いたら重くなったのでメモ。

マップ上に複数のマーカーを表示する場合、マーカーが重なってしまって見づらくなることがあります。そこで、MarkerClustererというJavaScriptライブラリを使用することで、マーカーをクラスタリングしてまとめて表示することができます。この記事では、Google MapとMarkerClustererを組み合わせて使い、マーカーを効果的にまとめて表示する方法について解説します。

とりあえず動くコード

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps Marker Clusterer</title></script>
    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
    <script>
        function initMap() {
            const map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: 37.7749, lng: -122.4194 },
                zoom: 10
            });

            const markers = [
                new google.maps.Marker({ position: { lat: 37.7749, lng: -122.4194 } }),
                new google.maps.Marker({ position: { lat: 37.7849, lng: -122.4194 } }),
                new google.maps.Marker({ position: { lat: 37.7949, lng: -122.4194 } })
            ];

            const markerCluster = new markerClusterer.MarkerClusterer({ map, markers });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
</head>
<body>
    <div id="map" style="height: 400px;"></div>
</body>
</html>

公式ドキュメントのサンプルコードが動かない

https://developers.google.com/maps/documentation/javascript/overview?hl=ja#Inline

> 以下のサンプルは、この地図の作成に必要なコード全体を示しています。
> // Add a marker clusterer to manage the markers.
> new MarkerClusterer({ markers, map });

実行後
Uncaught ReferenceError: MarkerClusterer is not defined
    at initMap (test:21:13)
    at test:25:13

私がドキュメントを最後まで見てなかったのがいけなかったのですが。修正点。

Marker Clusterer を追加する手順は次のとおりです。
const markerCluster = new markerClusterer.MarkerClusterer({ map, markers });

以下詳細手順

1. Google Maps APIキーの取得:

Google Mapを使用するためには、まずGoogle Maps APIキーを取得する必要があります。Google Cloud Platformのプロジェクトを作成し、Maps JavaScript APIを有効化してAPIキーを生成します。

2. Google Mapsの初期設定:

HTMLファイルにGoogle Mapsを表示するための要素を追加し、JavaScriptコード内でその要素を取得します。また、APIキーを使用してGoogle Mapsを初期化します。

3. マーカーの作成と配置:

マーカーを表示する位置情報を定義し、Google Maps上にマーカーを配置します。マーカーの位置情報は緯度経度の形式で指定します。

4. MarkerClustererの設定:

MarkerClustererライブラリをインポートし、マーカーをクラスタリングするためのオプションを設定します。これにより、近くにあるマーカーがまとめて表示されます。

5. マーカーのクラスタリング:

MarkerClustererオブジェクトを作成し、マーカーをクラスタリングします。マーカーを追加するたびに、MarkerClustererが自動的にクラスタリングを更新します。

まとめて表示されたマーカーのスタイリング: クラスタリングされたマーカーにはデフォルトのスタイリングが適用されますが、必要に応じてスタイルをカスタマイズすることもできます。マーカーのアイコンやラベルなどを変更して、見栄えを調整しましょう。