Edited at

Google Maps APIのMarker Clusterers libraryを使用した際のcluster iconのclick event

More than 1 year has passed since last update.


やりたいこと

cluster iconをクリックしたときの挙動を変えたい(デフォルトはクリックするとズームする)


コード


markerclusterer.js

/**

* Triggers the clusterclick event and zoom's if the option is set.
*/

ClusterIcon.prototype.triggerClusterClick = function() {
var markerClusterer = this.cluster_.getMarkerClusterer();

// Trigger the clusterclick event.
google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);

if (markerClusterer.isZoomOnClick()) {
// Zoom into the cluster.
this.map_.fitBounds(this.cluster_.getBounds());
}
};


ライブラリの上記がcluster iconがクリックされた時のイベント部分です。

markerClusterer.isZoomOnClickはmarkerClustererのオプションです。

Name
Type
Description

zoomOnClick
boolean
Whether the default behaviour of clicking on a cluster is to zoom into it.

zoomOnClickがtrueのときにズームされるみたいです。

単純に常にズームしないのであればzoomOnClick:falseにすれば良いです。

また、例えばズームレベルが9未満のときにのみズームさせるのであれば、if (markerClusterer.isZoomOnClick()) {の部分に以下を追記すれば良いです。


markerclusterer.js

  if (markerClusterer.isZoomOnClick()) {

if(this.map_.getZoom() < 9){
// Zoom into the cluster.
this.map_.fitBounds(this.cluster_.getBounds());
}
}

私の場合は、単にmapをドラッグしたいだけなのに、cluster iconのところでドラッグしてしまうと、ドラッグした後にズームしてしまう:pouting_cat:のをなんとかしたかったので、上記の部分を「ドラッグしていたらズームしない」というように変えました。

参考:Gmaps Marker Clusterer