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

サンプルコードの説明

　
１）ui-gmap-markersタグにクラスター関連の属性追加（HTML）
　

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

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

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

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

動作確認

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

関連記事の目次