Add cssClass option to override any styles in css

src/markerclusterer.js

@@ -43,6 +43,8 @@
  *                cluster.
  *     'zoomOnClick': (boolean) Whether the default behaviour of clicking on a
  *                    cluster is to zoom into it.
+ *     'maxZoomOnClick': (number) The maximum zoom level that will be applied to
+ *                       map on click on cluster.
  *     'averageCenter': (boolean) Wether the center of each cluster should be
  *                      the average of all markers in the cluster.
  *     'minimumClusterSize': (number) The minimum number of markers to be in a
@@ -87,6 +89,11 @@ function MarkerClusterer(map, opt_markers, opt_options) {
    */
   this.styles_ = [];
 
+  /**
+   * @private
+   */
+  this.cssClass_ = null;
+
   /**
    * @type {boolean}
    * @private
@@ -115,6 +122,8 @@ function MarkerClusterer(map, opt_markers, opt_options) {
 
   this.styles_ = options['styles'] || [];
 
+  this.cssClass_ = options['cssClass'] || null;
+
   /**
    * @type {string}
    * @private
@@ -139,6 +148,16 @@ function MarkerClusterer(map, opt_markers, opt_options) {
     this.zoomOnClick_ = options['zoomOnClick'];
   }
 
+  /**
+   * @type {number}
+   * @private
+   */
+  this.maxZoomOnClick_ = 20;
+
+  if (options['maxZoomOnClick'] != undefined) {
+    this.maxZoomOnClick_ = options['maxZoomOnClick'];
+  }
+
   /**
    * @type {boolean}
    * @private
@@ -1052,6 +1071,9 @@ ClusterIcon.prototype.triggerClusterClick = function(event) {
   google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_, event);
 
   if (markerClusterer.isZoomOnClick()) {
+    google.maps.event.addListenerOnce(this.map_, 'bounds_changed', function(e) {
+      if (this.getZoom() > markerClusterer.maxZoomOnClick_) this.setZoom(markerClusterer.maxZoomOnClick_);
+    });
     // Zoom into the cluster.
     this.map_.fitBounds(this.cluster_.getBounds());
   }
@@ -1068,6 +1090,10 @@ ClusterIcon.prototype.onAdd = function() {
     var pos = this.getPosFromLatLng_(this.center_);
     this.div_.style.cssText = this.createCss(pos);
     this.div_.innerHTML = this.sums_.text;
+    var markerClusterer = this.cluster_.getMarkerClusterer();
+    if (markerClusterer.cssClass_) {
+ 	    this.div_.className = markerClusterer.cssClass_;
+ 	  }
   }
 
   var panes = this.getPanes();
@@ -1302,3 +1328,5 @@ Cluster.prototype['getMarkers'] = Cluster.prototype.getMarkers;
 ClusterIcon.prototype['onAdd'] = ClusterIcon.prototype.onAdd;
 ClusterIcon.prototype['draw'] = ClusterIcon.prototype.draw;
 ClusterIcon.prototype['onRemove'] = ClusterIcon.prototype.onRemove;
+
+module.exports = MarkerClusterer;