https://krasaderevni.ru/bitrix/templates/kdn/js/markerclusterer.js

1// ==ClosureCompiler==
2// @compilation_level ADVANCED_OPTIMIZATIONS
3// @externs_url https://raw.githubusercontent.com/google/closure-compiler/master/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 * @license
21 * Copyright 2010 Google Inc. All Rights Reserved.
22 *
23 * Licensed under the Apache License, Version 2.0 (the "License");
24 * you may not use this file except in compliance with the License.
25 * You may obtain a copy of the License at
26 *
27 *     http://www.apache.org/licenses/LICENSE-2.0
28 *
29 * Unless required by applicable law or agreed to in writing, software
30 * distributed under the License is distributed on an "AS IS" BASIS,
31 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
32 * See the License for the specific language governing permissions and
33 * limitations under the License.
34 */
35
36
37/**
38 * A Marker Clusterer that clusters markers.
39 *
40 * @param {google.maps.Map} map The Google map to attach to.
41 * @param {Array.<google.maps.Marker>=} opt_markers Optional markers to add to
42 *   the cluster.
43 * @param {Object=} opt_options support the following options:
44 *     'gridSize': (number) The grid size of a cluster in pixels.
45 *     'maxZoom': (number) The maximum zoom level that a marker can be part of a
46 *                cluster.
47 *     'zoomOnClick': (boolean) Whether the default behaviour of clicking on a
48 *                    cluster is to zoom into it.
49 *     'averageCenter': (boolean) Whether the center of each cluster should be
50 *                      the average of all markers in the cluster.
51 *     'minimumClusterSize': (number) The minimum number of markers to be in a
52 *                           cluster before the markers are hidden and a count
53 *                           is shown.
54 *     'styles': (object) An object that has style properties:
55 *       'url': (string) The image url.
56 *       'height': (number) The image height.
57 *       'width': (number) The image width.
58 *       'anchor': (Array) The anchor position of the label text.
59 *       'textColor': (string) The text color.
60 *       'textSize': (number) The text size.
61 *       'backgroundPosition': (string) The position of the backgound x, y.
62 *       'iconAnchor': (Array) The anchor position of the icon x, y.
63 * @constructor
64 * @extends google.maps.OverlayView
65 */
66function MarkerClusterer(map, opt_markers, opt_options) {
67  // MarkerClusterer implements google.maps.OverlayView interface. We use the
68  // extend function to extend MarkerClusterer with google.maps.OverlayView
69  // because it might not always be available when the code is defined so we
70  // look for it at the last possible moment. If it doesn't exist now then
71  // there is no point going ahead :)
72  this.extend(MarkerClusterer, google.maps.OverlayView);
73  this.map_ = map;
74
75  /**
76   * @type {Array.<google.maps.Marker>}
77   * @private
78   */
79  this.markers_ = [];
80
81  /**
82   *  @type {Array.<Cluster>}
83   */
84  this.clusters_ = [];
85
86  this.sizes = [53, 56, 66, 78, 90];
87
88  /**
89   * @private
90   */
91  this.styles_ = [];
92
93  /**
94   * @type {boolean}
95   * @private
96   */
97  this.ready_ = false;
98
99  var options = opt_options || {};
100
101  /**
102   * @type {number}
103   * @private
104   */
105  this.gridSize_ = options['gridSize'] || 60;
106
107  /**
108   * @private
109   */
110  this.minClusterSize_ = options['minimumClusterSize'] || 2;
111
112
113  /**
114   * @type {?number}
115   * @private
116   */
117  this.maxZoom_ = options['maxZoom'] || null;
118
119  this.styles_ = options['styles'] || [];
120
121  /**
122   * @type {string}
123   * @private
124   */
125  this.imagePath_ = options['imagePath'] ||
126      this.MARKER_CLUSTER_IMAGE_PATH_;
127
128  /**
129   * @type {string}
130   * @private
131   */
132  this.imageExtension_ = options['imageExtension'] ||
133      this.MARKER_CLUSTER_IMAGE_EXTENSION_;
134
135  /**
136   * @type {boolean}
137   * @private
138   */
139  this.zoomOnClick_ = true;
140
141  if (options['zoomOnClick'] != undefined) {
142    this.zoomOnClick_ = options['zoomOnClick'];
143  }
144
145  /**
146   * @type {boolean}
147   * @private
148   */
149  this.averageCenter_ = false;

150
151  if (options['averageCenter'] != undefined) {
152    this.averageCenter_ = options['averageCenter'];
153  }
154
155  this.setupStyles_();
156
157  this.setMap(map);
158
159  /**
160   * @type {number}
161   * @private
162   */
163  this.prevZoom_ = this.map_.getZoom();
164
165  // Add the map event listeners
166  var that = this;
167  google.maps.event.addListener(this.map_, 'zoom_changed', function() {
168    var zoom = that.map_.getZoom();
169
170    if (that.prevZoom_ != zoom) {
171      that.prevZoom_ = zoom;
172      that.resetViewport();
173    }
174  });
175
176  google.maps.event.addListener(this.map_, 'idle', function() {
177    that.redraw();
178  });
179
180  // Finally, add the markers
181  if (opt_markers && opt_markers.length) {
182    this.addMarkers(opt_markers, false);
183  }
184}
185
186
187/**
188 * The marker cluster image path.
189 *
190 * @type {string}
191 * @private
192 */
193MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = '../images/m';
194
195
196/**
197 * The marker cluster image path.
198 *
199 * @type {string}
200 * @private
201 */
202MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_EXTENSION_ = 'png';
203
204
205/**
206 * Extends a objects prototype by anothers.
207 *
208 * @param {Object} obj1 The object to be extended.
209 * @param {Object} obj2 The object to extend with.
210 * @return {Object} The new extended object.
211 * @ignore
212 */
213MarkerClusterer.prototype.extend = function(obj1, obj2) {
214  return (function(object) {
215    for (var property in object.prototype) {
216      this.prototype[property] = object.prototype[property];
217    }
218    return this;
219  }).apply(obj1, [obj2]);
220};
221
222
223/**
224 * Implementaion of the interface method.
225 * @ignore
226 */
227MarkerClusterer.prototype.onAdd = function() {
228  this.setReady_(true);
229};
230
231/**
232 * Implementaion of the interface method.
233 * @ignore
234 */
235MarkerClusterer.prototype.draw = function() {};
236
237/**
238 * Sets up the styles object.
239 *
240 * @private
241 */
242MarkerClusterer.prototype.setupStyles_ = function() {
243  if (this.styles_.length) {
244    return;
245  }
246
247  for (var i = 0, size; size = this.sizes[i]; i++) {
248    this.styles_.push({
249      url: this.imagePath_ + (i + 1) + '.' + this.imageExtension_,
250      height: size,
251      width: size
252    });
253  }
254};
255
256/**
257 *  Fit the map to the bounds of the markers in the clusterer.
258 */
259MarkerClusterer.prototype.fitMapToMarkers = function() {
260  var markers = this.getMarkers();
261  var bounds = new google.maps.LatLngBounds();
262  for (var i = 0, marker; marker = markers[i]; i++) {
263    bounds.extend(marker.getPosition());
264  }
265
266  this.map_.fitBounds(bounds);
267};
268
269
270/**
271 *  Sets the styles.
272 *
273 *  @param {Object} styles The style to set.
274 */
275MarkerClusterer.prototype.setStyles = function(styles) {
276  this.styles_ = styles;
277};
278
279
280/**
281 *  Gets the styles.
282 *
283 *  @return {Object} The styles object.
284 */
285MarkerClusterer.prototype.getStyles = function() {
286  return this.styles_;
287};
288
289
290/**
291 * Whether zoom on click is set.
292 *
293 * @return {boolean} True if zoomOnClick_ is set.
294 */
295MarkerClusterer.prototype.isZoomOnClick = function() {
296  return this.zoomOnClick_;
297};
298
299/**
300 * Whether average center is set.
301 *
302 * @return {boolean} True if averageCenter_ is set.
303 */
304MarkerClusterer.prototype.isAverageCenter = function() {
305  return this.averageCenter_;
306};
307
308
309/**
310 *  Returns the array of markers in the clusterer.
311 *
312 *  @return {Array.<google.maps.Marker>} The markers.
313 */
314MarkerClusterer.prototype.getMarkers = function() {
315  return this.markers_;
316};
317
318
319/**
320 *  Returns the number of markers in the clusterer
321 *
322 *  @return {Number} The number of markers.
323 */
324MarkerClusterer.prototype.getTotalMarkers = function() {
325  return this.markers_.length;
326};
327
328
329/**
330 *  Sets the max zoom for the clusterer.
331 *
332 *  @param {number} maxZoom The max zoom level.
333 */
334MarkerClusterer.prototype.setMaxZoom = function(maxZoom) {
335  this.maxZoom_ = maxZoom;
336};
337
338
339/**
340 *  Gets the max zoom for the clusterer.
341 *
342 *  @return {number} The max zoom level.
343 */
344MarkerClusterer.prototype.getMaxZoom = function() {
345  return this.maxZoom_;
346};
347
348
349/**
350 *  The function for calculating the cluster icon image.
351 *
352 *  @param {Array.<google.maps.Marker>} markers The markers in the clusterer.
353 *  @param {number} numStyles The number of styles available.
354 *  @return {Object} A object properties: 'text' (string) and 'index' (number).
355 *  @private
356 */
357MarkerClusterer.prototype.calculator_ = function(markers, numStyles) {
358  var index = 0;
359  var count = markers.length;
360  var dv = count;
361  while (dv !== 0) {
362    dv = parseInt(dv / 10, 10);
363    index++;
364  }
365
366  index = Math.min(index, numStyles);
367  return {
368    text: count,
369    index: index
370  };
371};
372
373
374/**
375 * Set the calculator function.
376 *
377 * @param {function(Array, number)} calculator The function to set as the
378 *     calculator. The function should return a object properties:
379 *     'text' (string) and 'index' (number).
380 *
381 */
382MarkerClusterer.prototype.setCalculator = function(calculator) {
383  this.calculator_ = calculator;
384};
385
386
387/**
388 * Get the calculator function.
389 *
390 * @return {function(Array, number)} the calculator function.
391 */
392MarkerClusterer.prototype.getCalculator = function() {
393  return this.calculator_;
394};
395
396
397/**
398 * Add an array of markers to the clusterer.
399 *
400 * @param {Array.<google.maps.Marker>} markers The markers to add.
401 * @param {boolean=}

401 opt_nodraw Whether to redraw the clusters.
402 */
403MarkerClusterer.prototype.addMarkers = function(markers, opt_nodraw) {
404  for (var i = 0, marker; marker = markers[i]; i++) {
405    this.pushMarkerTo_(marker);
406  }
407  if (!opt_nodraw) {
408    this.redraw();
409  }
410};
411
412
413/**
414 * Pushes a marker to the clusterer.
415 *
416 * @param {google.maps.Marker} marker The marker to add.
417 * @private
418 */
419MarkerClusterer.prototype.pushMarkerTo_ = function(marker) {
420  marker.isAdded = false;
421  if (marker['draggable']) {
422    // If the marker is draggable add a listener so we update the clusters on
423    // the drag end.
424    var that = this;
425    google.maps.event.addListener(marker, 'dragend', function() {
426      marker.isAdded = false;
427      that.repaint();
428    });
429  }
430  this.markers_.push(marker);
431};
432
433
434/**
435 * Adds a marker to the clusterer and redraws if needed.
436 *
437 * @param {google.maps.Marker} marker The marker to add.
438 * @param {boolean=} opt_nodraw Whether to redraw the clusters.
439 */
440MarkerClusterer.prototype.addMarker = function(marker, opt_nodraw) {
441  this.pushMarkerTo_(marker);
442  if (!opt_nodraw) {
443    this.redraw();
444  }
445};
446
447
448/**
449 * Removes a marker and returns true if removed, false if not
450 *
451 * @param {google.maps.Marker} marker The marker to remove
452 * @return {boolean} Whether the marker was removed or not
453 * @private
454 */
455MarkerClusterer.prototype.removeMarker_ = function(marker) {
456  var index = -1;
457  if (this.markers_.indexOf) {
458    index = this.markers_.indexOf(marker);
459  } else {
460    for (var i = 0, m; m = this.markers_[i]; i++) {
461      if (m == marker) {
462        index = i;
463        break;
464      }
465    }
466  }
467
468  if (index == -1) {
469    // Marker is not in our list of markers.
470    return false;
471  }
472
473  marker.setMap(null);
474
475  this.markers_.splice(index, 1);
476
477  return true;
478};
479
480
481/**
482 * Remove a marker from the cluster.
483 *
484 * @param {google.maps.Marker} marker The marker to remove.
485 * @param {boolean=} opt_nodraw Optional boolean to force no redraw.
486 * @return {boolean} True if the marker was removed.
487 */
488MarkerClusterer.prototype.removeMarker = function(marker, opt_nodraw) {
489  var removed = this.removeMarker_(marker);
490
491  if (!opt_nodraw && removed) {
492    this.resetViewport();
493    this.redraw();
494    return true;
495  } else {
496   return false;
497  }
498};
499
500
501/**
502 * Removes an array of markers from the cluster.
503 *
504 * @param {Array.<google.maps.Marker>} markers The markers to remove.
505 * @param {boolean=} opt_nodraw Optional boolean to force no redraw.
506 */
507MarkerClusterer.prototype.removeMarkers = function(markers, opt_nodraw) {
508  var removed = false;
509
510  for (var i = 0, marker; marker = markers[i]; i++) {
511    var r = this.removeMarker_(marker);
512    removed = removed || r;
513  }
514
515  if (!opt_nodraw && removed) {
516    this.resetViewport();
517    this.redraw();
518    return true;
519  }
520};
521
522
523/**
524 * Sets the clusterer's ready state.
525 *
526 * @param {boolean} ready The state.
527 * @private
528 */
529MarkerClusterer.prototype.setReady_ = function(ready) {
530  if (!this.ready_) {
531    this.ready_ = ready;
532    this.createClusters_();
533  }
534};
535
536
537/**
538 * Returns the number of clusters in the clusterer.
539 *
540 * @return {number} The number of clusters.
541 */
542MarkerClusterer.prototype.getTotalClusters = function() {
543  return this.clusters_.length;
544};
545
546
547/**
548 * Returns the google map that the clusterer is associated with.
549 *
550 * @return {google.maps.Map} The map.
551 */
552MarkerClusterer.prototype.getMap = function() {
553  return this.map_;
554};
555
556
557/**
558 * Sets the google map that the clusterer is associated with.
559 *
560 * @param {google.maps.Map} map The map.
561 */
562MarkerClusterer.prototype.setMap = function(map) {
563  this.map_ = map;
564};
565
566
567/**
568 * Returns the size of the grid.
569 *
570 * @return {number} The grid size.
571 */
572MarkerClusterer.prototype.getGridSize = function() {
573  return this.gridSize_;
574};
575
576
577/**
578 * Sets the size of the grid.
579 *
580 * @param {number} size The grid size.
581 */
582MarkerClusterer.prototype.setGridSize = function(size) {
583  this.gridSize_ = size;
584};
585
586
587/**
588 * Returns the min cluster size.
589 *
590 * @return {number} The grid size.
591 */
592MarkerClusterer.prototype.getMinClusterSize = function() {
593  return this.minClusterSize_;
594};
595
596/**
597 * Sets the min cluster size.
598 *
599 * @param {number} size The grid size.
600 */
601MarkerClusterer.prototype.setMinClusterSize = function(size) {
602  this.minClusterSize_ = size;
603};
604
605
606/**
607 * Extends a bounds object by the grid size.
608 *
609 * @param {google.maps.LatLngBounds} bounds The bounds to extend.
610 * @return {google.maps.LatLngBounds}

610 The extended bounds.
611 */
612MarkerClusterer.prototype.getExtendedBounds = function(bounds) {
613  var projection = this.getProjection();
614
615  // Turn the bounds into latlng.
616  var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
617      bounds.getNorthEast().lng());
618  var bl = new google.maps.LatLng(bounds.getSouthWest().lat(),
619      bounds.getSouthWest().lng());
620
621  // Convert the points to pixels and the extend out by the grid size.
622  var trPix = projection.fromLatLngToDivPixel(tr);
623  trPix.x += this.gridSize_;
624  trPix.y -= this.gridSize_;
625
626  var blPix = projection.fromLatLngToDivPixel(bl);
627  blPix.x -= this.gridSize_;
628  blPix.y += this.gridSize_;
629
630  // Convert the pixel points back to LatLng
631  var ne = projection.fromDivPixelToLatLng(trPix);
632  var sw = projection.fromDivPixelToLatLng(blPix);
633
634  // Extend the bounds to contain the new bounds.
635  bounds.extend(ne);
636  bounds.extend(sw);
637
638  return bounds;
639};
640
641
642/**
643 * Determins if a marker is contained in a bounds.
644 *
645 * @param {google.maps.Marker} marker The marker to check.
646 * @param {google.maps.LatLngBounds} bounds The bounds to check against.
647 * @return {boolean} True if the marker is in the bounds.
648 * @private
649 */
650MarkerClusterer.prototype.isMarkerInBounds_ = function(marker, bounds) {
651  return bounds.contains(marker.getPosition());
652};
653
654
655/**
656 * Clears all clusters and markers from the clusterer.
657 */
658MarkerClusterer.prototype.clearMarkers = function() {
659  this.resetViewport(true);
660
661  // Set the markers a empty array.
662  this.markers_ = [];
663};
664
665
666/**
667 * Clears all existing clusters and recreates them.
668 * @param {boolean} opt_hide To also hide the marker.
669 */
670MarkerClusterer.prototype.resetViewport = function(opt_hide) {
671  // Remove all the clusters
672  for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {
673    cluster.remove();
674  }
675
676  // Reset the markers to not be added and to be invisible.
677  for (var i = 0, marker; marker = this.markers_[i]; i++) {
678    marker.isAdded = false;
679    if (opt_hide) {
680      marker.setMap(null);
681    }
682  }
683
684  this.clusters_ = [];
685};
686
687/**
688 *
689 */
690MarkerClusterer.prototype.repaint = function() {
691  var oldClusters = this.clusters_.slice();
692  this.clusters_.length = 0;
693  this.resetViewport();
694  this.redraw();
695
696  // Remove the old clusters.
697  // Do it in a timeout so the other clusters have been drawn first.
698  window.setTimeout(function() {
699    for (var i = 0, cluster; cluster = oldClusters[i]; i++) {
700      cluster.remove();
701    }
702  }, 0);
703};
704
705
706/**
707 * Redraws the clusters.
708 */
709MarkerClusterer.prototype.redraw = function() {
710  this.createClusters_();
711};
712
713
714/**
715 * Calculates the distance between two latlng locations in km.
716 * @see http://www.movable-type.co.uk/scripts/latlong.html
717 *
718 * @param {google.maps.LatLng} p1 The first lat lng point.
719 * @param {google.maps.LatLng} p2 The second lat lng point.
720 * @return {number} The distance between the two points in km.
721 * @private
722*/
723MarkerClusterer.prototype.distanceBetweenPoints_ = function(p1, p2) {
724  if (!p1 || !p2) {
725    return 0;
726  }
727
728  var R = 6371; // Radius of the Earth in km
729  var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
730  var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
731  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
732    Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
733    Math.sin(dLon / 2) * Math.sin(dLon / 2);
734  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
735  var d = R * c;
736  return d;
737};
738
739
740/**
741 * Add a marker to a cluster, or creates a new cluster.
742 *
743 * @param {google.maps.Marker} marker The marker to add.
744 * @private
745 */
746MarkerClusterer.prototype.addToClosestCluster_ = function(marker) {
747  var distance = 40000; // Some large number
748  var clusterToAddTo = null;
749  var pos = marker.getPosition();
750  for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {
751    var center = cluster.getCenter();
752    if (center) {
753      var d = this.distanceBetweenPoints_(center, marker.getPosition());
754      if (d < distance) {
755        distance = d;
756        clusterToAddTo = cluster;
757      }
758    }
759  }
760
761  if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)) {
762    clusterToAddTo.addMarker(marker);
763  } else {
764    var cluster = new Cluster(this);
765    cluster.addMarker(marker);

766    this.clusters_.push(cluster);
767  }
768};
769
770
771/**
772 * Creates the clusters.
773 *
774 * @private
775 */
776MarkerClusterer.prototype.createClusters_ = function() {
777  if (!this.ready_) {
778    return;
779  }
780
781  // Get our current map view bounds.
782  // Create a new bounds object so we don't affect the map.
783  var mapBounds = new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(),
784      this.map_.getBounds().getNorthEast());
785  var bounds = this.getExtendedBounds(mapBounds);
786
787  for (var i = 0, marker; marker = this.markers_[i]; i++) {
788    if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {
789      this.addToClosestCluster_(marker);
790    }
791  }
792};
793
794
795/**
796 * A cluster that contains markers.
797 *
798 * @param {MarkerClusterer} markerClusterer The markerclusterer that this
799 *     cluster is associated with.
800 * @constructor
801 * @ignore
802 */
803function Cluster(markerClusterer) {
804  this.markerClusterer_ = markerClusterer;
805  this.map_ = markerClusterer.getMap();
806  this.gridSize_ = markerClusterer.getGridSize();
807  this.minClusterSize_ = markerClusterer.getMinClusterSize();
808  this.averageCenter_ = markerClusterer.isAverageCenter();
809  this.center_ = null;
810  this.markers_ = [];
811  this.bounds_ = null;
812  this.clusterIcon_ = new ClusterIcon(this, markerClusterer.getStyles(),
813      markerClusterer.getGridSize());
814}
815
816/**
817 * Determins if a marker is already added to the cluster.
818 *
819 * @param {google.maps.Marker} marker The marker to check.
820 * @return {boolean} True if the marker is already added.
821 */
822Cluster.prototype.isMarkerAlreadyAdded = function(marker) {
823  if (this.markers_.indexOf) {
824    return this.markers_.indexOf(marker) != -1;
825  } else {
826    for (var i = 0, m; m = this.markers_[i]; i++) {
827      if (m == marker) {
828        return true;
829      }
830    }
831  }
832  return false;
833};
834
835
836/**
837 * Add a marker the cluster.
838 *
839 * @param {google.maps.Marker} marker The marker to add.
840 * @return {boolean} True if the marker was added.
841 */
842Cluster.prototype.addMarker = function(marker) {
843  if (this.isMarkerAlreadyAdded(marker)) {
844    return false;
845  }
846
847  if (!this.center_) {
848    this.center_ = marker.getPosition();
849    this.calculateBounds_();
850  } else {
851    if (this.averageCenter_) {
852      var l = this.markers_.length + 1;
853      var lat = (this.center_.lat() * (l-1) + marker.getPosition().lat()) / l;
854      var lng = (this.center_.lng() * (l-1) + marker.getPosition().lng()) / l;
855      this.center_ = new google.maps.LatLng(lat, lng);
856      this.calculateBounds_();
857    }
858  }
859
860  marker.isAdded = true;
861  this.markers_.push(marker);
862
863  var len = this.markers_.length;
864  if (len < this.minClusterSize_ && marker.getMap() != this.map_) {
865    // Min cluster size not reached so show the marker.
866    marker.setMap(this.map_);
867  }
868
869  if (len == this.minClusterSize_) {
870    // Hide the markers that were showing.
871    for (var i = 0; i < len; i++) {
872      this.markers_[i].setMap(null);
873    }
874  }
875
876  if (len >= this.minClusterSize_) {
877    marker.setMap(null);
878  }
879
880  this.updateIcon();
881  return true;
882};
883
884
885/**
886 * Returns the marker clusterer that the cluster is associated with.
887 *
888 * @return {MarkerClusterer} The associated marker clusterer.
889 */
890Cluster.prototype.getMarkerClusterer = function() {
891  return this.markerClusterer_;
892};
893
894
895/**
896 * Returns the bounds of the cluster.
897 *
898 * @return {google.maps.LatLngBounds} the cluster bounds.
899 */
900Cluster.prototype.getBounds = function() {
901  var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
902  var markers = this.getMarkers();
903  for (var i = 0, marker; marker = markers[i]; i++) {
904    bounds.extend(marker.getPosition());
905  }
906  return bounds;
907};
908
909
910/**
911 * Removes the cluster
912 */
913Cluster.prototype.remove = function() {
914  this.clusterIcon_.remove();
915  this.markers_.length = 0;
916  delete this.markers_;
917};
918
919
920/**
921 * Returns the center of the cluster.
922 *
923 * @return {number} The cluster center.
924 */
925Cluster.prototype.getSize = function() {
926  return this.markers_.length;
927};
928
929
930/**
931 * Returns the center of the cluster.
932 *
933 * @return {Array.<google.maps.Marker>} The cluster center.
934 */
935Cluster.prototype.getMarkers = function() {
936  return this.markers_;
937};
938
939
940/**
941 * Returns the center of the cluster.
942 *
943 * @return {google.maps.LatLng} The cluster center.
944 */
945Cluster.prototype.getCenter = function() {
946  return this.center_;
947};
948
949
950/**

951 * Calculated the extended bounds of the cluster with the grid.
952 *
953 * @private
954 */
955Cluster.prototype.calculateBounds_ = function() {
956  var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
957  this.bounds_ = this.markerClusterer_.getExtendedBounds(bounds);
958};
959
960
961/**
962 * Determines if a marker lies in the clusters bounds.
963 *
964 * @param {google.maps.Marker} marker The marker to check.
965 * @return {boolean} True if the marker lies in the bounds.
966 */
967Cluster.prototype.isMarkerInClusterBounds = function(marker) {
968  return this.bounds_.contains(marker.getPosition());
969};
970
971
972/**
973 * Returns the map that the cluster is associated with.
974 *
975 * @return {google.maps.Map} The map.
976 */
977Cluster.prototype.getMap = function() {
978  return this.map_;
979};
980
981
982/**
983 * Updates the cluster icon
984 */
985Cluster.prototype.updateIcon = function() {
986  var zoom = this.map_.getZoom();
987  var mz = this.markerClusterer_.getMaxZoom();
988
989  if (mz && zoom > mz) {
990    // The zoom is greater than our max zoom so show all the markers in cluster.
991    for (var i = 0, marker; marker = this.markers_[i]; i++) {
992      marker.setMap(this.map_);
993    }
994    return;
995  }
996
997  if (this.markers_.length < this.minClusterSize_) {
998    // Min cluster size not yet reached.
999    this.clusterIcon_.hide();
1000    return;
1001  }
1002
1003  var numStyles = this.markerClusterer_.getStyles().length;
1004  var sums = this.markerClusterer_.getCalculator()(this.markers_, numStyles);
1005  this.clusterIcon_.setCenter(this.center_);
1006  this.clusterIcon_.setSums(sums);
1007  this.clusterIcon_.show();
1008};
1009
1010
1011/**
1012 * A cluster icon
1013 *
1014 * @param {Cluster} cluster The cluster to be associated with.
1015 * @param {Object} styles An object that has style properties:
1016 *     'url': (string) The image url.
1017 *     'height': (number) The image height.
1018 *     'width': (number) The image width.
1019 *     'anchor': (Array) The anchor position of the label text.
1020 *     'textColor': (string) The text color.
1021 *     'textSize': (number) The text size.
1022 *     'backgroundPosition: (string) The background postition x, y.
1023 * @param {number=} opt_padding Optional padding to apply to the cluster icon.
1024 * @constructor
1025 * @extends google.maps.OverlayView
1026 * @ignore
1027 */
1028function ClusterIcon(cluster, styles, opt_padding) {
1029  cluster.getMarkerClusterer().extend(ClusterIcon, google.maps.OverlayView);
1030
1031  this.styles_ = styles;
1032  this.padding_ = opt_padding || 0;
1033  this.cluster_ = cluster;
1034  this.center_ = null;
1035  this.map_ = cluster.getMap();
1036  this.div_ = null;
1037  this.sums_ = null;
1038  this.visible_ = false;
1039
1040  this.setMap(this.map_);
1041}
1042
1043
1044/**
1045 * Triggers the clusterclick event and zoom's if the option is set.
1046 *
1047 * @param {google.maps.MouseEvent} event The event to propagate
1048 */
1049ClusterIcon.prototype.triggerClusterClick = function(event) {
1050  var markerClusterer = this.cluster_.getMarkerClusterer();
1051
1052  // Trigger the clusterclick event.
1053  google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_, event);
1054
1055  if (markerClusterer.isZoomOnClick()) {
1056    // Zoom into the cluster.
1057    this.map_.fitBounds(this.cluster_.getBounds());
1058  }
1059};
1060
1061
1062/**
1063 * Adding the cluster icon to the dom.
1064 * @ignore
1065 */
1066ClusterIcon.prototype.onAdd = function() {
1067  this.div_ = document.createElement('DIV');
1068  if (this.visible_) {
1069    var pos = this.getPosFromLatLng_(this.center_);
1070    this.div_.style.cssText = this.createCss(pos);
1071    this.div_.innerHTML = this.sums_.text;
1072  }
1073
1074  var panes = this.getPanes();
1075  panes.overlayMouseTarget.appendChild(this.div_);
1076
1077  var that = this;
1078  var isDragging = false;
1079  google.maps.event.addDomListener(this.div_, 'click', function(event) {
1080    // Only perform click when not preceded by a drag
1081    if (!isDragging) {
1082      that.triggerClusterClick(event);
1083    }
1084  });
1085  google.maps.event.addDomListener(this.div_, 'mousedown', function() {
1086    isDragging = false;
1087  });
1088  google.maps.event.addDomListener(this.div_, 'mousemove', function() {
1089    isDragging = true;
1090  });
1091};
1092
1093
1094/**
1095 * Returns the position to place the div dending on the latlng.
1096 *
1097 * @param {google.maps.LatLng} latlng The position in latlng.
1098 * @return {google.maps.Point} The position in pixels.
1099 * @private
1100 */
1101ClusterIcon.prototype.getPosFromLatLng_ = function(latlng) {
1102  var pos = this.getProjection().fromLatLngToDivPixel(latlng);
1103
1104  if (typeof this.iconAnchor_ === 'object' && this.iconAnchor_.length === 2) {
1105    pos.x -= this.iconAnchor_[0];
1106    pos.y -= this.iconAnchor_[1];
1107  } else {
1108    pos.x -= parseInt(this.width_ / 2, 10);
1109    pos.y -= parseInt(this.height_ / 2, 10);
1110  }
1111  return pos;
1112};
1113
1114
1115/**
1116 * Draw the icon.
1117 * @ignore
1118 */
1119ClusterIcon.prototype.draw = function() {
1120  if (this.visible_) {
1121    var pos = this.getPosFromLatLng_(this.center_);
1122    this.div_.style.top = pos.y + 'px';
1123    this.div_.style.left = pos.x + 'px';
1124  }
1125};
1126
1127
1128/**
1129 * Hide the icon.
1130 */
1131ClusterIcon.prototype.hide = function() {
1132  if (this.div_) {
1133    this.div_.style.display = 'none';
1134  }
1135  this.visible_ = false;

1136};
1137
1138
1139/**
1140 * Position and show the icon.
1141 */
1142ClusterIcon.prototype.show = function() {
1143  if (this.div_) {
1144    var pos = this.getPosFromLatLng_(this.center_);
1145    this.div_.style.cssText = this.createCss(pos);
1146    this.div_.style.display = '';
1147  }
1148  this.visible_ = true;
1149};
1150
1151
1152/**
1153 * Remove the icon from the map
1154 */
1155ClusterIcon.prototype.remove = function() {
1156  this.setMap(null);
1157};
1158
1159
1160/**
1161 * Implementation of the onRemove interface.
1162 * @ignore
1163 */
1164ClusterIcon.prototype.onRemove = function() {
1165  if (this.div_ && this.div_.parentNode) {
1166    this.hide();
1167    this.div_.parentNode.removeChild(this.div_);
1168    this.div_ = null;
1169  }
1170};
1171
1172
1173/**
1174 * Set the sums of the icon.
1175 *
1176 * @param {Object} sums The sums containing:
1177 *   'text': (string) The text to display in the icon.
1178 *   'index': (number) The style index of the icon.
1179 */
1180ClusterIcon.prototype.setSums = function(sums) {
1181  this.sums_ = sums;
1182  this.text_ = sums.text;
1183  this.index_ = sums.index;
1184  if (this.div_) {
1185    this.div_.innerHTML = sums.text;
1186  }
1187
1188  this.useStyle();
1189};
1190
1191
1192/**
1193 * Sets the icon to the the styles.
1194 */
1195ClusterIcon.prototype.useStyle = function() {
1196  var index = Math.max(0, this.sums_.index - 1);
1197  index = Math.min(this.styles_.length - 1, index);
1198  var style = this.styles_[index];
1199  this.url_ = style['url'];
1200  this.height_ = style['height'];
1201  this.width_ = style['width'];
1202  this.textColor_ = style['textColor'];
1203  this.anchor_ = style['anchor'];
1204  this.textSize_ = style['textSize'];
1205  this.backgroundPosition_ = style['backgroundPosition'];
1206  this.iconAnchor_ = style['iconAnchor'];
1207};
1208
1209
1210/**
1211 * Sets the center of the icon.
1212 *
1213 * @param {google.maps.LatLng} center The latlng to set as the center.
1214 */
1215ClusterIcon.prototype.setCenter = function(center) {
1216  this.center_ = center;
1217};
1218
1219
1220/**
1221 * Create the css text based on the position of the icon.
1222 *
1223 * @param {google.maps.Point} pos The position.
1224 * @return {string} The css style text.
1225 */
1226ClusterIcon.prototype.createCss = function(pos) {
1227  var style = [];
1228  style.push('background-image:url(' + this.url_ + ');');
1229  var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0';
1230  style.push('background-position:' + backgroundPosition + ';');
1231
1232  if (typeof this.anchor_ === 'object') {
1233    if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 &&
1234        this.anchor_[0] < this.height_) {
1235      style.push('height:' + (this.height_ - this.anchor_[0]) +
1236          'px; padding-top:' + this.anchor_[0] + 'px;');
1237    } else if (typeof this.anchor_[0] === 'number' && this.anchor_[0] < 0 &&
1238        -this.anchor_[0] < this.height_) {
1239      style.push('height:' + this.height_ + 'px; line-height:' + (this.height_ + this.anchor_[0]) +
1240          'px;');
1241    } else {
1242      style.push('height:' + this.height_ + 'px; line-height:' + this.height_ +
1243          'px;');
1244    }
1245    if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 &&
1246        this.anchor_[1] < this.width_) {
1247      style.push('width:' + (this.width_ - this.anchor_[1]) +
1248          'px; padding-left:' + this.anchor_[1] + 'px;');
1249    } else {
1250      style.push('width:' + this.width_ + 'px; text-align:center;');
1251    }
1252  } else {
1253    style.push('height:' + this.height_ + 'px; line-height:' +
1254        this.height_ + 'px; width:' + this.width_ + 'px; text-align:center;');
1255  }
1256
1257  var txtColor = this.textColor_ ? this.textColor_ : 'black';
1258  var txtSize = this.textSize_ ? this.textSize_ : 11;
1259
1260  style.push('cursor:pointer; top:' + pos.y + 'px; left:' +
1261      pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' +
1262      txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold');
1263  return style.join('');
1264};
1265
1266
1267// Export Symbols for Closure
1268// If you are not going to compile with closure then you can remove the
1269// code below.
1270window['MarkerClusterer'] = MarkerClusterer;
1271MarkerClusterer.prototype['addMarker'] = MarkerClusterer.prototype.addMarker;
1272MarkerClusterer.prototype['addMarkers'] = MarkerClusterer.prototype.addMarkers;
1273MarkerClusterer.prototype['clearMarkers'] =
1274    MarkerClusterer.prototype.clearMarkers;
1275MarkerClusterer.prototype['fitMapToMarkers'] =
1276    MarkerClusterer.prototype.fitMapToMarkers;
1277MarkerClusterer.prototype['getCalculator'] =
1278    MarkerClusterer.prototype.getCalculator;
1279MarkerClusterer.prototype['getGridSize'] =
1280    MarkerClusterer.prototype.getGridSize;
1281MarkerClusterer.prototype['getExtendedBounds'] =
1282    MarkerClusterer.prototype.getExtendedBounds;

