AngularJSを使ってGoogleマップ(5)重複して表示されるマーカーをクラスター化する方法

複数のマーカーが近くにあって重複して表示されるような場合、クラスター化してまとめて表示する事が出来ます。クラスター化したアイコンをクリックするとズームアップしてそれぞれのマーカーを表示させる事が出来ます。
 
デモとコードサンプルはこちら
 

サンプルコードの説明


 
1)ui-gmap-markersタグにクラスター関連の属性追加(HTML)
 

<ui-gmap-markers models="map.Markers" coords="'self'"
                 doCluster="map.ClusterMarkers"
                 clusterOptions="map.clusterOptions">
</ui-gmap-markers>

・doClusterオプション
クラスター化するかしないかを設定
 
・clusterOptions
どのようにクラスター化するかのオプション設定
 
2)クラスターのオプションを設定(スクリプト)
 

clusterOptions: {
    title: 'Cluster Markers', 
    gridSize: 60, 
    ignoreHidden: true, 
    minimumClusterSize: 2
}

・title
クラスター化したアイコンをマウスオーバーした際に表示される
 
・gridSize
どの範囲内にあるマーカーをクラスター化するかのサイズ
 
・minimumClusterSize
何個のマーカーがgridSize内にあるとクラスター化するか
 

動作確認


 
①初期表示
 
ズームレベル16で東京駅近傍に4つのマーカーを表示されます。この段階ではクラスター化されていません。
 
②一段階ズームアウトして、広い範囲を表示。
 
・3つのマーカーがクラスター化され、青いアイコンで表示されます。
 
・青いアイコン内の数字がクラスター化されたアイコンの数を表します。
 
・青いアイコンをクリックすると拡大表示されて個別のマーカーが確認できるようになります。
 
③さらにもう一段階ズームアウトして、広い範囲表示
 
4つのマーカーがクラスター化されて表示されます。

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください