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

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

(1)サンプルコード
 デモ表示へ
①HTML本文

<div ng-controller="MyCtrl">
  <div class="row">
    <div class="col-sm-6">
      <google-map 
        id="map-canvas"
        center="map.center"
        zoom="map.zoom"
        draggable="true"
        options="map.options"
      >
        <markers models="map.Markers" coords="'self'"
               doCluster="map.ClusterMarkers" clusterOptions="map.clusterOptions">
        </markers>
      </google-map>
    </div>
    <div class="col-sm-6">
    </div>
  </div>
</div>

②スクリプト(js/map5.js)

var mapApp = angular.module('googleMapApp', ['google-maps','ui.bootstrap']);

mapApp.controller("MyCtrl", function ($scope) {
  angular.extend($scope, {
    map: {
      center: {
        latitude: 35.681382,
        longitude: 139.766084
      },
      options: {
        maxZoom: 20,
        minZoom: 3
      },
      zoom: 16,
      Markers: [
        {
          latitude: 35.681,
          longitude: 139.766
        },
        {
          latitude: 35.683,
          longitude: 139.766
        },
        {
          latitude: 35.679,
          longitude: 139.765
        },
        {
          latitude: 35.682,
          longitude: 139.769
        }
      ],
      ClusterMarkers: true,
      clusterOptions: {
          title: 'クラスター化したマーカー', 
          gridSize: 60, 
          ignoreHidden: true, 
          minimumClusterSize: 2
      }
    }
  });
});

③CSS

@import url('bootstrap/css/bootstrap.css');
.angular-google-map-container {
  height: 400px;
}

(2)サンプルコードの内容
 
1)markersタグにクラスター関連の属性追加(HTML)
 
・doClusterオプション
クラスター化するかしないかを設定

・clusterOptions
 どのようにクラスター化するかのオプション設定
 
2)クラスターのオプションを設定(スクリプト)
 
・title
クラスター化したアイコンをマウスオーバーした際に表示される
 
・gridSize
どの範囲内にあるマーカーをクラスター化するかのサイズ
 
・minimumClusterSize
何個のマーカーがgridSize内にあるとクラスター化するか
 
(3)動作確認
 
①初期表示
 
ズームレベル16で東京駅近傍に4つのマーカーを表示されます。この段階ではクラスター化されていません。
 
②一段階ズームアウトして、広い範囲を表示。
 
・3つのマーカーがクラスター化され、青いアイコンで表示されます。
 
・青いアイコン内の数字がクラスター化されたアイコンの数を表します。
 
・青いアイコンをクリックすると拡大表示されて個別のマーカーが確認できるようになります。
 
③さらにもう一段階ズームアウトして、広い範囲表示。
 
4つのマーカーがクラスター化されて表示されます。
 
 
AngularJS、Googleマップの他の記事の目次

関連記事の目次

コメントを残す

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