1283MarkerClusterer.prototype['getMap'] = MarkerClusterer.prototype.getMap;
1284MarkerClusterer.prototype['getMarkers'] = MarkerClusterer.prototype.getMarkers;
1285MarkerClusterer.prototype['getMaxZoom'] = MarkerClusterer.prototype.getMaxZoom;
1286MarkerClusterer.prototype['getStyles'] = MarkerClusterer.prototype.getStyles;
1287MarkerClusterer.prototype['getTotalClusters'] =
1288    MarkerClusterer.prototype.getTotalClusters;
1289MarkerClusterer.prototype['getTotalMarkers'] =
1290    MarkerClusterer.prototype.getTotalMarkers;
1291MarkerClusterer.prototype['redraw'] = MarkerClusterer.prototype.redraw;
1292MarkerClusterer.prototype['removeMarker'] =
1293    MarkerClusterer.prototype.removeMarker;
1294MarkerClusterer.prototype['removeMarkers'] =
1295    MarkerClusterer.prototype.removeMarkers;
1296MarkerClusterer.prototype['resetViewport'] =
1297    MarkerClusterer.prototype.resetViewport;
1298MarkerClusterer.prototype['repaint'] =
1299    MarkerClusterer.prototype.repaint;
1300MarkerClusterer.prototype['setCalculator'] =
1301    MarkerClusterer.prototype.setCalculator;
1302MarkerClusterer.prototype['setGridSize'] =
1303    MarkerClusterer.prototype.setGridSize;
1304MarkerClusterer.prototype['setMaxZoom'] =
1305    MarkerClusterer.prototype.setMaxZoom;
1306MarkerClusterer.prototype['onAdd'] = MarkerClusterer.prototype.onAdd;
1307MarkerClusterer.prototype['draw'] = MarkerClusterer.prototype.draw;
1308
1309Cluster.prototype['getCenter'] = Cluster.prototype.getCenter;
1310Cluster.prototype['getSize'] = Cluster.prototype.getSize;
1311Cluster.prototype['getMarkers'] = Cluster.prototype.getMarkers;
1312
1313ClusterIcon.prototype['onAdd'] = ClusterIcon.prototype.onAdd;
1314ClusterIcon.prototype['draw'] = ClusterIcon.prototype.draw;
1315ClusterIcon.prototype['onRemove'] = ClusterIcon.prototype.onRemove;