Source: MarkerClusterer.js

  1. /**
  2.  * @name MarkerClustererPlus for Google Maps V3
  3.  * @version 2.1.1 [November 4, 2013]
  4.  * @author Gary Little
  5.  * @fileoverview
  6.  * The library creates and manages per-zoom-level clusters for large amounts of markers.
  7.  * <p>
  8.  * This is an enhanced V3 implementation of the
  9.  * <a href="http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/"
  10.  * >V2 MarkerClusterer</a> by Xiaoxi Wu. It is based on the
  11.  * <a href="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/"
  12.  * >V3 MarkerClusterer</a> port by Luke Mahe. MarkerClustererPlus was created by Gary Little.
  13.  * <p>
  14.  * v2.0 release: MarkerClustererPlus v2.0 is backward compatible with MarkerClusterer v1.0. It
  15.  *  adds support for the <code>ignoreHidden</code>, <code>title</code>, <code>batchSizeIE</code>,
  16.  *  and <code>calculator</code> properties as well as support for four more events. It also allows
  17.  *  greater control over the styling of the text that appears on the cluster marker. The
  18.  *  documentation has been significantly improved and the overall code has been simplified and
  19.  *  polished. Very large numbers of markers can now be managed without causing Javascript timeout
  20.  *  errors on Internet Explorer. Note that the name of the <code>clusterclick</code> event has been
  21.  *  deprecated. The new name is <code>click</code>, so please change your application code now.
  22.  */
  24. /**
  25.  * Licensed under the Apache License, Version 2.0 (the "License");
  26.  * you may not use this file except in compliance with the License.
  27.  * You may obtain a copy of the License at
  28.  *
  29.  *     http://www.apache.org/licenses/LICENSE-2.0
  30.  *
  31.  * Unless required by applicable law or agreed to in writing, software
  32.  * distributed under the License is distributed on an "AS IS" BASIS,
  33.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  34.  * See the License for the specific language governing permissions and
  35.  * limitations under the License.
  36.  */
  39. /**
  40.  * @name ClusterIconStyle
  41.  * @class This class represents the object for values in the <code>styles</code> array passed
  42.  *  to the {@link MarkerClusterer} constructor. The element in this array that is used to
  43.  *  style the cluster icon is determined by calling the <code>calculator</code> function.
  44.  *
  45.  * @property {string} url The URL of the cluster icon image file. Required.
  46.  * @property {number} height The display height (in pixels) of the cluster icon. Required.
  47.  * @property {number} width The display width (in pixels) of the cluster icon. Required.
  48.  * @property {Array} [anchorText] The position (in pixels) from the center of the cluster icon to
  49.  *  where the text label is to be centered and drawn. The format is <code>[yoffset, xoffset]</code>
  50.  *  where <code>yoffset</code> increases as you go down from center and <code>xoffset</code>
  51.  *  increases to the right of center. The default is <code>[0, 0]</code>.
  52.  * @property {Array} [anchorIcon] The anchor position (in pixels) of the cluster icon. This is the
  53.  *  spot on the cluster icon that is to be aligned with the cluster position. The format is
  54.  *  <code>[yoffset, xoffset]</code> where <code>yoffset</code> increases as you go down and
  55.  *  <code>xoffset</code> increases to the right of the top-left corner of the icon. The default
  56.  *  anchor position is the center of the cluster icon.
  57.  * @property {string} [textColor="black"] The color of the label text shown on the
  58.  *  cluster icon.
  59.  * @property {number} [textSize=11] The size (in pixels) of the label text shown on the
  60.  *  cluster icon.
  61.  * @property {string} [textDecoration="none"] The value of the CSS <code>text-decoration</code>
  62.  *  property for the label text shown on the cluster icon.
  63.  * @property {string} [fontWeight="bold"] The value of the CSS <code>font-weight</code>
  64.  *  property for the label text shown on the cluster icon.
  65.  * @property {string} [fontStyle="normal"] The value of the CSS <code>font-style</code>
  66.  *  property for the label text shown on the cluster icon.
  67.  * @property {string} [fontFamily="Arial,sans-serif"] The value of the CSS <code>font-family</code>
  68.  *  property for the label text shown on the cluster icon.
  69.  * @property {string} [backgroundPosition="0 0"] The position of the cluster icon image
  70.  *  within the image defined by <code>url</code>. The format is <code>"xpos ypos"</code>
  71.  *  (the same format as for the CSS <code>background-position</code> property). You must set
  72.  *  this property appropriately when the image defined by <code>url</code> represents a sprite
  73.  *  containing multiple images. Note that the position <i>must</i> be specified in px units.
  74.  */
  75. /**
  76.  * @name ClusterIconInfo
  77.  * @class This class is an object containing general information about a cluster icon. This is
  78.  *  the object that a <code>calculator</code> function returns.
  79.  *
  80.  * @property {string} text The text of the label to be shown on the cluster icon.
  81.  * @property {number} index The index plus 1 of the element in the <code>styles</code>
  82.  *  array to be used to style the cluster icon.
  83.  * @property {string} title The tooltip to display when the mouse moves over the cluster icon.
  84.  *  If this value is <code>undefined</code> or <code>""</code>, <code>title</code> is set to the
  85.  *  value of the <code>title</code> property passed to the MarkerClusterer.
  86.  */
  87. /**
  88.  * A cluster icon.
  89.  *
  90.  * @constructor
  91.  * @extends google.maps.OverlayView
  92.  * @param {Cluster} cluster The cluster with which the icon is to be associated.
  93.  * @param {Array} [styles] An array of {@link ClusterIconStyle} defining the cluster icons
  94.  *  to use for various cluster sizes.
  95.  * @private
  96.  */
  97. function ClusterIcon(cluster, styles) {
  98.     cluster.getMarkerClusterer().extend(ClusterIcon, google.maps.OverlayView);
  100.     this.cluster_ = cluster;
  101.     this.className_ = cluster.getMarkerClusterer().getClusterClass();
  102.     this.styles_ = styles;
  103.     this.center_ = null;
  104.     this.div_ = null;
  105.     this.sums_ = null;
  106.     this.visible_ = false;
  108.     this.setMap(cluster.getMap()); // Note: this causes onAdd to be called
  109. }
  112. /**
  113.  * Adds the icon to the DOM.
  114.  */
  115. ClusterIcon.prototype.onAdd = function() {
  116.     var cClusterIcon = this;
  117.     var cMouseDownInCluster;
  118.     var cDraggingMapByCluster;
  120.     this.div_ = document.createElement("div");
  121.     this.div_.className = this.className_;
  122.     if (this.visible_) {
  123.         this.show();
  124.     }
  126.     this.getPanes().overlayMouseTarget.appendChild(this.div_);
  128.     // Fix for Issue 157
  129.     this.boundsChangedListener_ = google.maps.event.addListener(this.getMap(), "bounds_changed", function() {
  130.         cDraggingMapByCluster = cMouseDownInCluster;
  131.     });
  134.     this.div_.addEventListener("mousedown", function() {
  135.         cMouseDownInCluster = true;
  136.         cDraggingMapByCluster = false;
  137.     });
  140.     this.div_.addEventListener("click", function(e) {
  141.         cMouseDownInCluster = false;
  142.         if (!cDraggingMapByCluster) {
  143.             var theBounds;
  144.             var mz;
  145.             var mc = cClusterIcon.cluster_.getMarkerClusterer();
  146.             /**
  147.              * This event is fired when a cluster marker is clicked.
  148.              * @name MarkerClusterer#click
  149.              * @param {Cluster} c The cluster that was clicked.
  150.              * @event
  151.              */
  152.             google.maps.event.trigger(mc, "click", cClusterIcon.cluster_);
  153.             google.maps.event.trigger(mc, "clusterclick", cClusterIcon.cluster_); // deprecated name
  155.             // The default click handler follows. Disable it by setting
  156.             // the zoomOnClick property to false.
  157.             if (mc.getZoomOnClick()) {
  158.                 // Zoom into the cluster.
  159.                 mz = mc.getMaxZoom();
  160.                 theBounds = cClusterIcon.cluster_.getBounds();
  161.                 mc.getMap().fitBounds(theBounds);
  162.                 // There is a fix for Issue 170 here:
  163.                 setTimeout(function() {
  164.                     mc.getMap().fitBounds(theBounds);
  165.                     // Don't zoom beyond the max zoom level
  166.                     if (mz !== null && (mc.getMap().getZoom() > mz)) {
  167.                         mc.getMap().setZoom(mz + 1);
  168.                     }
  169.                 }, 100);
  170.             }
  172.             // Prevent event propagation to the map:
  173.             e.cancelBubble = true;
  174.             if (e.stopPropagation) {
  175.                 e.stopPropagation();
  176.             }
  177.         }
  178.     });
  180.     this.div_.addEventListener("mouseover", function() {
  181.         var mc = cClusterIcon.cluster_.getMarkerClusterer();
  182.         /**
  183.          * This event is fired when the mouse moves over a cluster marker.
  184.          * @name MarkerClusterer#mouseover
  185.          * @param {Cluster} c The cluster that the mouse moved over.
  186.          * @event
  187.          */
  188.         google.maps.event.trigger(mc, "mouseover", cClusterIcon.cluster_);
  189.         google.maps.event.trigger(cClusterIcon.cluster_, "mouseover");
  190.     });
  192.     this.div_.addEventListener( "mouseout", function() {
  193.         var mc = cClusterIcon.cluster_.getMarkerClusterer();
  194.         /**
  195.          * This event is fired when the mouse moves out of a cluster marker.
  196.          * @name MarkerClusterer#mouseout
  197.          * @param {Cluster} c The cluster that the mouse moved out of.
  198.          * @event
  199.          */
  200.         google.maps.event.trigger(mc, "mouseout", cClusterIcon.cluster_);
  201.         google.maps.event.trigger(cClusterIcon.cluster_, "mouseout");
  202.     });
  205.     var mc = this.cluster_.getMarkerClusterer();
  206.     if (mc.markers_.caculateSum !== undefined) {
  207.         var infowindow = new google.maps.InfoWindow({
  208.             maxWidth: 350
  209.         });
  210.         google.maps.event.addListener(this.cluster_, 'mouseover', function(event) {
  211.             var tooltip = mc.markers_.caculateSum(this.cluster_.markers_);
  212.             var content, style;
  213.             if (typeof tooltip == "object") {
  214.                 if (tooltip.style)
  215.                     style = tooltip.style;
  216.                 if (tooltip.element)
  217.                     content = tooltip.element;
  218.             } else
  219.                 content = tooltip;
  220.             if (style !== undefined)
  221.                 infowindow.setOptions(style);
  222.             infowindow.setContent(content);
  223.             var info = new google.maps.MVCObject;
  224.             info.set('position', this.center_);
  225.             info.set('anchorPoint', new google.maps.Point(0, -12));
  226.             infowindow.open(mc.map, info);
  227.         }.bind(this));
  228.         google.maps.event.addListener(this.cluster_, 'mouseout', function(event) {
  229.             infowindow.close();
  230.         }.bind(this));
  231.         google.maps.event.addListener(mc.map, "zoom_changed", function() {
  232.             infowindow.close();
  233.         })
  234.     }
  236. };
  239. /**
  240.  * Removes the icon from the DOM.
  241.  */
  242. ClusterIcon.prototype.onRemove = function() {
  243.     if (this.div_ && this.div_.parentNode) {
  244.         this.hide();
  245.         google.maps.event.removeListener(this.boundsChangedListener_);
  246.         google.maps.event.clearInstanceListeners(this.div_);
  247.         this.div_.parentNode.removeChild(this.div_);
  248.         this.div_ = null;
  249.     }
  250. };
  253. /**
  254.  * Draws the icon.
  255.  */
  256. ClusterIcon.prototype.draw = function() {
  257.     if (this.visible_) {
  258.         var pos = this.getPosFromLatLng_(this.center_);
  259.         this.div_.style.top = pos.y + "px";
  260.         this.div_.style.left = pos.x + "px";
  261.     }
  262. };
  265. /**
  266.  * Hides the icon.
  267.  */
  268. ClusterIcon.prototype.hide = function() {
  269.     if (this.div_) {
  270.         this.div_.style.display = "none";
  271.     }
  272.     this.visible_ = false;
  273. };
  276. /**
  277.  * Positions and shows the icon.
  278.  */
  279. ClusterIcon.prototype.show = function() {
  280.     if (this.div_) {
  281.         var img = "";
  282.         // NOTE: values must be specified in px units
  283.         var bp = this.backgroundPosition_.split(" ");
  284.         var spriteH = parseInt(bp[0].trim(), 10);
  285.         var spriteV = parseInt(bp[1].trim(), 10);
  286.         var pos = this.getPosFromLatLng_(this.center_);
  287.         this.div_.style.cssText = this.createCss(pos);
  288.         img = "<img src='" + this.url_ + "' style='position: absolute; top: " + spriteV + "px; left: " + spriteH + "px; ";
  289.         if (!this.cluster_.getMarkerClusterer().enableRetinaIcons_) {
  290.             img += "clip: rect(" + (-1 * spriteV) + "px, " + ((-1 * spriteH) + this.width_) + "px, " +
  291.                 ((-1 * spriteV) + this.height_) + "px, " + (-1 * spriteH) + "px);";
  292.         } else {
  293.             img += "width: " + this.width_ + "px;" + "height: " + this.height_ + "px;";
  294.         }
  295.         img += "'>";
  296.         this.div_.innerHTML = img + "<div style='" +
  297.             "position: absolute;" +
  298.             "top: " + this.anchorText_[0] + "px;" +
  299.             "left: " + this.anchorText_[1] + "px;" +
  300.             "color: " + this.textColor_ + ";" +
  301.             "font-size: " + this.textSize_ + "px;" +
  302.             "font-family: " + this.fontFamily_ + ";" +
  303.             "font-weight: " + this.fontWeight_ + ";" +
  304.             "font-style: " + this.fontStyle_ + ";" +
  305.             "text-decoration: " + this.textDecoration_ + ";" +
  306.             "text-align: center;" +
  307.             "width: " + this.width_ + "px;" +
  308.             "line-height:" + this.height_ + "px;" +
  309.             "'>" + (this.cluster_.hideLabel_ ? ' ' : this.sums_.text) + "</div>";
  310.         if (typeof this.sums_.title === "undefined" || this.sums_.title === "") {
  311.             this.div_.title = this.cluster_.getMarkerClusterer().getTitle();
  312.         } else {
  313.             this.div_.title = this.sums_.title;
  314.         }
  315.         this.div_.style.display = "";
  316.     }
  317.     this.visible_ = true;
  318. };
  321. /**
  322.  * Sets the icon styles to the appropriate element in the styles array.
  323.  *
  324.  * @param {ClusterIconInfo} sums The icon label text and styles index.
  325.  */
  326. ClusterIcon.prototype.useStyle = function(sums) {
  327.     this.sums_ = sums;
  328.     var index = Math.max(0, sums.index - 1);
  329.     index = Math.min(this.styles_.length - 1, index);
  330.     var style = this.styles_[index];
  331.     this.url_ = style.url;
  332.     this.height_ = style.height;
  333.     this.width_ = style.width;
  334.     this.anchorText_ = style.anchorText || [0, 0];
  335.     this.anchorIcon_ = style.anchorIcon || [parseInt(this.height_ / 2, 10), parseInt(this.width_ / 2, 10)];
  336.     this.textColor_ = style.textColor || "black";
  337.     this.textSize_ = style.textSize || 11;
  338.     this.textDecoration_ = style.textDecoration || "none";
  339.     this.fontWeight_ = style.fontWeight || "bold";
  340.     this.fontStyle_ = style.fontStyle || "normal";
  341.     this.fontFamily_ = style.fontFamily || "Arial,sans-serif";
  342.     this.backgroundPosition_ = style.backgroundPosition || "0 0";
  343. };
  346. /**
  347.  * Sets the position at which to center the icon.
  348.  *
  349.  * @param {google.maps.LatLng} center The latlng to set as the center.
  350.  */
  351. ClusterIcon.prototype.setCenter = function(center) {
  352.     this.center_ = center;
  353. };
  356. /**
  357.  * Creates the cssText style parameter based on the position of the icon.
  358.  *
  359.  * @param {google.maps.Point} pos The position of the icon.
  360.  * @return {string} The CSS style text.
  361.  */
  362. ClusterIcon.prototype.createCss = function(pos) {
  363.     var style = [];
  364.     style.push("cursor: pointer;");
  365.     style.push("position: absolute; top: " + pos.y + "px; left: " + pos.x + "px;");
  366.     style.push("width: " + this.width_ + "px; height: " + this.height_ + "px;");
  367.     return style.join("");
  368. };
  371. /**
  372.  * Returns the position at which to place the DIV depending on the latlng.
  373.  *
  374.  * @param {google.maps.LatLng} latlng The position in latlng.
  375.  * @return {google.maps.Point} The position in pixels.
  376.  */
  377. ClusterIcon.prototype.getPosFromLatLng_ = function(latlng) {
  378.     var pos = this.getProjection().fromLatLngToDivPixel(latlng);
  379.     pos.x -= this.anchorIcon_[1];
  380.     pos.y -= this.anchorIcon_[0];
  381.     pos.x = parseInt(pos.x, 10);
  382.     pos.y = parseInt(pos.y, 10);
  383.     return pos;
  384. };
  387. /**
  388.  * Creates a single cluster that manages a group of proximate markers.
  389.  *  Used internally, do not call this constructor directly.
  390.  * @constructor
  391.  * @param {MarkerClusterer} mc The <code>MarkerClusterer</code> object with which this
  392.  *  cluster is associated.
  393.  */
  394. function Cluster(mc) {
  395.     this.markerClusterer_ = mc;
  396.     this.map_ = mc.getMap();
  397.     this.gridSize_ = mc.getGridSize();
  398.     this.minClusterSize_ = mc.getMinimumClusterSize();
  399.     this.averageCenter_ = mc.getAverageCenter();
  400.     this.hideLabel_ = mc.getHideLabel();
  401.     this.markers_ = [];
  402.     this.center_ = null;
  403.     this.bounds_ = null;
  404.     this.clusterIcon_ = new ClusterIcon(this, mc.getStyles());
  405. }
  408. /**
  409.  * Returns the number of markers managed by the cluster. You can call this from
  410.  * a <code>click</code>, <code>mouseover</code>, or <code>mouseout</code> event handler
  411.  * for the <code>MarkerClusterer</code> object.
  412.  *
  413.  * @return {number} The number of markers in the cluster.
  414.  */
  415. Cluster.prototype.getSize = function() {
  416.     return this.markers_.length;
  417. };
  420. /**
  421.  * Returns the array of markers managed by the cluster. You can call this from
  422.  * a <code>click</code>, <code>mouseover</code>, or <code>mouseout</code> event handler
  423.  * for the <code>MarkerClusterer</code> object.
  424.  *
  425.  * @return {Array} The array of markers in the cluster.
  426.  */
  427. Cluster.prototype.getMarkers = function() {
  428.     return this.markers_;
  429. };
  432. /**
  433.  * Returns the center of the cluster. You can call this from
  434.  * a <code>click</code>, <code>mouseover</code>, or <code>mouseout</code> event handler
  435.  * for the <code>MarkerClusterer</code> object.
  436.  *
  437.  * @return {google.maps.LatLng} The center of the cluster.
  438.  */
  439. Cluster.prototype.getCenter = function() {
  440.     return this.center_;
  441. };
  444. /**
  445.  * Returns the map with which the cluster is associated.
  446.  *
  447.  * @return {google.maps.Map} The map.
  448.  * @ignore
  449.  */
  450. Cluster.prototype.getMap = function() {
  451.     return this.map_;
  452. };
  455. /**
  456.  * Returns the <code>MarkerClusterer</code> object with which the cluster is associated.
  457.  *
  458.  * @return {MarkerClusterer} The associated marker clusterer.
  459.  * @ignore
  460.  */
  461. Cluster.prototype.getMarkerClusterer = function() {
  462.     return this.markerClusterer_;
  463. };
  466. /**
  467.  * Returns the bounds of the cluster.
  468.  *
  469.  * @return {google.maps.LatLngBounds} the cluster bounds.
  470.  * @ignore
  471.  */
  472. Cluster.prototype.getBounds = function() {
  473.     var i;
  474.     var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
  475.     var markers = this.getMarkers();
  476.     for (i = 0; i < markers.length; i++) {
  477.         bounds.extend(markers[i].getPosition());
  478.     }
  479.     return bounds;
  480. };
  483. /**
  484.  * Removes the cluster from the map.
  485.  *
  486.  * @ignore
  487.  */
  488. Cluster.prototype.remove = function() {
  489.     this.clusterIcon_.setMap(null);
  490.     this.markers_ = [];
  491.     delete this.markers_;
  492. };
  495. /**
  496.  * Adds a marker to the cluster.
  497.  *
  498.  * @param {google.maps.Marker} marker The marker to be added.
  499.  * @return {boolean} True if the marker was added.
  500.  * @ignore
  501.  */
  502. Cluster.prototype.addMarker = function(marker) {
  503.     var i;
  504.     var mCount;
  505.     var mz;
  507.     if (this.isMarkerAlreadyAdded_(marker)) {
  508.         return false;
  509.     }
  511.     if (!this.center_) {
  512.         this.center_ = marker.getPosition();
  513.         this.calculateBounds_();
  514.     } else {
  515.         if (this.averageCenter_) {
  516.             var l = this.markers_.length + 1;
  517.             var lat = (this.center_.lat() * (l - 1) + marker.getPosition().lat()) / l;
  518.             var lng = (this.center_.lng() * (l - 1) + marker.getPosition().lng()) / l;
  519.             this.center_ = new google.maps.LatLng(lat, lng);
  520.             this.calculateBounds_();
  521.         }
  522.     }
  524.     marker.isAdded = true;
  525.     this.markers_.push(marker);
  527.     mCount = this.markers_.length;
  528.     mz = this.markerClusterer_.getMaxZoom();
  530.     if (mz !== null && this.map_.getZoom() > mz) {
  531.         // Zoomed in past max zoom, so show the marker.
  532.         if (marker.getMap() !== this.map_) {
  533.             marker.setMap(this.map_);
  534.         }
  535.     } else if (mCount < this.minClusterSize_) {
  536.         // Min cluster size not reached so show the marker.
  537.         if (marker.getMap() !== this.map_) {
  538.             marker.setMap(this.map_);
  539.         }
  540.     } else if (mCount === this.minClusterSize_) {
  541.         // Hide the markers that were showing.
  542.         for (i = 0; i < mCount; i++) {
  543.             this.markers_[i].setMap(null);
  544.         }
  545.     } else {
  546.         marker.setMap(null);
  547.     }
  549.     return true;
  550. };
  552. /**
  553.  * Determines if a marker lies within the cluster's bounds.
  554.  *
  555.  * @param {google.maps.Marker} marker The marker to check.
  556.  * @return {boolean} True if the marker lies in the bounds.
  557.  * @ignore
  558.  */
  559. Cluster.prototype.isMarkerInClusterBounds = function(marker) {
  560.     return this.bounds_.contains(marker.getPosition());
  561. };
  564. /**
  565.  * Calculates the extended bounds of the cluster with the grid.
  566.  */
  567. Cluster.prototype.calculateBounds_ = function() {
  568.     var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
  569.     this.bounds_ = this.markerClusterer_.getExtendedBounds(bounds);
  570. };
  573. /**
  574.  * Updates the cluster icon.
  575.  */
  576. Cluster.prototype.updateIcon_ = function() {
  577.     var mCount = this.markers_.length;
  578.     var mz = this.markerClusterer_.getMaxZoom();
  580.     if (mz !== null && this.map_.getZoom() > mz) {
  581.         this.clusterIcon_.hide();
  582.         return;
  583.     }
  585.     if (mCount < this.minClusterSize_) {
  586.         // Min cluster size not yet reached.
  587.         this.clusterIcon_.hide();
  588.         return;
  589.     }
  591.     var numStyles = this.markerClusterer_.getStyles().length;
  592.     var sums = this.markerClusterer_.getCalculator()(this.markers_, numStyles);
  593.     this.clusterIcon_.setCenter(this.center_);
  594.     this.clusterIcon_.useStyle(sums);
  595.     this.clusterIcon_.show();
  596. };
  599. /**
  600.  * Determines if a marker has already been added to the cluster.
  601.  *
  602.  * @param {google.maps.Marker} marker The marker to check.
  603.  * @return {boolean} True if the marker has already been added.
  604.  */
  605. Cluster.prototype.isMarkerAlreadyAdded_ = function(marker) {
  606.     for (var i = 0, n = this.markers_.length; i < n; i++) {
  607.         if (marker === this.markers_[i]) {
  608.             return true;
  609.         }
  610.     }
  611.     return false;
  612. };
  615. /**
  616.  * @name MarkerClustererOptions
  617.  * @class This class represents the optional parameter passed to
  618.  *  the {@link MarkerClusterer} constructor.
  619.  * @property {number} [gridSize=60] The grid size of a cluster in pixels. The grid is a square.
  620.  * @property {number} [maxZoom=null] The maximum zoom level at which clustering is enabled or
  621.  *  <code>null</code> if clustering is to be enabled at all zoom levels.
  622.  * @property {boolean} [zoomOnClick=true] Whether to zoom the map when a cluster marker is
  623.  *  clicked. You may want to set this to <code>false</code> if you have installed a handler
  624.  *  for the <code>click</code> event and it deals with zooming on its own.
  625.  * @property {boolean} [averageCenter=false] Whether the position of a cluster marker should be
  626.  *  the average position of all markers in the cluster. If set to <code>false</code>, the
  627.  *  cluster marker is positioned at the location of the first marker added to the cluster.
  628.  * @property {number} [minimumClusterSize=2] The minimum number of markers needed in a cluster
  629.  *  before the markers are hidden and a cluster marker appears.
  630.  * @property {boolean} [ignoreHidden=false] Whether to ignore hidden markers in clusters. You
  631.  *  may want to set this to <code>true</code> to ensure that hidden markers are not included
  632.  *  in the marker count that appears on a cluster marker (this count is the value of the
  633.  *  <code>text</code> property of the result returned by the default <code>calculator</code>).
  634.  *  If set to <code>true</code> and you change the visibility of a marker being clustered, be
  635.  *  sure to also call <code>MarkerClusterer.repaint()</code>.
  636.  * @property {string} [title=""] The tooltip to display when the mouse moves over a cluster
  637.  *  marker. (Alternatively, you can use a custom <code>calculator</code> function to specify a
  638.  *  different tooltip for each cluster marker.)
  639.  * @property {function} [calculator=MarkerClusterer.CALCULATOR] The function used to determine
  640.  *  the text to be displayed on a cluster marker and the index indicating which style to use
  641.  *  for the cluster marker. The input parameters for the function are (1) the array of markers
  642.  *  represented by a cluster marker and (2) the number of cluster icon styles. It returns a
  643.  *  {@link ClusterIconInfo} object. The default <code>calculator</code> returns a
  644.  *  <code>text</code> property which is the number of markers in the cluster and an
  645.  *  <code>index</code> property which is one higher than the lowest integer such that
  646.  *  <code>10^i</code> exceeds the number of markers in the cluster, or the size of the styles
  647.  *  array, whichever is less. The <code>styles</code> array element used has an index of
  648.  *  <code>index</code> minus 1. For example, the default <code>calculator</code> returns a
  649.  *  <code>text</code> value of <code>"125"</code> and an <code>index</code> of <code>3</code>
  650.  *  for a cluster icon representing 125 markers so the element used in the <code>styles</code>
  651.  *  array is <code>2</code>. A <code>calculator</code> may also return a <code>title</code>
  652.  *  property that contains the text of the tooltip to be used for the cluster marker. If
  653.  *   <code>title</code> is not defined, the tooltip is set to the value of the <code>title</code>
  654.  *   property for the MarkerClusterer.
  655.  * @property {string} [clusterClass="cluster"] The name of the CSS class defining general styles
  656.  *  for the cluster markers. Use this class to define CSS styles that are not set up by the code
  657.  *  that processes the <code>styles</code> array.
  658.  * @property {Array} [styles] An array of {@link ClusterIconStyle} elements defining the styles
  659.  *  of the cluster markers to be used. The element to be used to style a given cluster marker
  660.  *  is determined by the function defined by the <code>calculator</code> property.
  661.  *  The default is an array of {@link ClusterIconStyle} elements whose properties are derived
  662.  *  from the values for <code>imagePath</code>, <code>imageExtension</code>, and
  663.  *  <code>imageSizes</code>.
  664.  * @property {boolean} [enableRetinaIcons=false] Whether to allow the use of cluster icons that
  665.  * have sizes that are some multiple (typically double) of their actual display size. Icons such
  666.  * as these look better when viewed on high-resolution monitors such as Apple's Retina displays.
  667.  * Note: if this property is <code>true</code>, sprites cannot be used as cluster icons.
  668.  * @property {number} [batchSize=MarkerClusterer.BATCH_SIZE] Set this property to the
  669.  *  number of markers to be processed in a single batch when using a browser other than
  670.  *  Internet Explorer (for Internet Explorer, use the batchSizeIE property instead).
  671.  * @property {number} [batchSizeIE=MarkerClusterer.BATCH_SIZE_IE] When Internet Explorer is
  672.  *  being used, markers are processed in several batches with a small delay inserted between
  673.  *  each batch in an attempt to avoid Javascript timeout errors. Set this property to the
  674.  *  number of markers to be processed in a single batch; select as high a number as you can
  675.  *  without causing a timeout error in the browser. This number might need to be as low as 100
  676.  *  if 15,000 markers are being managed, for example.
  677.  * @property {string} [imagePath=MarkerClusterer.IMAGE_PATH]
  678.  *  The full URL of the root name of the group of image files to use for cluster icons.
  679.  *  The complete file name is of the form <code>imagePath</code>n.<code>imageExtension</code>
  680.  *  where n is the image file number (1, 2, etc.).
  681.  * @property {string} [imageExtension=MarkerClusterer.IMAGE_EXTENSION]
  682.  *  The extension name for the cluster icon image files (e.g., <code>"png"</code> or
  683.  *  <code>"jpg"</code>).
  684.  * @property {Array} [imageSizes=MarkerClusterer.IMAGE_SIZES]
  685.  *  An array of numbers containing the widths of the group of
  686.  *  <code>imagePath</code>n.<code>imageExtension</code> image files.
  687.  *  (The images are assumed to be square.)
  688.  */
  689. /**
  690.  * Creates a MarkerClusterer object with the options specified in {@link MarkerClustererOptions}.
  691.  * @constructor
  692.  * @extends google.maps.OverlayView
  693.  * @param {google.maps.Map} map The Google map to attach to.
  694.  * @param {Array.<google.maps.Marker>} [opt_markers] The markers to be added to the cluster.
  695.  * @param {MarkerClustererOptions} [opt_options] The optional parameters.
  696.  */
  697. function MarkerClusterer(map, opt_markers, opt_options) {
  698.     // MarkerClusterer implements google.maps.OverlayView interface. We use the
  699.     // extend function to extend MarkerClusterer with google.maps.OverlayView
  700.     // because it might not always be available when the code is defined so we
  701.     // look for it at the last possible moment. If it doesn't exist now then
  702.     // there is no point going ahead :)
  703.     this.extend(MarkerClusterer, google.maps.OverlayView);
  705.     opt_markers = opt_markers || [];
  706.     opt_options = opt_options || {};
  708.     this.markers_ = [];
  709.     this.clusters_ = [];
  710.     this.listeners_ = [];
  711.     this.activeMap_ = null;
  712.     this.ready_ = false;
  714.     this.gridSize_ = opt_options.gridSize || 60;
  715.     this.minClusterSize_ = opt_options.minimumClusterSize || 2;
  716.     this.maxZoom_ = opt_options.maxZoom || null;
  717.     this.styles_ = opt_options.styles || [];
  718.     this.title_ = opt_options.title || "";
  719.     this.zoomOnClick_ = true;
  720.     if (opt_options.zoomOnClick !== undefined) {
  721.         this.zoomOnClick_ = opt_options.zoomOnClick;
  722.     }
  723.     this.averageCenter_ = false;
  724.     if (opt_options.averageCenter !== undefined) {
  725.         this.averageCenter_ = opt_options.averageCenter;
  726.     }
  727.     this.ignoreHidden_ = false;
  728.     if (opt_options.ignoreHidden !== undefined) {
  729.         this.ignoreHidden_ = opt_options.ignoreHidden;
  730.     }
  731.     this.enableRetinaIcons_ = false;
  732.     if (opt_options.enableRetinaIcons !== undefined) {
  733.         this.enableRetinaIcons_ = opt_options.enableRetinaIcons;
  734.     }
  735.     this.hideLabel_ = false;
  736.     if (opt_options.hideLabel !== undefined) {
  737.         this.hideLabel_ = opt_options.hideLabel;
  738.     }
  739.     this.imagePath_ = opt_options.imagePath || MarkerClusterer.IMAGE_PATH;
  740.     this.imageExtension_ = opt_options.imageExtension || MarkerClusterer.IMAGE_EXTENSION;
  741.     this.imageSizes_ = opt_options.imageSizes || MarkerClusterer.IMAGE_SIZES;
  742.     this.calculator_ = opt_options.calculator || MarkerClusterer.CALCULATOR;
  743.     this.batchSize_ = opt_options.batchSize || MarkerClusterer.BATCH_SIZE;
  744.     this.batchSizeIE_ = opt_options.batchSizeIE || MarkerClusterer.BATCH_SIZE_IE;
  745.     this.clusterClass_ = opt_options.clusterClass || "cluster";
  747.     if (navigator.userAgent.toLowerCase().indexOf("msie") !== -1) {
  748.         // Try to avoid IE timeout when processing a huge number of markers:
  749.         this.batchSize_ = this.batchSizeIE_;
  750.     }
  752.     this.setupStyles_();
  754.     this.addMarkers(opt_markers, true);
  755.     this.setMap(map); // Note: this causes onAdd to be called
  756. }
  759. /**
  760.  * Implementation of the onAdd interface method.
  761.  * @ignore
  762.  */
  763. MarkerClusterer.prototype.onAdd = function() {
  764.     var cMarkerClusterer = this;
  766.     this.activeMap_ = this.getMap();
  767.     this.ready_ = true;
  769.     this.repaint();
  771.     // Add the map event listeners
  772.     this.listeners_ = [
  773.         google.maps.event.addListener(this.getMap(), "zoom_changed", function() {
  774.             cMarkerClusterer.resetViewport_(false);
  775.             // Workaround for this Google bug: when map is at level 0 and "-" of
  776.             // zoom slider is clicked, a "zoom_changed" event is fired even though
  777.             // the map doesn't zoom out any further. In this situation, no "idle"
  778.             // event is triggered so the cluster markers that have been removed
  779.             // do not get redrawn. Same goes for a zoom in at maxZoom.
  780.             if (this.getZoom() === (this.get("minZoom") || 0) || this.getZoom() === this.get("maxZoom")) {
  781.                 google.maps.event.trigger(this, "idle");
  782.             }
  783.         }),
  784.         google.maps.event.addListener(this.getMap(), "idle", function() {
  785.             cMarkerClusterer.redraw_();
  786.         })
  787.     ];
  788. };
  791. /**
  792.  * Implementation of the onRemove interface method.
  793.  * Removes map event listeners and all cluster icons from the DOM.
  794.  * All managed markers are also put back on the map.
  795.  * @ignore
  796.  */
  797. MarkerClusterer.prototype.onRemove = function() {
  798.     var i;
  800.     // Put all the managed markers back on the map:
  801.     for (i = 0; i < this.markers_.length; i++) {
  802.         if (this.markers_[i].getMap() !== this.activeMap_) {
  803.             this.markers_[i].setMap(this.activeMap_);
  804.         }
  805.     }
  807.     // Remove all clusters:
  808.     for (i = 0; i < this.clusters_.length; i++) {
  809.         this.clusters_[i].remove();
  810.     }
  811.     this.clusters_ = [];
  813.     // Remove map event listeners:
  814.     for (i = 0; i < this.listeners_.length; i++) {
  815.         google.maps.event.removeListener(this.listeners_[i]);
  816.     }
  817.     this.listeners_ = [];
  819.     this.activeMap_ = null;
  820.     this.ready_ = false;
  821. };
  824. /**
  825.  * Implementation of the draw interface method.
  826.  * @ignore
  827.  */
  828. MarkerClusterer.prototype.draw = function() {};
  831. /**
  832.  * Sets up the styles object.
  833.  */
  834. MarkerClusterer.prototype.setupStyles_ = function() {
  835.     var i, size;
  836.     if (this.styles_.length > 0) {
  837.         return;
  838.     }
  840.     for (i = 0; i < this.imageSizes_.length; i++) {
  841.         size = this.imageSizes_[i];
  842.         this.styles_.push({
  843.             url: this.imagePath_ + (i + 1) + "." + this.imageExtension_,
  844.             height: size,
  845.             width: size
  846.         });
  847.     }
  848. };
  851. /**
  852.  *  Fits the map to the bounds of the markers managed by the clusterer.
  853.  */
  854. MarkerClusterer.prototype.fitMapToMarkers = function() {
  855.     var i;
  856.     var markers = this.getMarkers();
  857.     var bounds = new google.maps.LatLngBounds();
  858.     for (i = 0; i < markers.length; i++) {
  859.         bounds.extend(markers[i].getPosition());
  860.     }
  862.     this.getMap().fitBounds(bounds);
  863. };
  866. /**
  867.  * Returns the value of the <code>gridSize</code> property.
  868.  *
  869.  * @return {number} The grid size.
  870.  */
  871. MarkerClusterer.prototype.getGridSize = function() {
  872.     return this.gridSize_;
  873. };
  876. /**
  877.  * Sets the value of the <code>gridSize</code> property.
  878.  *
  879.  * @param {number} gridSize The grid size.
  880.  */
  881. MarkerClusterer.prototype.setGridSize = function(gridSize) {
  882.     this.gridSize_ = gridSize;
  883. };
  886. /**
  887.  * Returns the value of the <code>minimumClusterSize</code> property.
  888.  *
  889.  * @return {number} The minimum cluster size.
  890.  */
  891. MarkerClusterer.prototype.getMinimumClusterSize = function() {
  892.     return this.minClusterSize_;
  893. };
  895. /**
  896.  * Sets the value of the <code>minimumClusterSize</code> property.
  897.  *
  898.  * @param {number} minimumClusterSize The minimum cluster size.
  899.  */
  900. MarkerClusterer.prototype.setMinimumClusterSize = function(minimumClusterSize) {
  901.     this.minClusterSize_ = minimumClusterSize;
  902. };
  905. /**
  906.  *  Returns the value of the <code>maxZoom</code> property.
  907.  *
  908.  *  @return {number} The maximum zoom level.
  909.  */
  910. MarkerClusterer.prototype.getMaxZoom = function() {
  911.     return this.maxZoom_;
  912. };
  915. /**
  916.  *  Sets the value of the <code>maxZoom</code> property.
  917.  *
  918.  *  @param {number} maxZoom The maximum zoom level.
  919.  */
  920. MarkerClusterer.prototype.setMaxZoom = function(maxZoom) {
  921.     this.maxZoom_ = maxZoom;
  922. };
  925. /**
  926.  *  Returns the value of the <code>styles</code> property.
  927.  *
  928.  *  @return {Array} The array of styles defining the cluster markers to be used.
  929.  */
  930. MarkerClusterer.prototype.getStyles = function() {
  931.     return this.styles_;
  932. };
  935. /**
  936.  *  Sets the value of the <code>styles</code> property.
  937.  *
  938.  *  @param {Array.<ClusterIconStyle>} styles The array of styles to use.
  939.  */
  940. MarkerClusterer.prototype.setStyles = function(styles) {
  941.     this.styles_ = styles;
  942. };
  945. /**
  946.  * Returns the value of the <code>title</code> property.
  947.  *
  948.  * @return {string} The content of the title text.
  949.  */
  950. MarkerClusterer.prototype.getTitle = function() {
  951.     return this.title_;
  952. };
  955. /**
  956.  *  Sets the value of the <code>title</code> property.
  957.  *
  958.  *  @param {string} title The value of the title property.
  959.  */
  960. MarkerClusterer.prototype.setTitle = function(title) {
  961.     this.title_ = title;
  962. };
  965. /**
  966.  * Returns the value of the <code>zoomOnClick</code> property.
  967.  *
  968.  * @return {boolean} True if zoomOnClick property is set.
  969.  */
  970. MarkerClusterer.prototype.getZoomOnClick = function() {
  971.     return this.zoomOnClick_;
  972. };
  975. /**
  976.  *  Sets the value of the <code>zoomOnClick</code> property.
  977.  *
  978.  *  @param {boolean} zoomOnClick The value of the zoomOnClick property.
  979.  */
  980. MarkerClusterer.prototype.setZoomOnClick = function(zoomOnClick) {
  981.     this.zoomOnClick_ = zoomOnClick;
  982. };
  985. /**
  986.  * Returns the value of the <code>averageCenter</code> property.
  987.  *
  988.  * @return {boolean} True if averageCenter property is set.
  989.  */
  990. MarkerClusterer.prototype.getAverageCenter = function() {
  991.     return this.averageCenter_;
  992. };
  995. /**
  996.  *  Sets the value of the <code>averageCenter</code> property.
  997.  *
  998.  *  @param {boolean} averageCenter The value of the averageCenter property.
  999.  */
  1000. MarkerClusterer.prototype.setAverageCenter = function(averageCenter) {
  1001.     this.averageCenter_ = averageCenter;
  1002. };
  1005. /**
  1006.  * Returns the value of the <code>ignoreHidden</code> property.
  1007.  *
  1008.  * @return {boolean} True if ignoreHidden property is set.
  1009.  */
  1010. MarkerClusterer.prototype.getIgnoreHidden = function() {
  1011.     return this.ignoreHidden_;
  1012. };
  1015. /**
  1016.  *  Sets the value of the <code>ignoreHidden</code> property.
  1017.  *
  1018.  *  @param {boolean} ignoreHidden The value of the ignoreHidden property.
  1019.  */
  1020. MarkerClusterer.prototype.setIgnoreHidden = function(ignoreHidden) {
  1021.     this.ignoreHidden_ = ignoreHidden;
  1022. };
  1025. /**
  1026.  * Returns the value of the <code>enableRetinaIcons</code> property.
  1027.  *
  1028.  * @return {boolean} True if enableRetinaIcons property is set.
  1029.  */
  1030. MarkerClusterer.prototype.getEnableRetinaIcons = function() {
  1031.     return this.enableRetinaIcons_;
  1032. };
  1035. /**
  1036.  *  Sets the value of the <code>enableRetinaIcons</code> property.
  1037.  *
  1038.  *  @param {boolean} enableRetinaIcons The value of the enableRetinaIcons property.
  1039.  */
  1040. MarkerClusterer.prototype.setEnableRetinaIcons = function(enableRetinaIcons) {
  1041.     this.enableRetinaIcons_ = enableRetinaIcons;
  1042. };
  1045. /**
  1046.  * Returns the value of the <code>imageExtension</code> property.
  1047.  *
  1048.  * @return {string} The value of the imageExtension property.
  1049.  */
  1050. MarkerClusterer.prototype.getImageExtension = function() {
  1051.     return this.imageExtension_;
  1052. };
  1055. /**
  1056.  *  Sets the value of the <code>imageExtension</code> property.
  1057.  *
  1058.  *  @param {string} imageExtension The value of the imageExtension property.
  1059.  */
  1060. MarkerClusterer.prototype.setImageExtension = function(imageExtension) {
  1061.     this.imageExtension_ = imageExtension;
  1062. };
  1065. /**
  1066.  * Returns the value of the <code>imagePath</code> property.
  1067.  *
  1068.  * @return {string} The value of the imagePath property.
  1069.  */
  1070. MarkerClusterer.prototype.getImagePath = function() {
  1071.     return this.imagePath_;
  1072. };
  1075. /**
  1076.  *  Sets the value of the <code>imagePath</code> property.
  1077.  *
  1078.  *  @param {string} imagePath The value of the imagePath property.
  1079.  */
  1080. MarkerClusterer.prototype.setImagePath = function(imagePath) {
  1081.     this.imagePath_ = imagePath;
  1082. };
  1085. /**
  1086.  * Returns the value of the <code>imageSizes</code> property.
  1087.  *
  1088.  * @return {Array} The value of the imageSizes property.
  1089.  */
  1090. MarkerClusterer.prototype.getImageSizes = function() {
  1091.     return this.imageSizes_;
  1092. };
  1095. /**
  1096.  *  Sets the value of the <code>imageSizes</code> property.
  1097.  *
  1098.  *  @param {Array} imageSizes The value of the imageSizes property.
  1099.  */
  1100. MarkerClusterer.prototype.setImageSizes = function(imageSizes) {
  1101.     this.imageSizes_ = imageSizes;
  1102. };
  1105. /**
  1106.  * Returns the value of the <code>calculator</code> property.
  1107.  *
  1108.  * @return {function} the value of the calculator property.
  1109.  */
  1110. MarkerClusterer.prototype.getCalculator = function() {
  1111.     return this.calculator_;
  1112. };
  1115. /**
  1116.  * Sets the value of the <code>calculator</code> property.
  1117.  *
  1118.  * @param {function(Array.<google.maps.Marker>, number)} calculator The value
  1119.  *  of the calculator property.
  1120.  */
  1121. MarkerClusterer.prototype.setCalculator = function(calculator) {
  1122.     this.calculator_ = calculator;
  1123. };
  1125. /**
  1126.  * Sets the value of the <code>hideLabel</code> property.
  1127.  *
  1128.  *  @param {boolean} printable The value of the hideLabel property.
  1129.  */
  1130. MarkerClusterer.prototype.setHideLabel = function(hideLabel) {
  1131.     this.hideLabel_ = hideLabel;
  1132. };
  1134. /**
  1135.  * Returns the value of the <code>hideLabel</code> property.
  1136.  *
  1137.  * @return {boolean} the value of the hideLabel property.
  1138.  */
  1139. MarkerClusterer.prototype.getHideLabel = function() {
  1140.     return this.hideLabel_;
  1141. };
  1143. /**
  1144.  * Returns the value of the <code>batchSizeIE</code> property.
  1145.  *
  1146.  * @return {number} the value of the batchSizeIE property.
  1147.  */
  1148. MarkerClusterer.prototype.getBatchSizeIE = function() {
  1149.     return this.batchSizeIE_;
  1150. };
  1153. /**
  1154.  * Sets the value of the <code>batchSizeIE</code> property.
  1155.  *
  1156.  *  @param {number} batchSizeIE The value of the batchSizeIE property.
  1157.  */
  1158. MarkerClusterer.prototype.setBatchSizeIE = function(batchSizeIE) {
  1159.     this.batchSizeIE_ = batchSizeIE;
  1160. };
  1163. /**
  1164.  * Returns the value of the <code>clusterClass</code> property.
  1165.  *
  1166.  * @return {string} the value of the clusterClass property.
  1167.  */
  1168. MarkerClusterer.prototype.getClusterClass = function() {
  1169.     return this.clusterClass_;
  1170. };
  1173. /**
  1174.  * Sets the value of the <code>clusterClass</code> property.
  1175.  *
  1176.  *  @param {string} clusterClass The value of the clusterClass property.
  1177.  */
  1178. MarkerClusterer.prototype.setClusterClass = function(clusterClass) {
  1179.     this.clusterClass_ = clusterClass;
  1180. };
  1183. /**
  1184.  *  Returns the array of markers managed by the clusterer.
  1185.  *
  1186.  *  @return {Array} The array of markers managed by the clusterer.
  1187.  */
  1188. MarkerClusterer.prototype.getMarkers = function() {
  1189.     return this.markers_;
  1190. };
  1193. /**
  1194.  *  Returns the number of markers managed by the clusterer.
  1195.  *
  1196.  *  @return {number} The number of markers.
  1197.  */
  1198. MarkerClusterer.prototype.getTotalMarkers = function() {
  1199.     return this.markers_.length;
  1200. };
  1203. /**
  1204.  * Returns the current array of clusters formed by the clusterer.
  1205.  *
  1206.  * @return {Array} The array of clusters formed by the clusterer.
  1207.  */
  1208. MarkerClusterer.prototype.getClusters = function() {
  1209.     return this.clusters_;
  1210. };
  1213. /**
  1214.  * Returns the number of clusters formed by the clusterer.
  1215.  *
  1216.  * @return {number} The number of clusters formed by the clusterer.
  1217.  */
  1218. MarkerClusterer.prototype.getTotalClusters = function() {
  1219.     return this.clusters_.length;
  1220. };
  1223. /**
  1224.  * Adds a marker to the clusterer. The clusters are redrawn unless
  1225.  *  <code>opt_nodraw</code> is set to <code>true</code>.
  1226.  *
  1227.  * @param {google.maps.Marker} marker The marker to add.
  1228.  * @param {boolean} [opt_nodraw] Set to <code>true</code> to prevent redrawing.
  1229.  */
  1230. MarkerClusterer.prototype.addMarker = function(marker, opt_nodraw) {
  1231.     this.pushMarkerTo_(marker);
  1232.     if (!opt_nodraw) {
  1233.         this.redraw_();
  1234.     }
  1235. };
  1238. /**
  1239.  * Adds an array of markers to the clusterer. The clusters are redrawn unless
  1240.  *  <code>opt_nodraw</code> is set to <code>true</code>.
  1241.  *
  1242.  * @param {Array.<google.maps.Marker>} markers The markers to add.
  1243.  * @param {boolean} [opt_nodraw] Set to <code>true</code> to prevent redrawing.
  1244.  */
  1245. MarkerClusterer.prototype.addMarkers = function(markers, opt_nodraw) {
  1246.     var key;
  1247.     for (key in markers) {
  1248.         if (markers.hasOwnProperty(key)) {
  1249.             this.pushMarkerTo_(markers[key]);
  1250.         }
  1251.     }
  1252.     if (!opt_nodraw) {
  1253.         this.redraw_();
  1254.     }
  1255. };
  1258. /**
  1259.  * Pushes a marker to the clusterer.
  1260.  *
  1261.  * @param {google.maps.Marker} marker The marker to add.
  1262.  */
  1263. MarkerClusterer.prototype.pushMarkerTo_ = function(marker) {
  1264.     // If the marker is draggable add a listener so we can update the clusters on the dragend:
  1265.     // if (marker.getDraggable()) {
  1266.     //     var cMarkerClusterer = this;
  1267.     //     google.maps.event.addListener(marker, "dragend", function() {
  1268.     //         if (cMarkerClusterer.ready_) {
  1269.     //             this.isAdded = false;
  1270.     //             cMarkerClusterer.repaint();
  1271.     //         }
  1272.     //     });
  1273.     // }
  1274.     marker.isAdded = false;
  1275.     this.markers_.push(marker);
  1276. };
  1279. /**
  1280.  * Removes a marker from the cluster and map.  The clusters are redrawn unless
  1281.  *  <code>opt_nodraw</code> is set to <code>true</code>. Returns <code>true</code> if the
  1282.  *  marker was removed from the clusterer.
  1283.  *
  1284.  * @param {google.maps.Marker} marker The marker to remove.
  1285.  * @param {boolean} [opt_nodraw] Set to <code>true</code> to prevent redrawing.
  1286.  * @param {boolean} [opt_noMapRemove] Set to <code>true</code> to prevent removal from map but still removing from cluster management
  1287.  * @return {boolean} True if the marker was removed from the clusterer.
  1288.  */
  1289. MarkerClusterer.prototype.removeMarker = function(marker, opt_nodraw, opt_noMapRemove) {
  1290.     var removeFromMap = true && !opt_noMapRemove;
  1291.     var removed = this.removeMarker_(marker, removeFromMap);
  1293.     if (!opt_nodraw && removed) {
  1294.         this.repaint();
  1295.     }
  1297.     return removed;
  1298. };
  1301. /**
  1302.  * Removes an array of markers from the cluster and map. The clusters are redrawn unless
  1303.  *  <code>opt_nodraw</code> is set to <code>true</code>. Returns <code>true</code> if markers
  1304.  *  were removed from the clusterer.
  1305.  *
  1306.  * @param {Array.<google.maps.Marker>} markers The markers to remove.
  1307.  * @param {boolean} [opt_nodraw] Set to <code>true</code> to prevent redrawing.
  1308.  * @param {boolean} [opt_noMapRemove] Set to <code>true</code> to prevent removal from map but still removing from cluster management
  1309.  * @return {boolean} True if markers were removed from the clusterer.
  1310.  */
  1311. MarkerClusterer.prototype.removeMarkers = function(markers, opt_nodraw, opt_noMapRemove) {
  1312.     var i, r;
  1313.     var removed = false;
  1314.     var removeFromMap = true && !opt_noMapRemove;
  1316.     for (i = 0; i < markers.length; i++) {
  1317.         r = this.removeMarker_(markers[i], removeFromMap);
  1318.         removed = removed || r;
  1319.     }
  1321.     if (!opt_nodraw && removed) {
  1322.         this.repaint();
  1323.     }
  1325.     return removed;
  1326. };
  1329. /**
  1330.  * Removes a marker and returns true if removed, false if not.
  1331.  *
  1332.  * @param {google.maps.Marker} marker The marker to remove
  1333.  * @param {boolean} removeFromMap set to <code>true</code> to explicitly remove from map as well as cluster manangement
  1334.  * @return {boolean} Whether the marker was removed or not
  1335.  */
  1336. MarkerClusterer.prototype.removeMarker_ = function(marker, removeFromMap) {
  1337.     var i;
  1338.     var index = -1;
  1339.     if (this.markers_.indexOf) {
  1340.         index = this.markers_.indexOf(marker);
  1341.     } else {
  1342.         for (i = 0; i < this.markers_.length; i++) {
  1343.             if (marker === this.markers_[i]) {
  1344.                 index = i;
  1345.                 break;
  1346.             }
  1347.         }
  1348.     }
  1350.     if (index === -1) {
  1351.         // Marker is not in our list of markers, so do nothing:
  1352.         return false;
  1353.     }
  1355.     if (removeFromMap) {
  1356.         marker.setMap(null);
  1357.     }
  1359.     this.markers_.splice(index, 1); // Remove the marker from the list of managed markers
  1360.     return true;
  1361. };
  1364. /**
  1365.  * Removes all clusters and markers from the map and also removes all markers
  1366.  *  managed by the clusterer.
  1367.  */
  1368. MarkerClusterer.prototype.clearMarkers = function() {
  1369.     this.resetViewport_(true);
  1370.     this.markers_ = [];
  1371. };
  1374. /**
  1375.  * Recalculates and redraws all the marker clusters from scratch.
  1376.  *  Call this after changing any properties.
  1377.  */
  1378. MarkerClusterer.prototype.repaint = function() {
  1379.     var oldClusters = this.clusters_.slice();
  1380.     this.clusters_ = [];
  1381.     this.resetViewport_(false);
  1382.     this.redraw_();
  1384.     // Remove the old clusters.
  1385.     // Do it in a timeout to prevent blinking effect.
  1386.     setTimeout(function() {
  1387.         var i;
  1388.         for (i = 0; i < oldClusters.length; i++) {
  1389.             oldClusters[i].remove();
  1390.         }
  1391.     }, 0);
  1392. };
  1395. /**
  1396.  * Returns the current bounds extended by the grid size.
  1397.  *
  1398.  * @param {google.maps.LatLngBounds} bounds The bounds to extend.
  1399.  * @return {google.maps.LatLngBounds} The extended bounds.
  1400.  * @ignore
  1401.  */
  1402. MarkerClusterer.prototype.getExtendedBounds = function(bounds) {
  1403.     var projection = this.getProjection();
  1405.     // Turn the bounds into latlng.
  1406.     var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
  1407.         bounds.getNorthEast().lng());
  1408.     var bl = new google.maps.LatLng(bounds.getSouthWest().lat(),
  1409.         bounds.getSouthWest().lng());
  1411.     // Convert the points to pixels and the extend out by the grid size.
  1412.     var trPix = projection.fromLatLngToDivPixel(tr);
  1413.     trPix.x += this.gridSize_;
  1414.     trPix.y -= this.gridSize_;
  1416.     var blPix = projection.fromLatLngToDivPixel(bl);
  1417.     blPix.x -= this.gridSize_;
  1418.     blPix.y += this.gridSize_;
  1420.     // Convert the pixel points back to LatLng
  1421.     var ne = projection.fromDivPixelToLatLng(trPix);
  1422.     var sw = projection.fromDivPixelToLatLng(blPix);
  1424.     // Extend the bounds to contain the new bounds.
  1425.     bounds.extend(ne);
  1426.     bounds.extend(sw);
  1428.     return bounds;
  1429. };
  1432. /**
  1433.  * Redraws all the clusters.
  1434.  */
  1435. MarkerClusterer.prototype.redraw_ = function() {
  1436.     this.createClusters_(0);
  1437. };
  1440. /**
  1441.  * Removes all clusters from the map. The markers are also removed from the map
  1442.  *  if <code>opt_hide</code> is set to <code>true</code>.
  1443.  *
  1444.  * @param {boolean} [opt_hide] Set to <code>true</code> to also remove the markers
  1445.  *  from the map.
  1446.  */
  1447. MarkerClusterer.prototype.resetViewport_ = function(opt_hide) {
  1448.     var i, marker;
  1449.     // Remove all the clusters
  1450.     for (i = 0; i < this.clusters_.length; i++) {
  1451.         this.clusters_[i].remove();
  1452.     }
  1453.     this.clusters_ = [];
  1455.     // Reset the markers to not be added and to be removed from the map.
  1456.     for (i = 0; i < this.markers_.length; i++) {
  1457.         marker = this.markers_[i];
  1458.         marker.isAdded = false;
  1459.         if (opt_hide) {
  1460.             marker.setMap(null);
  1461.         }
  1462.     }
  1463. };
  1466. /**
  1467.  * Calculates the distance between two latlng locations in km.
  1468.  *
  1469.  * @param {google.maps.LatLng} p1 The first lat lng point.
  1470.  * @param {google.maps.LatLng} p2 The second lat lng point.
  1471.  * @return {number} The distance between the two points in km.
  1472.  * @see http://www.movable-type.co.uk/scripts/latlong.html
  1473.  */
  1474. MarkerClusterer.prototype.distanceBetweenPoints_ = function(p1, p2) {
  1475.     var R = 6371; // Radius of the Earth in km
  1476.     var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
  1477.     var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
  1478.     var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
  1479.         Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
  1480.         Math.sin(dLon / 2) * Math.sin(dLon / 2);
  1481.     var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  1482.     var d = R * c;
  1483.     return d;
  1484. };
  1487. /**
  1488.  * Determines if a marker is contained in a bounds.
  1489.  *
  1490.  * @param {google.maps.Marker} marker The marker to check.
  1491.  * @param {google.maps.LatLngBounds} bounds The bounds to check against.
  1492.  * @return {boolean} True if the marker is in the bounds.
  1493.  */
  1494. MarkerClusterer.prototype.isMarkerInBounds_ = function(marker, bounds) {
  1495.     var northEast = bounds.getNorthEast();
  1496.     var southWest = bounds.getSouthWest();
  1499.     var position = marker.getPosition();
  1500.     var minX, maxX, minY, maxY;
  1502.     minX = southWest.lat();
  1503.     maxX = northEast.lat();
  1504.     minY = southWest.lng();
  1505.     maxY =  northEast.lng();
  1506.     while (0 > maxY)
  1507.         maxY += 180;
  1508.     maxY += 180;
  1509.     // bounds[this.a].g = maxY;? what for
  1510.     if (minX < position.lat() && position.lat() < maxX &&
  1511.         minY < position.lng() && position.lng() < maxY) {
  1512.         return true;
  1513.     }
  1514.     return false;
  1515. };
  1518. /**
  1519.  * Adds a marker to a cluster, or creates a new cluster.
  1520.  *
  1521.  * @param {google.maps.Marker} marker The marker to add.
  1522.  */
  1523. MarkerClusterer.prototype.addToClosestCluster_ = function(marker) {
  1524.     var i, d, cluster, center;
  1525.     var distance = 40000; // Some large number
  1526.     var clusterToAddTo = null;
  1527.     for (i = 0; i < this.clusters_.length; i++) {
  1528.         cluster = this.clusters_[i];
  1529.         center = cluster.getCenter();
  1530.         if (center) {
  1531.             d = this.distanceBetweenPoints_(center, marker.getPosition());
  1532.             if (d < distance) {
  1533.                 distance = d;
  1534.                 clusterToAddTo = cluster;
  1535.             }
  1536.         }
  1537.     }
  1538.     if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)) {
  1539.         clusterToAddTo.addMarker(marker);
  1540.     } else {
  1541.         cluster = new Cluster(this);
  1542.         cluster.addMarker(marker);
  1543.         this.clusters_.push(cluster);
  1544.     }
  1545. };
  1547. /**
  1548.  * Creates the clusters. This is done in batches to avoid timeout errors
  1549.  *  in some browsers when there is a huge number of markers.
  1550.  *
  1551.  * @param {number} iFirst The index of the first marker in the batch of
  1552.  *  markers to be added to clusters.
  1553.  */
  1555. MarkerClusterer.prototype.createClusters_ = function(iFirst) {
  1556.     var i, marker;
  1557.     var mapBounds;
  1558.     var cMarkerClusterer = this;
  1559.     if (!this.ready_) {
  1560.         return;
  1561.     }
  1563.     // Cancel previous batch processing if we're working on the first batch:
  1564.     if (iFirst === 0) {
  1565.         /**
  1566.          * This event is fired when the <code>MarkerClusterer</code> begins
  1567.          *  clustering markers.
  1568.          * @name MarkerClusterer#clusteringbegin
  1569.          * @param {MarkerClusterer} mc The MarkerClusterer whose markers are being clustered.
  1570.          * @event
  1571.          */
  1572.         google.maps.event.trigger(this, "clusteringbegin", this);
  1574.         if (typeof this.timerRefStatic !== "undefined") {
  1575.             clearTimeout(this.timerRefStatic);
  1576.             delete this.timerRefStatic;
  1577.         }
  1578.     }
  1580.     // Get our current map view bounds.
  1581.     // Create a new bounds object so we don't affect the map.
  1582.     //
  1583.     // See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:
  1584.     if (this.getMap().getZoom() > 3) {
  1585.         mapBounds = new google.maps.LatLngBounds(this.getMap().getBounds().getSouthWest(),
  1586.             this.getMap().getBounds().getNorthEast());
  1587.     } else {
  1588.         mapBounds = new google.maps.LatLngBounds(new google.maps.LatLng(85.02070771743472, -178.48388434375), new google.maps.LatLng(-85.08136444384544, 178.00048865625));
  1589.     }
  1590.     var bounds = this.getExtendedBounds(mapBounds);
  1591.     // console.log(bounds);
  1593.     var iLast = Math.min(iFirst + this.batchSize_, this.markers_.length);
  1594.     for (i = iFirst; i < iLast; i++) {
  1595.         this.markers_[i];
  1596.         if (this.markers_.isFilter === true) {
  1597.             if (this.markers_[i].isFilter === undefined) {
  1598.                 if (this.markers_[i].setMap !== undefined)
  1599.                     this.markers_[i].setMap(null);
  1600.                 continue;
  1601.             }
  1602.         }
  1603.         if (!this.markers_[i].isAdded && this.isMarkerInBounds_(this.markers_[i], bounds)) {
  1604.             if (!this.ignoreHidden_ || (this.ignoreHidden_ && this.markers_[i].getVisible())) {
  1605.                 if (this.markers_[i].getMap === undefined)
  1606.                     this.markers_[i] = this.addOrtherMarker(this.markers_[i]);
  1607.                 this.addToClosestCluster_(this.markers_[i]);
  1608.             }
  1609.         }
  1610.     }
  1612.     if (iLast < this.markers_.length) {
  1613.         this.timerRefStatic = setTimeout(function() {
  1614.             cMarkerClusterer.createClusters_(iLast);
  1615.         }, 0);
  1616.     } else {
  1617.         delete this.timerRefStatic;
  1619.         /**
  1620.          * This event is fired when the <code>MarkerClusterer</code> stops
  1621.          *  clustering markers.
  1622.          * @name MarkerClusterer#clusteringend
  1623.          * @param {MarkerClusterer} mc The MarkerClusterer whose markers are being clustered.
  1624.          * @event
  1625.          */
  1626.         google.maps.event.trigger(this, "clusteringend", this);
  1628.         for (i = 0; i < this.clusters_.length; i++) {
  1629.             this.clusters_[i].updateIcon_();
  1630.         }
  1631.     }
  1632. };
  1634. MarkerClusterer.prototype.addOrtherMarker = function(data) {
  1635.     var self = this;
  1636.     var position = [data.lat, data.lng];
  1637.     var color, tooltip;
  1638.     if (typeof testVariable !== "undefined")
  1639.         color = systemconfig.markerColor;
  1640.     if (data.color)
  1641.         color = data.color;
  1642.     if (data.tooltip)
  1643.         tooltip = data.tooltip;
  1644.     var image = {
  1645.         path: "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
  1646.         // This marker is 20 pixels wide by 32 pixels high.
  1647.         scaledSize: new google.maps.Size(24, 24),
  1648.         // The origin for this image is (0, 0).
  1649.         origin: new google.maps.Point(0, 0),
  1650.         // The anchor for this image is the base of the flagpole at (0, 32).
  1651.         anchor: new google.maps.Point(12, 12),
  1652.         fillColor: color,
  1653.         fillOpacity: 1,
  1654.         strokeColor: "white",
  1655.         strokeWeight: 4
  1656.     };
  1657.     var marker = new google.maps.Marker({
  1658.         position: new google.maps.LatLng(position[0], position[1]),
  1659.         draggable: false,
  1660.         icon: image,
  1661.         zIndex: 2
  1662.     });
  1663.     if (tooltip) {
  1664.         var style = {
  1665.             maxWidth: 350
  1666.         }
  1667.         var content = "";
  1668.         if (typeof tooltip == "object") {
  1669.             if (tooltip.style)
  1670.                 style = tooltip.style;
  1671.             if (tooltip.element)
  1672.                 content = tooltip.element;
  1673.         } else
  1674.             content = tooltip;
  1676.         var infowindow = new google.maps.InfoWindow(style);
  1678.         google.maps.event.addListener(marker, 'mouseover', function() {
  1679.             infowindow.setContent(content);
  1680.             infowindow.open(self.map_, marker);
  1681.         });
  1682.         google.maps.event.addListener(marker, 'mouseout', function(event) {
  1683.             infowindow.close();
  1684.         });
  1685.     }
  1686.     marker.dataMarker = data;
  1687.     marker.isFilter = data.isFilter;
  1688.     return marker;
  1689. }
  1694. /**
  1695.  * Extends an object's prototype by another's.
  1696.  *
  1697.  * @param {Object} obj1 The object to be extended.
  1698.  * @param {Object} obj2 The object to extend with.
  1699.  * @return {Object} The new extended object.
  1700.  * @ignore
  1701.  */
  1702. MarkerClusterer.prototype.extend = function(obj1, obj2) {
  1703.     return (function(object) {
  1704.         var property;
  1705.         for (property in object.prototype) {
  1706.             this.prototype[property] = object.prototype[property];
  1707.         }
  1708.         return this;
  1709.     }).apply(obj1, [obj2]);
  1710. };
  1713. /**
  1714.  * The default function for determining the label text and style
  1715.  * for a cluster icon.
  1716.  *
  1717.  * @param {Array.<google.maps.Marker>} markers The array of markers represented by the cluster.
  1718.  * @param {number} numStyles The number of marker styles available.
  1719.  * @return {ClusterIconInfo} The information resource for the cluster.
  1720.  * @constant
  1721.  * @ignore
  1722.  */
  1723. MarkerClusterer.CALCULATOR = function(markers, numStyles) {
  1724.     var index = 0;
  1725.     var title = "";
  1726.     var count = markers.length.toString();
  1728.     var dv = count;
  1729.     while (dv !== 0) {
  1730.         dv = parseInt(dv / 10, 10);
  1731.         index++;
  1732.     }
  1734.     index = Math.min(index, numStyles);
  1735.     return {
  1736.         text: count,
  1737.         index: index,
  1738.         title: title
  1739.     };
  1740. };
  1743. /**
  1744.  * The number of markers to process in one batch.
  1745.  *
  1746.  * @type {number}
  1747.  * @constant
  1748.  */
  1749. MarkerClusterer.BATCH_SIZE = 2000;
  1752. /**
  1753.  * The number of markers to process in one batch (IE only).
  1754.  *
  1755.  * @type {number}
  1756.  * @constant
  1757.  */
  1758. MarkerClusterer.BATCH_SIZE_IE = 500;
  1761. /**
  1762.  * The default root name for the marker cluster images.
  1763.  *
  1764.  * @type {string}
  1765.  * @constant
  1766.  */
  1767. MarkerClusterer.IMAGE_PATH = "//cdn.rawgit.com/mahnunchik/markerclustererplus/master/images/m";
  1770. /**
  1771.  * The default extension name for the marker cluster images.
  1772.  *
  1773.  * @type {string}
  1774.  * @constant
  1775.  */
  1776. MarkerClusterer.IMAGE_EXTENSION = "png";
  1779. /**
  1780.  * The default array of sizes for the marker cluster images.
  1781.  *
  1782.  * @type {Array.<number>}
  1783.  * @constant
  1784.  */
  1785. MarkerClusterer.IMAGE_SIZES = [53, 56, 66, 78, 90];
  1787. if (typeof String.prototype.trim !== 'function') {
  1788.     /**
  1789.      * IE hack since trim() doesn't exist in all browsers
  1790.      * @return {string} The string with removed whitespace
  1791.      */
  1792.     String.prototype.trim = function() {
  1793.         return this.replace(/^\s+|\s+$/g, '');
  1794.     };
  1795. }
  1796. window.MarkerClusterer = MarkerClusterer;
  1798. export default MarkerClusterer;