Subversion Repositories eFlore/Applications.cel

Rev

Details | Last modification | View Log | RSS feed

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