Staff Blog

2016.09.27

MarkerClusterer ライブラリの紹介

みなさん、こんにちは！

Google Maps 上に 店舗の情報などマーカーをたくさん描画したとき、マーカーが重なってしまい見ずらいということがよくあると思います。

今回紹介するのは、そのような状況を回避するため、地図のスケールによってマーカーをクラスタリング（統合）することができる MarkerClusterer ライブラリです！

MarkerClusterer ライブラリーのダウンロード

早速デモを見てみましょう。今回は、Google Place APIを使用して地図の中心からプレイス情報を取得し、マーカーを描画しています。中心の数字は、含まれるマーカ数になります。地図を拡大、またはマーカーをクリックするとマーカーは分散されていきます。

下記にソースの主要な部分を解説します。

<!-- ライブラリの読み込み -->
<script src="js/markerclusterer.js" type="text/javascript"></script>

// マーカーの配列
var _placeMarkers = [];

// Place API を実行してマーカーを描画
var setPlaces = function() {
	// PlaceServiceオブジェクトの生成
	var service = new google.maps.places.PlacesService(_map);
	// Place APIで近傍検索を実行
	service.nearbySearch( {
		location: _center, //検索の中心
		radius: 5000 //半径（m）
	}, function(results, status) {
		if (status == google.maps.places.PlacesServiceStatus.OK) {
			// 取得したプレイスの数でループします
			for (var i=0; i<results.length; i++) {
				var place = results[i];
				// マーカーを作成し、配列に格納
				var marker = createPlaceMarker(place);
				_placeMarkers.push(marker);
			}
			// MarkerClusterer ライブラリの実行し、クラスタリングします
			new MarkerClusterer(_map, _placeMarkers, {imagePath: 'images/m'});
		}
	});
};

// マーカーを作成
var createPlaceMarker = function(place) {
	var marker = new google.maps.Marker({
		map: _map,
		position: place.geometry.location,
		icon: {
			url: place.icon,  //プレイスのデフォルトアイコン
			scaledSize: new google.maps.Size(32,32) //アイコンのサイズ
		}
	});
	return marker;
};

下記の記述部分が、MakerClusterer ライブラリを使用している個所です。パラメータとして、Mapオブジェクト、マーカーの配列、イメージのパスを指定しています。イメージは自分で作成したものも使用可能です。

new MarkerClusterer(_map, _placeMarkers, {imagePath: 'images/m'});

このライブラリを使用すれば、非常に簡単にマーカーを統合することができますので、使わない手はないです。是非お試しください。