2016.09.27
MarkerClusterer ライブラリの紹介

みなさん、こんにちは!
Google Maps 上に 店舗の情報などマーカーをたくさん描画したとき、マーカーが重なってしまい見ずらいということがよくあると思います。
今回紹介するのは、そのような状況を回避するため、地図のスケールによってマーカーをクラスタリング(統合)することができる 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'});
このライブラリを使用すれば、非常に簡単にマーカーを統合することができますので、使わない手はないです。是非お試しください。
【関連記事】こんな記事も読まれています
2017.06.24
みなさん、こんにちは。
Google Maps JavaScript API を使用して2点間の距離やエリアの面積を計算する方法をご存知ですか・・・
2017.03.05
みなさん、こんにちは。
今回は、Google Maps に KMLファイルをロードしてマーカー、ライン、ポリゴンを表示する方法を紹介します。<・・・
-
最新記事New Posts

-
人気記事Popular Posts
-
関連タグRelated Tags
-
アーカイブArchive