1

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

3 Answers 3

1

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);
  }
};
0

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

6
  • Hi - thanks for looking at this. I amended MarkerClusterer as suggested and while I'm no longer getting the Firebug error message, the zoom restriction is now not working: adultlearnersfestival.com/newsite/yourarea/map.html - Tom
    – Tom Duke
    Oct 17, 2012 at 11:50
  • Your zoom limiting code depended on the error preventing the zoom from actually happening.
    – geocodezip
    Oct 17, 2012 at 13:08
  • Ok - not good to depend on an error I would think. I have tried a slightly different approach outlined in the other answer which is working for me. Thanks again - and big thanks for your geocodezip.com site, it's been a great help.
    – Tom Duke
    Oct 17, 2012 at 13:38
  • Created an issue for this: code.google.com/p/google-maps-utility-library-v3/issues/…
    – geocodezip
    Oct 17, 2012 at 14:24
  • Gary Little suggested trying MarkerClustererPlus, that doesn't seem to have the issue.
    – geocodezip
    Nov 26, 2012 at 0:24
0

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;

};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.