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.02.11

Directions API で巡回セールスマン問題を解決する

みなさん、こんにちは。
今回は、Google Maps Directions API で、巡回セールスマン問題を解決する方法を解説します・・・

続きを読む

2017.07.19

「関東一の祇園・熊谷うちわ祭り」の山車・屋台位置情報サイト公開!

みんさん、こんにちは!

暑い夏をいかがお過ごしですか?今回は、前回記事の山笠に引き続き、夏祭りネタにです^^

 ・・・

続きを読む

2017.08.20

Google Static Maps API の使い方

みなさん、こんにちは!

今回は、今まで紹介していなかった「Google Static Maps API」の使い方を紹介いたします。

続きを読む

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

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

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

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

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