GoogleMap Clusterの利用

以前使っていたGoogleMapのクラスタが古くなって表示できなくなったので、新しいのに変えました。
今回は https://github.com/googlemaps/js-marker-clusterer を利用しました。

１．設置
上記リンクからファイルをダウンロードして、FTPで設置します。
Cakephpを利用しているので、下記に設置しました。
app/webroot/js/markerclusterer.js
app/webroot/img/cluster/画像ファイル.png  (clusterフォルダは自分で生成)

２．コントローラとビューの作成
コントローラは既存のを使います。件数を増やしておくといいかも。
ビューは次のように

	<?php echo $this->Html->script('http://maps.google.com/maps/api/js?sensor=true', false); ?>
	<div class="highschools index">
	<h2><?php echo __('Highschools'); ?></h2>
	<?php echo $this->Html->script('markerclusterer'); ?>
	<script>
	function initialize() {
	var center = new google.maps.LatLng(34.738249, 137.9592173);
	var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 9,
	center: center,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	var markers = [];
	<?php $i = 0; ?>
	<?php foreach ($highschools as $highschool): ?>
	<?php if($result[$i++][3] == 1){?>
	var marker = new google.maps.Marker({
	position: new google.maps.LatLng(<?php echo $highschool['Highschool']['latitude'];?>, <?php echo $highschool['Highschool']['longitude'];?>)
	});
	markers.push(marker);
	<?php }?>
	<?php endforeach; ?>
	var options = {
	imagePath: '/img/cluster/m'
	};
	var markerCluster = new MarkerClusterer(map, markers, options);
	}
	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	<div id="map" style="width: 1200px; height: 800px;"></div>

view raw gistfile1.txt hosted with ❤ by GitHub

３．確認

参考
https://github.com/googlemaps/js-marker-clusterer