PageRenderTime 39ms CodeModel.GetById 8ms RepoModel.GetById 0ms app.codeStats 0ms

/Artem.GoogleMap.Extensions/Scripts/markerclusterer.js

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