MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2016.09.27

MarkerClusterer ライブラリの紹介

%e3%82%a2%e3%82%a4%e3%82%ad%e3%83%a3%e3%83%83%e3%83%81

みなさん、こんにちは!

 

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

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

 

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

 

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

Full Screen

 

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

<!-- ライブラリの読み込み -->
<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.05.19

Googleマップに同心円を描画する

みなさん、こんにちは。

Googleマップ上に同心円を書きたいと思ったことはありませんか? 私は、よくあります。

マルティスープで・・・

続きを読む

2017.03.17

時差計算ができるGoogle Maps Time Zone API の利用方法を・・・

みなさん、こんにちは。

 

Google Maps API で最後まで紹介できていなかった「続きを読む

 - Google Maps APIs, Google Maps JavaScript API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)