plugins/googlemaps/static/js/markerclusterer.js

   1 // ==ClosureCompiler==
   2 // @compilation_level ADVANCED_OPTIMIZATIONS
   3 // @externs_url http://closure-compiler.googlecode.com/svn/trunk/contrib/externs/maps/google_maps_api_v3.js
   4 // ==/ClosureCompiler==
   5
   6 /**
   7  * @name MarkerClusterer for Google Maps v3
   8  * @version version 1.0
   9  * @author Luke Mahe
  10  * @fileoverview
  11  * The library creates and manages per-zoom-level clusters for large amounts of
  12  * markers.
  13  * <br/>
  14  * This is a v3 implementation of the
  15  * <a href="http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/"
  16  * >v2 MarkerClusterer</a>.
  17  */
  18
  19 /**
  20  * Licensed under the Apache License, Version 2.0 (the "License");
  21  * you may not use this file except in compliance with the License.
  22  * You may obtain a copy of the License at
  23  *
  24  *     http://www.apache.org/licenses/LICENSE-2.0
  25  *
  26  * Unless required by applicable law or agreed to in writing, software
  27  * distributed under the License is distributed on an "AS IS" BASIS,
  28  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  29  * See the License for the specific language governing permissions and
  30  * limitations under the License.
  31  */
  32
  33
  34 /**
  35  * A Marker Clusterer that clusters markers.
  36  *
  37  * @param {google.maps.Map} map The Google map to attach to.
  38  * @param {Array.<google.maps.Marker>} opt_markers Optional markers to add to
  39  *   the cluster.
  40  * @param {Object} opt_options support the following options:
  41  *     'gridSize': (number) The grid size of a cluster in pixels.
  42  *     'maxZoom': (number) The maximum zoom level that a marker can be part of a
  43  *                cluster.
  44  *     'zoomOnClick': (boolean) Whether the default behaviour of clicking on a
  45  *                    cluster is to zoom into it.
  46  *     'averageCenter': (boolean) Wether the center of each cluster should be
  47  *                      the average of all markers in the cluster.
  48  *     'styles': (object) An object that has style properties:
  49  *       'url': (string) The image url.
  50  *       'height': (number) The image height.
  51  *       'width': (number) The image width.
  52  *       'anchor': (Array) The anchor position of the label text.
  53  *       'textColor': (string) The text color.
  54  *       'textSize': (number) The text size.
  55  * @constructor
  56  * @extends google.maps.OverlayView
  57  */
  58 function MarkerClusterer(map, opt_markers, opt_options) {
  59   // MarkerClusterer implements google.maps.OverlayView interface. We use the
  60   // extend function to extend MarkerClusterer with google.maps.OverlayView
  61   // because it might not always be available when the code is defined so we
  62   // look for it at the last possible moment. If it doesn't exist now then
  63   // there is no point going ahead :)
  64   this.extend(MarkerClusterer, google.maps.OverlayView);
  65   this.map_ = map;
  66
  67   /**
  68    * @type {Array.<google.maps.Marker>}
  69    * @private
  70    */
  71   this.markers_ = [];
  72
  73   /**
  74    *  @type {Array.<Cluster>}
  75    */
  76   this.clusters_ = [];
  77
  78   this.sizes = [53, 56, 66, 78, 90];
  79
  80   /**
  81    * @private
  82    */
  83   this.styles_ = [];
  84
  85   /**
  86    * @type {boolean}
  87    * @private
  88    */
  89   this.ready_ = false;
  90
  91   var options = opt_options || {};
  92
  93   /**
  94    * @type {number}
  95    * @private
  96    */
  97   this.gridSize_ = options['gridSize'] || 60;
  98
  99   /**
 100    * @type {?number}
 101    * @private
 102    */
 103   this.maxZoom_ = options['maxZoom'] || null;
 104
 105   this.styles_ = options['styles'] || [];
 106
 107   /**
 108    * @type {string}
 109    * @private
 110    */
 111   this.imagePath_ = options['imagePath'] ||
 112       this.MARKER_CLUSTER_IMAGE_PATH_;
 113
 114   /**
 115    * @type {string}
 116    * @private
 117    */
 118   this.imageExtension_ = options['imageExtension'] ||
 119       this.MARKER_CLUSTER_IMAGE_EXTENSION_;
 120
 121   /**
 122    * @type {boolean}
 123    * @private
 124    */
 125   this.zoomOnClick_ = true;
 126
 127   if (options['zoomOnClick'] != undefined) {
 128     this.zoomOnClick_ = options['zoomOnClick'];
 129   }
 130
 131   /**
 132    * @type {boolean}
 133    * @private
 134    */
 135   this.averageCenter_ = false;
 136
 137   if (options['averageCenter'] != undefined) {
 138     this.averageCenter_ = options['averageCenter'];
 139   }
 140
 141   this.setupStyles_();
 142
 143   this.setMap(map);
 144
 145   /**
 146    * @type {number}
 147    * @private
 148    */
 149   this.prevZoom_ = this.map_.getZoom();
 150
 151   // Add the map event listeners
 152   var that = this;
 153   google.maps.event.addListener(this.map_, 'zoom_changed', function() {
 154     var maxZoom = that.map_.mapTypes[that.map_.getMapTypeId()].maxZoom;
 155     var zoom = that.map_.getZoom();
 156     if (zoom < 0 || zoom > maxZoom) {
 157       return;
 158     }
 159
 160     if (that.prevZoom_ != zoom) {
 161       that.prevZoom_ = that.map_.getZoom();
 162       that.resetViewport();
 163     }
 164   });
 165
 166   google.maps.event.addListener(this.map_, 'idle', function() {
 167     that.redraw();
 168   });
 169
 170   // Finally, add the markers
 171   if (opt_markers && opt_markers.length) {
 172     this.addMarkers(opt_markers, false);
 173   }
 174 }
 175
 176
 177 /**
 178  * The marker cluster image path.
 179  *
 180  * @type {string}
 181  * @private
 182  */
 183 MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ =
 184     'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/' +
 185     'images/m';
 186
 187
 188 /**
 189  * The marker cluster image path.
 190  *
 191  * @type {string}
 192  * @private
 193  */
 194 MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_EXTENSION_ = 'png';
 195
 196
 197 /**
 198  * Extends a objects prototype by anothers.
 199  *
 200  * @param {Object} obj1 The object to be extended.
 201  * @param {Object} obj2 The object to extend with.
 202  * @return {Object} The new extended object.
 203  * @ignore
 204  */
 205 MarkerClusterer.prototype.extend = function(obj1, obj2) {
 206   return (function(object) {
 207     for (property in object.prototype) {
 208       this.prototype[property] = object.prototype[property];
 209     }
 210     return this;
 211   }).apply(obj1, [obj2]);
 212 };
 213
 214
 215 /**
 216  * Implementaion of the interface method.
 217  * @ignore
 218  */
 219 MarkerClusterer.prototype.onAdd = function() {
 220   this.setReady_(true);
 221 };
 222
 223
 224 /**
 225  * Implementation of the interface.
 226  * @ignore
 227  */
 228 MarkerClusterer.prototype.draw = function() {};
 229
 230
 231 /**
 232  * Sets up the styles object.
 233  *
 234  * @private
 235  */
 236 MarkerClusterer.prototype.setupStyles_ = function() {
 237   if (this.styles_.length) {
 238     return;
 239   }
 240
 241   for (var i = 0, size; size = this.sizes[i]; i++) {
 242     this.styles_.push({
 243       url: this.imagePath_ + (i + 1) + '.' + this.imageExtension_,
 244       height: size,
 245       width: size
 246     });
 247   }
 248 };
 249
 250
 251 /**
 252  *  Sets the styles.
 253  *
 254  *  @param {Object} styles The style to set.
 255  */
 256 MarkerClusterer.prototype.setStyles = function(styles) {
 257   this.styles_ = styles;
 258 };
 259
 260
 261 /**
 262  *  Gets the styles.
 263  *
 264  *  @return {Object} The styles object.
 265  */
 266 MarkerClusterer.prototype.getStyles = function() {
 267   return this.styles_;
 268 };
 269
 270
 271 /**
 272  * Whether zoom on click is set.
 273  *
 274  * @return {boolean} True if zoomOnClick_ is set.
 275  */
 276 MarkerClusterer.prototype.isZoomOnClick = function() {
 277   return this.zoomOnClick_;
 278 };
 279
 280 /**
 281  * Whether average center is set.
 282  *
 283  * @return {boolean} True if averageCenter_ is set.
 284  */
 285 MarkerClusterer.prototype.isAverageCenter = function() {
 286   return this.averageCenter_;
 287 };
 288
 289
 290 /**
 291  *  Returns the array of markers in the clusterer.
 292  *
 293  *  @return {Array.<google.maps.Marker>} The markers.
 294  */
 295 MarkerClusterer.prototype.getMarkers = function() {
 296   return this.markers_;
 297 };
 298
 299
 300 /**
 301  *  Returns the array of markers in the clusterer.
 302  *
 303  *  @return {Array.<google.maps.Marker>} The number of markers.
 304  */
 305 MarkerClusterer.prototype.getTotalMarkers = function() {
 306   return this.markers_;
 307 };
 308
 309
 310 /**
 311  *  Sets the max zoom for the clusterer.
 312  *
 313  *  @param {number} maxZoom The max zoom level.
 314  */
 315 MarkerClusterer.prototype.setMaxZoom = function(maxZoom) {
 316   this.maxZoom_ = maxZoom;
 317 };
 318
 319
 320 /**
 321  *  Gets the max zoom for the clusterer.
 322  *
 323  *  @return {number} The max zoom level.
 324  */
 325 MarkerClusterer.prototype.getMaxZoom = function() {
 326   return this.maxZoom_ || this.map_.mapTypes[this.map_.getMapTypeId()].maxZoom;
 327 };
 328
 329
 330 /**
 331  *  The function for calculating the cluster icon image.
 332  *
 333  *  @param {Array.<google.maps.Marker>} markers The markers in the clusterer.
 334  *  @param {number} numStyles The number of styles available.
 335  *  @return {Object} A object properties: 'text' (string) and 'index' (number).
 336  *  @private
 337  */
 338 MarkerClusterer.prototype.calculator_ = function(markers, numStyles) {
 339   var index = 0;
 340   var count = markers.length;
 341   var dv = count;
 342   while (dv !== 0) {
 343     dv = parseInt(dv / 10, 10);
 344     index++;
 345   }
 346
 347   index = Math.min(index, numStyles);
 348   return {
 349     text: count,
 350     index: index
 351   };
 352 };
 353
 354
 355 /**
 356  * Set the calculator function.
 357  *
 358  * @param {function(Array, number)} calculator The function to set as the
 359  *     calculator. The function should return a object properties:
 360  *     'text' (string) and 'index' (number).
 361  *
 362  */
 363 MarkerClusterer.prototype.setCalculator = function(calculator) {
 364   this.calculator_ = calculator;
 365 };
 366
 367
 368 /**
 369  * Get the calculator function.
 370  *
 371  * @return {function(Array, number)} the calculator function.
 372  */
 373 MarkerClusterer.prototype.getCalculator = function() {
 374   return this.calculator_;
 375 };
 376
 377
 378 /**
 379  * Add an array of markers to the clusterer.
 380  *
 381  * @param {Array.<google.maps.Marker>} markers The markers to add.
 382  * @param {boolean} opt_nodraw Whether to redraw the clusters.
 383  */
 384 MarkerClusterer.prototype.addMarkers = function(markers, opt_nodraw) {
 385   for (var i = 0, marker; marker = markers[i]; i++) {
 386     this.pushMarkerTo_(marker);
 387   }
 388   if (!opt_nodraw) {
 389     this.redraw();
 390   }
 391 };
 392
 393
 394 /**
 395  * Pushes a marker to the clusterer.
 396  *
 397  * @param {google.maps.Marker} marker The marker to add.
 398  * @private
 399  */
 400 MarkerClusterer.prototype.pushMarkerTo_ = function(marker) {
 401   marker.setVisible(false);
 402   marker.setMap(null);
 403   marker.isAdded = false;
 404   if (marker['draggable']) {
 405     // If the marker is draggable add a listener so we update the clusters on
 406     // the drag end.
 407     var that = this;
 408     google.maps.event.addListener(marker, 'dragend', function() {
 409       marker.isAdded = false;
 410       that.resetViewport();
 411       that.redraw();
 412     });
 413   }
 414   this.markers_.push(marker);
 415 };
 416
 417
 418 /**
 419  * Adds a marker to the clusterer and redraws if needed.
 420  *
 421  * @param {google.maps.Marker} marker The marker to add.
 422  * @param {boolean} opt_nodraw Whether to redraw the clusters.
 423  */
 424 MarkerClusterer.prototype.addMarker = function(marker, opt_nodraw) {
 425   this.pushMarkerTo_(marker);
 426   if (!opt_nodraw) {
 427     this.redraw();
 428   }
 429 };
 430
 431
 432 /**
 433  * Remove a marker from the cluster.
 434  *
 435  * @param {google.maps.Marker} marker The marker to remove.
 436  * @return {boolean} True if the marker was removed.
 437  */
 438 MarkerClusterer.prototype.removeMarker = function(marker) {
 439   var index = -1;
 440   if (this.markers_.indexOf) {
 441     index = this.markers_.indexOf(marker);
 442   } else {
 443     for (var i = 0, m; m = this.markers_[i]; i++) {
 444       if (m == marker) {
 445         index = i;
 446         continue;
 447       }
 448     }
 449   }
 450
 451   if (index == -1) {
 452     // Marker is not in our list of markers.
 453     return false;
 454   }
 455
 456   this.markers_.splice(index, 1);
 457   marker.setVisible(false);
 458   marker.setMap(null);
 459
 460   this.resetViewport();
 461   this.redraw();
 462   return true;
 463 };
 464
 465
 466 /**
 467  * Sets the clusterer's ready state.
 468  *
 469  * @param {boolean} ready The state.
 470  * @private
 471  */
 472 MarkerClusterer.prototype.setReady_ = function(ready) {
 473   if (!this.ready_) {
 474     this.ready_ = ready;
 475     this.createClusters_();
 476   }
 477 };
 478
 479
 480 /**
 481  * Returns the number of clusters in the clusterer.
 482  *
 483  * @return {number} The number of clusters.
 484  */
 485 MarkerClusterer.prototype.getTotalClusters = function() {
 486   return this.clusters_.length;
 487 };
 488
 489
 490 /**
 491  * Returns the google map that the clusterer is associated with.
 492  *
 493  * @return {google.maps.Map} The map.
 494  */
 495 MarkerClusterer.prototype.getMap = function() {
 496   return this.map_;
 497 };
 498
 499
 500 /**
 501  * Sets the google map that the clusterer is associated with.
 502  *
 503  * @param {google.maps.Map} map The map.
 504  */
 505 MarkerClusterer.prototype.setMap = function(map) {
 506   this.map_ = map;
 507 };
 508
 509
 510 /**
 511  * Returns the size of the grid.
 512  *
 513  * @return {number} The grid size.
 514  */
 515 MarkerClusterer.prototype.getGridSize = function() {
 516   return this.gridSize_;
 517 };
 518
 519
 520 /**
 521  * Returns the size of the grid.
 522  *
 523  * @param {number} size The grid size.
 524  */
 525 MarkerClusterer.prototype.setGridSize = function(size) {
 526   this.gridSize_ = size;
 527 };
 528
 529
 530 /**
 531  * Extends a bounds object by the grid size.
 532  *
 533  * @param {google.maps.LatLngBounds} bounds The bounds to extend.
 534  * @return {google.maps.LatLngBounds} The extended bounds.
 535  */
 536 MarkerClusterer.prototype.getExtendedBounds = function(bounds) {
 537   var projection = this.getProjection();
 538
 539   // Turn the bounds into latlng.
 540   var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
 541       bounds.getNorthEast().lng());
 542   var bl = new google.maps.LatLng(bounds.getSouthWest().lat(),
 543       bounds.getSouthWest().lng());
 544
 545   // Convert the points to pixels and the extend out by the grid size.
 546   var trPix = projection.fromLatLngToDivPixel(tr);
 547   trPix.x += this.gridSize_;
 548   trPix.y -= this.gridSize_;
 549
 550   var blPix = projection.fromLatLngToDivPixel(bl);
 551   blPix.x -= this.gridSize_;
 552   blPix.y += this.gridSize_;
 553
 554   // Convert the pixel points back to LatLng
 555   var ne = projection.fromDivPixelToLatLng(trPix);
 556   var sw = projection.fromDivPixelToLatLng(blPix);
 557
 558   // Extend the bounds to contain the new bounds.
 559   bounds.extend(ne);
 560   bounds.extend(sw);
 561
 562   return bounds;
 563 };
 564
 565
 566 /**
 567  * Determins if a marker is contained in a bounds.
 568  *
 569  * @param {google.maps.Marker} marker The marker to check.
 570  * @param {google.maps.LatLngBounds} bounds The bounds to check against.
 571  * @return {boolean} True if the marker is in the bounds.
 572  * @private
 573  */
 574 MarkerClusterer.prototype.isMarkerInBounds_ = function(marker, bounds) {
 575   return bounds.contains(marker.getPosition());
 576 };
 577
 578
 579 /**
 580  * Clears all clusters and markers from the clusterer.
 581  */
 582 MarkerClusterer.prototype.clearMarkers = function() {
 583   this.resetViewport();
 584
 585   // Set the markers a empty array.
 586   this.markers_ = [];
 587 };
 588
 589
 590 /**
 591  * Clears all existing clusters and recreates them.
 592  */
 593 MarkerClusterer.prototype.resetViewport = function() {
 594   // Remove all the clusters
 595   for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {
 596     cluster.remove();
 597   }
 598
 599   // Reset the markers to not be added and to be invisible.
 600   for (var i = 0, marker; marker = this.markers_[i]; i++) {
 601     marker.isAdded = false;
 602     marker.setMap(null);
 603     marker.setVisible(false);
 604   }
 605
 606   this.clusters_ = [];
 607 };
 608
 609
 610 /**
 611  * Redraws the clusters.
 612  */
 613 MarkerClusterer.prototype.redraw = function() {
 614   this.createClusters_();
 615 };
 616
 617
 618 /**
 619  * Creates the clusters.
 620  *
 621  * @private
 622  */
 623 MarkerClusterer.prototype.createClusters_ = function() {
 624   if (!this.ready_) {
 625     return;
 626   }
 627
 628   // Get our current map view bounds.
 629   // Create a new bounds object so we don't affect the map.
 630   var mapBounds = new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(),
 631       this.map_.getBounds().getNorthEast());
 632   var bounds = this.getExtendedBounds(mapBounds);
 633
 634   for (var i = 0, marker; marker = this.markers_[i]; i++) {
 635     var added = false;
 636     if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {
 637       for (var j = 0, cluster; cluster = this.clusters_[j]; j++) {
 638         if (!added && cluster.getCenter() &&
 639             cluster.isMarkerInClusterBounds(marker)) {
 640           added = true;
 641           cluster.addMarker(marker);
 642           break;
 643         }
 644       }
 645
 646       if (!added) {
 647         // Create a new cluster.
 648         var cluster = new Cluster(this);
 649         cluster.addMarker(marker);
 650         this.clusters_.push(cluster);
 651       }
 652     }
 653   }
 654 };
 655
 656
 657 /**
 658  * A cluster that contains markers.
 659  *
 660  * @param {MarkerClusterer} markerClusterer The markerclusterer that this
 661  *     cluster is associated with.
 662  * @constructor
 663  * @ignore
 664  */
 665 function Cluster(markerClusterer) {
 666   this.markerClusterer_ = markerClusterer;
 667   this.map_ = markerClusterer.getMap();
 668   this.gridSize_ = markerClusterer.getGridSize();
 669   this.averageCenter_ = markerClusterer.isAverageCenter();
 670   this.center_ = null;
 671   this.markers_ = [];
 672   this.bounds_ = null;
 673   this.clusterIcon_ = new ClusterIcon(this, markerClusterer.getStyles(),
 674       markerClusterer.getGridSize());
 675 }
 676
 677 /**
 678  * Determins if a marker is already added to the cluster.
 679  *
 680  * @param {google.maps.Marker} marker The marker to check.
 681  * @return {boolean} True if the marker is already added.
 682  */
 683 Cluster.prototype.isMarkerAlreadyAdded = function(marker) {
 684   if (this.markers_.indexOf) {
 685     return this.markers_.indexOf(marker) != -1;
 686   } else {
 687     for (var i = 0, m; m = this.markers_[i]; i++) {
 688       if (m == marker) {
 689         return true;
 690       }
 691     }
 692   }
 693   return false;
 694 };
 695
 696
 697 /**
 698  * Add a marker the cluster.
 699  *
 700  * @param {google.maps.Marker} marker The marker to add.
 701  * @return {boolean} True if the marker was added.
 702  */
 703 Cluster.prototype.addMarker = function(marker) {
 704   if (this.isMarkerAlreadyAdded(marker)) {
 705     return false;
 706   }
 707
 708   if (!this.center_) {
 709     this.center_ = marker.getPosition();
 710     this.calculateBounds_();
 711   } else {
 712     if (this.averageCenter_) {
 713       var lat = (this.center_.lat() + marker.getPosition().lat()) / 2;
 714       var lng = (this.center_.lng() + marker.getPosition().lng()) / 2;
 715       this.center_ = new google.maps.LatLng(lat, lng);
 716       this.calculateBounds_();
 717     }
 718   }
 719
 720
 721   if (this.markers_.length == 0) {
 722     // Only 1 marker in this cluster so show the marker.
 723     marker.setMap(this.map_);
 724     marker.setVisible(true);
 725   } else if (this.markers_.length == 1) {
 726     // Hide the 1 marker that was showing.
 727     this.markers_[0].setMap(null);
 728     this.markers_[0].setVisible(false);
 729   }
 730
 731   marker.isAdded = true;
 732   this.markers_.push(marker);
 733
 734   this.updateIcon();
 735   return true;
 736 };
 737
 738
 739 /**
 740  * Returns the marker clusterer that the cluster is associated with.
 741  *
 742  * @return {MarkerClusterer} The associated marker clusterer.
 743  */
 744 Cluster.prototype.getMarkerClusterer = function() {
 745   return this.markerClusterer_;
 746 };
 747
 748
 749 /**
 750  * Returns the bounds of the cluster.
 751  *
 752  * @return {google.maps.LatLngBounds} the cluster bounds.
 753  */
 754 Cluster.prototype.getBounds = function() {
 755   this.calculateBounds_();
 756   return this.bounds_;
 757 };
 758
 759
 760 /**
 761  * Removes the cluster
 762  */
 763 Cluster.prototype.remove = function() {
 764   this.clusterIcon_.remove();
 765   this.markers_.length = 0;
 766   delete this.markers_;
 767 };
 768
 769
 770 /**
 771  * Returns the center of the cluster.
 772  *
 773  * @return {number} The cluster center.
 774  */
 775 Cluster.prototype.getSize = function() {
 776   return this.markers_.length;
 777 };
 778
 779
 780 /**
 781  * Returns the center of the cluster.
 782  *
 783  * @return {Array.<google.maps.Marker>} The cluster center.
 784  */
 785 Cluster.prototype.getMarkers = function() {
 786   return this.markers_;
 787 };
 788
 789
 790 /**
 791  * Returns the center of the cluster.
 792  *
 793  * @return {google.maps.LatLng} The cluster center.
 794  */
 795 Cluster.prototype.getCenter = function() {
 796   return this.center_;
 797 };
 798
 799
 800 /**
 801  * Calculated the bounds of the cluster with the grid.
 802  *
 803  * @private
 804  */
 805 Cluster.prototype.calculateBounds_ = function() {
 806   var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
 807   this.bounds_ = this.markerClusterer_.getExtendedBounds(bounds);
 808 };
 809
 810
 811 /**
 812  * Determines if a marker lies in the clusters bounds.
 813  *
 814  * @param {google.maps.Marker} marker The marker to check.
 815  * @return {boolean} True if the marker lies in the bounds.
 816  */
 817 Cluster.prototype.isMarkerInClusterBounds = function(marker) {
 818   return this.bounds_.contains(marker.getPosition());
 819 };
 820
 821
 822 /**
 823  * Returns the map that the cluster is associated with.
 824  *
 825  * @return {google.maps.Map} The map.
 826  */
 827 Cluster.prototype.getMap = function() {
 828   return this.map_;
 829 };
 830
 831
 832 /**
 833  * Updates the cluster icon
 834  */
 835 Cluster.prototype.updateIcon = function() {
 836   var zoom = this.map_.getZoom();
 837   var mz = this.markerClusterer_.getMaxZoom();
 838
 839   if (zoom > mz) {
 840     // The zoom is greater than our max zoom so show all the markers in cluster.
 841     for (var i = 0, marker; marker = this.markers_[i]; i++) {
 842       marker.setMap(this.map_);
 843       marker.setVisible(true);
 844     }
 845     return;
 846   }
 847
 848   if (this.markers_.length < 2) {
 849     // We have 0 or 1 markers so hide the icon.
 850     this.clusterIcon_.hide();
 851     return;
 852   }
 853
 854   var numStyles = this.markerClusterer_.getStyles().length;
 855   var sums = this.markerClusterer_.getCalculator()(this.markers_, numStyles);
 856   this.clusterIcon_.setCenter(this.center_);
 857   this.clusterIcon_.setSums(sums);
 858   this.clusterIcon_.show();
 859 };
 860
 861
 862 /**
 863  * A cluster icon
 864  *
 865  * @param {Cluster} cluster The cluster to be associated with.
 866  * @param {Object} styles An object that has style properties:
 867  *     'url': (string) The image url.
 868  *     'height': (number) The image height.
 869  *     'width': (number) The image width.
 870  *     'anchor': (Array) The anchor position of the label text.
 871  *     'textColor': (string) The text color.
 872  *     'textSize': (number) The text size.
 873  * @param {number} opt_padding Optional padding to apply to the cluster icon.
 874  * @constructor
 875  * @extends google.maps.OverlayView
 876  * @ignore
 877  */
 878 function ClusterIcon(cluster, styles, opt_padding) {
 879   cluster.getMarkerClusterer().extend(ClusterIcon, google.maps.OverlayView);
 880
 881   this.styles_ = styles;
 882   this.padding_ = opt_padding || 0;
 883   this.cluster_ = cluster;
 884   this.center_ = null;
 885   this.map_ = cluster.getMap();
 886   this.div_ = null;
 887   this.sums_ = null;
 888   this.visible_ = false;
 889
 890   this.setMap(this.map_);
 891 }
 892
 893
 894 /**
 895  * Triggers the clusterclick event and zoom's if the option is set.
 896  */
 897 ClusterIcon.prototype.triggerClusterClick = function() {
 898   var markerClusterer = this.cluster_.getMarkerClusterer();
 899
 900   // Trigger the clusterclick event.
 901   google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);
 902
 903   if (markerClusterer.isZoomOnClick()) {
 904     // Center the map on this cluster.
 905     this.map_.panTo(this.cluster_.getCenter());
 906
 907     // Zoom into the cluster.
 908     this.map_.fitBounds(this.cluster_.getBounds());
 909   }
 910 };
 911
 912
 913 /**
 914  * Adding the cluster icon to the dom.
 915  * @ignore
 916  */
 917 ClusterIcon.prototype.onAdd = function() {
 918   this.div_ = document.createElement('DIV');
 919   if (this.visible_) {
 920     var pos = this.getPosFromLatLng_(this.center_);
 921     this.div_.style.cssText = this.createCss(pos);
 922     this.div_.innerHTML = this.sums_.text;
 923   }
 924
 925   var panes = this.getPanes();
 926   panes.overlayImage.appendChild(this.div_);
 927
 928   var that = this;
 929   google.maps.event.addDomListener(this.div_, 'click', function() {
 930     that.triggerClusterClick();
 931   });
 932 };
 933
 934
 935 /**
 936  * Returns the position to place the div dending on the latlng.
 937  *
 938  * @param {google.maps.LatLng} latlng The position in latlng.
 939  * @return {google.maps.Point} The position in pixels.
 940  * @private
 941  */
 942 ClusterIcon.prototype.getPosFromLatLng_ = function(latlng) {
 943   var pos = this.getProjection().fromLatLngToDivPixel(latlng);
 944   pos.x -= parseInt(this.width_ / 2, 10);
 945   pos.y -= parseInt(this.height_ / 2, 10);
 946   return pos;
 947 };
 948
 949
 950 /**
 951  * Draw the icon.
 952  * @ignore
 953  */
 954 ClusterIcon.prototype.draw = function() {
 955   if (this.visible_) {
 956     var pos = this.getPosFromLatLng_(this.center_);
 957     this.div_.style.top = pos.y + 'px';
 958     this.div_.style.left = pos.x + 'px';
 959   }
 960 };
 961
 962
 963 /**
 964  * Hide the icon.
 965  */
 966 ClusterIcon.prototype.hide = function() {
 967   if (this.div_) {
 968     this.div_.style.display = 'none';
 969   }
 970   this.visible_ = false;
 971 };
 972
 973
 974 /**
 975  * Position and show the icon.
 976  */
 977 ClusterIcon.prototype.show = function() {
 978   if (this.div_) {
 979     var pos = this.getPosFromLatLng_(this.center_);
 980     this.div_.style.cssText = this.createCss(pos);
 981     this.div_.style.display = '';
 982   }
 983   this.visible_ = true;
 984 };
 985
 986
 987 /**
 988  * Remove the icon from the map
 989  */
 990 ClusterIcon.prototype.remove = function() {
 991   this.setMap(null);
 992 };
 993
 994
 995 /**
 996  * Implementation of the onRemove interface.
 997  * @ignore
 998  */
 999 ClusterIcon.prototype.onRemove = function() {
1000   if (this.div_ && this.div_.parentNode) {
1001     this.hide();
1002     this.div_.parentNode.removeChild(this.div_);
1003     this.div_ = null;
1004   }
1005 };
1006
1007
1008 /**
1009  * Set the sums of the icon.
1010  *
1011  * @param {Object} sums The sums containing:
1012  *   'text': (string) The text to display in the icon.
1013  *   'index': (number) The style index of the icon.
1014  */
1015 ClusterIcon.prototype.setSums = function(sums) {
1016   this.sums_ = sums;
1017   this.text_ = sums.text;
1018   this.index_ = sums.index;
1019   if (this.div_) {
1020     this.div_.innerHTML = sums.text;
1021   }
1022
1023   this.useStyle();
1024 };
1025
1026
1027 /**
1028  * Sets the icon to the the styles.
1029  */
1030 ClusterIcon.prototype.useStyle = function() {
1031   var index = Math.max(0, this.sums_.index - 1);
1032   index = Math.min(this.styles_.length - 1, index);
1033   var style = this.styles_[index];
1034   this.url_ = style['url'];
1035   this.height_ = style['height'];
1036   this.width_ = style['width'];
1037   this.textColor_ = style['textColor'];
1038   this.anchor = style['anchor'];
1039   this.textSize_ = style['textSize'];
1040 };
1041
1042
1043 /**
1044  * Sets the center of the icon.
1045  *
1046  * @param {google.maps.LatLng} center The latlng to set as the center.
1047  */
1048 ClusterIcon.prototype.setCenter = function(center) {
1049   this.center_ = center;
1050 };
1051
1052
1053 /**
1054  * Create the css text based on the position of the icon.
1055  *
1056  * @param {google.maps.Point} pos The position.
1057  * @return {string} The css style text.
1058  */
1059 ClusterIcon.prototype.createCss = function(pos) {
1060   var style = [];
1061   if (document.all) {
1062     style.push('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(' +
1063         'sizingMethod=scale,src="' + this.url_ + '");');
1064   } else {
1065     style.push('background:url(' + this.url_ + ');');
1066   }
1067
1068   if (typeof this.anchor_ === 'object') {
1069     if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 &&
1070         this.anchor_[0] < this.height_) {
1071       style.push('height:' + (this.height_ - this.anchor_[0]) +
1072           'px; padding-top:' + this.anchor_[0] + 'px;');
1073     } else {
1074       style.push('height:' + this.height_ + 'px; line-height:' + this.height_ +
1075           'px;');
1076     }
1077     if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 &&
1078         this.anchor_[1] < this.width_) {
1079       style.push('width:' + (this.width_ - this.anchor_[1]) +
1080           'px; padding-left:' + this.anchor_[1] + 'px;');
1081     } else {
1082       style.push('width:' + this.width_ + 'px; text-align:center;');
1083     }
1084   } else {
1085     style.push('height:' + this.height_ + 'px; line-height:' +
1086         this.height_ + 'px; width:' + this.width_ + 'px; text-align:center;');
1087   }
1088
1089   var txtColor = this.textColor_ ? this.textColor_ : 'black';
1090   var txtSize = this.textSize_ ? this.textSize_ : 11;
1091
1092   style.push('cursor:pointer; top:' + pos.y + 'px; left:' +
1093       pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' +
1094       txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold');
1095   return style.join('');
1096 };
1097
1098
1099 // Export Symbols for Closure
1100 // If you are not going to compile with closure then you can remove the
1101 // code below.
1102 window['MarkerClusterer'] = MarkerClusterer;
1103 MarkerClusterer.prototype['addMarker'] = MarkerClusterer.prototype.addMarker;
1104 MarkerClusterer.prototype['addMarkers'] = MarkerClusterer.prototype.addMarkers;
1105 MarkerClusterer.prototype['clearMarkers'] =
1106     MarkerClusterer.prototype.clearMarkers;
1107 MarkerClusterer.prototype['getCalculator'] =
1108     MarkerClusterer.prototype.getCalculator;
1109 MarkerClusterer.prototype['getGridSize'] =
1110     MarkerClusterer.prototype.getGridSize;
1111 MarkerClusterer.prototype['getMap'] = MarkerClusterer.prototype.getMap;
1112 MarkerClusterer.prototype['getMarkers'] = MarkerClusterer.prototype.getMarkers;
1113 MarkerClusterer.prototype['getMaxZoom'] = MarkerClusterer.prototype.getMaxZoom;
1114 MarkerClusterer.prototype['getStyles'] = MarkerClusterer.prototype.getStyles;
1115 MarkerClusterer.prototype['getTotalClusters'] =
1116     MarkerClusterer.prototype.getTotalClusters;
1117 MarkerClusterer.prototype['getTotalMarkers'] =
1118     MarkerClusterer.prototype.getTotalMarkers;
1119 MarkerClusterer.prototype['redraw'] = MarkerClusterer.prototype.redraw;
1120 MarkerClusterer.prototype['removeMarker'] =
1121     MarkerClusterer.prototype.removeMarker;
1122 MarkerClusterer.prototype['resetViewport'] =
1123     MarkerClusterer.prototype.resetViewport;
1124 MarkerClusterer.prototype['setCalculator'] =
1125     MarkerClusterer.prototype.setCalculator;
1126 MarkerClusterer.prototype['setGridSize'] =
1127     MarkerClusterer.prototype.setGridSize;
1128 MarkerClusterer.prototype['onAdd'] = MarkerClusterer.prototype.onAdd;
1129 MarkerClusterer.prototype['draw'] = MarkerClusterer.prototype.draw;
1130
1131 Cluster.prototype['getCenter'] = Cluster.prototype.getCenter;
1132 Cluster.prototype['getSize'] = Cluster.prototype.getSize;
1133 Cluster.prototype['getMarkers'] = Cluster.prototype.getMarkers;
1134
1135 ClusterIcon.prototype['onAdd'] = ClusterIcon.prototype.onAdd;
1136 ClusterIcon.prototype['draw'] = ClusterIcon.prototype.draw;
1137 ClusterIcon.prototype['onRemove'] = ClusterIcon.prototype.onRemove;