CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3markerclusterer
Tom Duke
Tom Duke

Reputation: 96

Error when restricting zoom levels using MarkerClusterer in Google Maps API v3

I'm using code found here: Integrating Spiderfier JS into markerClusterer V3 to explode multi-markers with exact same long / lat to restrict zoom levels when clicking on MarkerClusterer created clusters containing points at the same location.

Live example is here: http://www.adultlearnersfestival.com/newsite/yourarea/map.html

I'm getting an error in Firebug however:

Error: TypeError: markers is undefined

and can't work out what's causing it. The specific code is:

var minClusterZoom = 14;
mc.setMaxZoom(minClusterZoom);
gm.event.addListener(mc, 'clusterclick', function(cluster) {
  map.fitBounds(cluster.getBounds()); // Fit the bounds of the cluster clicked on
  if( map.getZoom() > minClusterZoom+1 ) // If zoomed in past 15 (first level without clustering), zoom out to 15
  map.setZoom(minClusterZoom+1);
});

Any help much appreciated. - Tom

Upvotes: 1

Views: 2266

Answers (3)

tiberakis
tiberakis

Reputation: 1

I solved the issue changing this:

Cluster.prototype.getBounds = function() {
  var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
  var markers = this.getMarkers();
  for (var i = 0, marker; marker = markers[i]; i++) {
    bounds.extend(marker.getPosition());
  }
  return bounds;
};

to this:

Cluster.prototype.getBounds = function() {
  var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
  var markers = this.getMarkers();
  var minZoom =10 
  mc.setMaxZoom(minZoom);//The maximum zoom level that a marker can be part of a cluster  
  for (var i = 0; i < markers.length; i++) {
    bounds.extend(marker.getPosition());//Extends this bounds to contain the given point.
  }  
  if( map.getZoom() > minZoom+1 ){// If zoomed in past 11, the first level without clustering, zoom out to 11.
  map.setZoom(minZoom+1);
  } 
  return bounds;

};

Upvotes: 0

geocodezip
geocodezip

Reputation: 161384

Looks like an error in the MarkerClusterer to me. Inside this function in the for loop, markers is undefined, which means this.getMarkers() is returning undefined, looks to me like it is just wrong:

/**
 * Returns the bounds of the cluster.
 *
 * @return {google.maps.LatLngBounds} the cluster bounds.
 */
Cluster.prototype.getBounds = function() {
  var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
  var markers = this.getMarkers();
  for (var i = 0, marker; marker = markers[i]; i++) {
    bounds.extend(marker.getPosition());
  }
  return bounds;
};

probably should be something like (not tested):

/**
 * Returns the bounds of the cluster.
 *
 * @return {google.maps.LatLngBounds} the cluster bounds.
 */
Cluster.prototype.getBounds = function() {
  var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
  var markers = this.getMarkers();
  if (markers && markers.length) 
  {
    for (var i = 0; i < markers.length; i++) {
      bounds.extend(markers[i].getPosition());
    }
  } 
  return bounds;
};

Works using MarkerClustererPlus

Upvotes: 0

Tom Duke
Tom Duke

Reputation: 96

I took a different approach suggested here: markerClusterer on click zoom and edited the MarkerClusterer source as follows

from this

/**
 * 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());
  }
};

to this

/**
 * 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());

    // modified zoom in function
        if( this.map_.getZoom() > markerClusterer.getMaxZoom()+1 )
          this.map_.setZoom(markerClusterer.getMaxZoom()+1);
  }
};

Upvotes: 1

Related Questions