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を使用して地図の中心からプレイス情報を取得し、マーカーを描画しています。中心の数字は、含まれるマーカ数になります。地図を拡大、またはマーカーをクリックするとマーカーは分散されていきます。

マーカークラスタ

 

 

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

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

Street View Image API を初めて使ってみました

みなさん、こんにちは!

来週の 6月14、15日は、Google Cloud Next'17 が開催されます。皆さん、申込みしましたか? 

続きを読む

2017.09.24

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)