\n * An InfoBox behaves like a google.maps.InfoWindow, but it supports several\n * additional properties for advanced styling. An InfoBox can also be used as a map label.\n *
\n * An InfoBox also fires the same events as a google.maps.InfoWindow.\n */\n\n/*!\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/*jslint browser:true */\n/*global google */\n\n/**\n * @name InfoBoxOptions\n * @class This class represents the optional parameter passed to the {@link InfoBox} constructor.\n * @property {string|Node} content The content of the InfoBox (plain text or an HTML DOM node).\n * @property {boolean} [disableAutoPan=false] Disable auto-pan on open.\n * @property {number} maxWidth The maximum width (in pixels) of the InfoBox. Set to 0 if no maximum.\n * @property {Size} pixelOffset The offset (in pixels) from the top left corner of the InfoBox\n * (or the bottom left corner if the alignBottom
property is true
)\n * to the map pixel corresponding to position.\n * @property {LatLng} position The geographic location at which to display the InfoBox.\n * @property {number} zIndex The CSS z-index style value for the InfoBox.\n * Note: This value overrides a zIndex setting specified in the boxStyle property.\n * @property {string} [boxClass=\"infoBox\"] The name of the CSS class defining the styles for the InfoBox container.\n * @property {Object} [boxStyle] An object literal whose properties define specific CSS\n * style values to be applied to the InfoBox. Style values defined here override those that may\n * be defined in the boxClass
style sheet. If this property is changed after the\n * InfoBox has been created, all previously set styles (except those defined in the style sheet)\n * are removed from the InfoBox before the new style values are applied.\n * @property {string} closeBoxMargin The CSS margin style value for the close box.\n * The default is \"2px\" (a 2-pixel margin on all sides).\n * @property {string} closeBoxURL The URL of the image representing the close box.\n * Note: The default is the URL for Google's standard close box.\n * Set this property to \"\" if no close box is required.\n * @property {Size} infoBoxClearance Minimum offset (in pixels) from the InfoBox to the\n * map edge after an auto-pan.\n * @property {boolean} [isHidden=false] Hide the InfoBox on open.\n * [Deprecated in favor of the visible property.]\n * @property {boolean} [visible=true] Show the InfoBox on open.\n * @property {boolean} alignBottom Align the bottom left corner of the InfoBox to the position
\n * location (default is false which means that the top left corner of the InfoBox is aligned).\n * @property {string} pane The pane where the InfoBox is to appear (default is \"floatPane\").\n * Set the pane to \"mapPane\" if the InfoBox is being used as a map label.\n * Valid pane names are the property names for the google.maps.MapPanes object.\n * @property {boolean} enableEventPropagation Propagate mousedown, mousemove, mouseover, mouseout,\n * mouseup, click, dblclick, touchstart, touchend, touchmove, and contextmenu events in the InfoBox\n * (default is false to mimic the behavior of a google.maps.InfoWindow). Set\n * this property to true if the InfoBox is being used as a map label.\n */\n\n/**\n * Creates an InfoBox with the options specified in {@link InfoBoxOptions}.\n * Call InfoBox.open to add the box to the map.\n * @constructor\n * @param {InfoBoxOptions} [opt_opts]\n */\nfunction InfoBox(opt_opts) {\n\n opt_opts = opt_opts || {};\n\n google.maps.OverlayView.apply(this, arguments);\n\n // Standard options (in common with google.maps.InfoWindow):\n //\n this.content_ = opt_opts.content || \"\";\n this.disableAutoPan_ = opt_opts.disableAutoPan || false;\n this.maxWidth_ = opt_opts.maxWidth || 0;\n this.pixelOffset_ = opt_opts.pixelOffset || new google.maps.Size(0, 0);\n this.position_ = opt_opts.position || new google.maps.LatLng(0, 0);\n this.zIndex_ = opt_opts.zIndex || null;\n\n // Additional options (unique to InfoBox):\n //\n this.boxClass_ = opt_opts.boxClass || \"infoBox\";\n this.boxStyle_ = opt_opts.boxStyle || {};\n this.closeBoxMargin_ = opt_opts.closeBoxMargin || \"2px\";\n this.closeBoxURL_ = opt_opts.closeBoxURL || \"http://www.google.com/intl/en_us/mapfiles/close.gif\";\n if (opt_opts.closeBoxURL === \"\") {\n this.closeBoxURL_ = \"\";\n }\n this.infoBoxClearance_ = opt_opts.infoBoxClearance || new google.maps.Size(1, 1);\n\n if (typeof opt_opts.visible === \"undefined\") {\n if (typeof opt_opts.isHidden === \"undefined\") {\n opt_opts.visible = true;\n } else {\n opt_opts.visible = !opt_opts.isHidden;\n }\n }\n this.isHidden_ = !opt_opts.visible;\n\n this.alignBottom_ = opt_opts.alignBottom || false;\n this.pane_ = opt_opts.pane || \"floatPane\";\n this.enableEventPropagation_ = opt_opts.enableEventPropagation || false;\n\n this.div_ = null;\n this.closeListener_ = null;\n this.moveListener_ = null;\n this.contextListener_ = null;\n this.eventListeners_ = null;\n this.fixedWidthSet_ = null;\n}\n\n/* InfoBox extends OverlayView in the Google Maps API v3.\n */\nInfoBox.prototype = new google.maps.OverlayView();\n\n/**\n * Creates the DIV representing the InfoBox.\n * @private\n */\nInfoBox.prototype.createInfoBoxDiv_ = function () {\n\n var i;\n var events;\n var bw;\n var me = this;\n\n // This handler prevents an event in the InfoBox from being passed on to the map.\n //\n var cancelHandler = function (e) {\n e.cancelBubble = true;\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n };\n\n // This handler ignores the current event in the InfoBox and conditionally prevents\n // the event from being passed on to the map. It is used for the contextmenu event.\n //\n var ignoreHandler = function (e) {\n\n e.returnValue = false;\n\n if (e.preventDefault) {\n\n e.preventDefault();\n }\n\n if (!me.enableEventPropagation_) {\n\n cancelHandler(e);\n }\n };\n\n if (!this.div_) {\n\n this.div_ = document.createElement(\"div\");\n\n this.setBoxStyle_();\n\n if (typeof this.content_.nodeType === \"undefined\") {\n this.div_.innerHTML = this.getCloseBoxImg_() + this.content_;\n } else {\n this.div_.innerHTML = this.getCloseBoxImg_();\n this.div_.appendChild(this.content_);\n }\n\n // Add the InfoBox DIV to the DOM\n this.getPanes()[this.pane_].appendChild(this.div_);\n\n this.addClickHandler_();\n\n if (this.div_.style.width) {\n\n this.fixedWidthSet_ = true;\n\n } else {\n\n if (this.maxWidth_ !== 0 && this.div_.offsetWidth > this.maxWidth_) {\n\n this.div_.style.width = this.maxWidth_;\n this.div_.style.overflow = \"auto\";\n this.fixedWidthSet_ = true;\n\n } else { // The following code is needed to overcome problems with MSIE\n\n bw = this.getBoxWidths_();\n\n this.div_.style.width = (this.div_.offsetWidth - bw.left - bw.right) + \"px\";\n this.fixedWidthSet_ = false;\n }\n }\n\n this.panBox_(this.disableAutoPan_);\n\n if (!this.enableEventPropagation_) {\n\n this.eventListeners_ = [];\n\n // Cancel event propagation.\n //\n // Note: mousemove not included (to resolve Issue 152)\n events = [\"mousedown\", \"mouseover\", \"mouseout\", \"mouseup\",\n \"click\", \"dblclick\", \"touchstart\", \"touchend\", \"touchmove\"];\n\n for (i = 0; i < events.length; i++) {\n\n this.eventListeners_.push(google.maps.event.addDomListener(this.div_, events[i], cancelHandler));\n }\n \n // Workaround for Google bug that causes the cursor to change to a pointer\n // when the mouse moves over a marker underneath InfoBox.\n this.eventListeners_.push(google.maps.event.addDomListener(this.div_, \"mouseover\", function (e) {\n this.style.cursor = \"default\";\n }));\n }\n\n this.contextListener_ = google.maps.event.addDomListener(this.div_, \"contextmenu\", ignoreHandler);\n\n /**\n * This event is fired when the DIV containing the InfoBox's content is attached to the DOM.\n * @name InfoBox#domready\n * @event\n */\n google.maps.event.trigger(this, \"domready\");\n }\n};\n\n/**\n * Returns the HTML tag for the close box.\n * @private\n */\nInfoBox.prototype.getCloseBoxImg_ = function () {\n\n var img = \"\";\n\n if (this.closeBoxURL_ !== \"\") {\n\n img = \"\";\n }\n\n return img;\n};\n\n/**\n * Adds the click handler to the InfoBox close box.\n * @private\n */\nInfoBox.prototype.addClickHandler_ = function () {\n\n var closeBox;\n\n if (this.closeBoxURL_ !== \"\") {\n\n closeBox = this.div_.firstChild;\n this.closeListener_ = google.maps.event.addDomListener(closeBox, \"click\", this.getCloseClickHandler_());\n\n } else {\n\n this.closeListener_ = null;\n }\n};\n\n/**\n * Returns the function to call when the user clicks the close box of an InfoBox.\n * @private\n */\nInfoBox.prototype.getCloseClickHandler_ = function () {\n\n var me = this;\n\n return function (e) {\n\n // 1.0.3 fix: Always prevent propagation of a close box click to the map:\n e.cancelBubble = true;\n\n if (e.stopPropagation) {\n\n e.stopPropagation();\n }\n\n /**\n * This event is fired when the InfoBox's close box is clicked.\n * @name InfoBox#closeclick\n * @event\n */\n google.maps.event.trigger(me, \"closeclick\");\n\n me.close();\n };\n};\n\n/**\n * Pans the map so that the InfoBox appears entirely within the map's visible area.\n * @private\n */\nInfoBox.prototype.panBox_ = function (disablePan) {\n\n var map;\n var bounds;\n var xOffset = 0, yOffset = 0;\n\n if (!disablePan) {\n\n map = this.getMap();\n\n if (map instanceof google.maps.Map) { // Only pan if attached to map, not panorama\n\n if (!map.getBounds().contains(this.position_)) {\n // Marker not in visible area of map, so set center\n // of map to the marker position first.\n map.setCenter(this.position_);\n }\n\n bounds = map.getBounds();\n\n var mapDiv = map.getDiv();\n var mapWidth = mapDiv.offsetWidth;\n var mapHeight = mapDiv.offsetHeight;\n var iwOffsetX = this.pixelOffset_.width;\n var iwOffsetY = this.pixelOffset_.height;\n var iwWidth = this.div_.offsetWidth;\n var iwHeight = this.div_.offsetHeight;\n var padX = this.infoBoxClearance_.width;\n var padY = this.infoBoxClearance_.height;\n var pixPosition = this.getProjection().fromLatLngToContainerPixel(this.position_);\n\n if (pixPosition.x < (-iwOffsetX + padX)) {\n xOffset = pixPosition.x + iwOffsetX - padX;\n } else if ((pixPosition.x + iwWidth + iwOffsetX + padX) > mapWidth) {\n xOffset = pixPosition.x + iwWidth + iwOffsetX + padX - mapWidth;\n }\n if (this.alignBottom_) {\n if (pixPosition.y < (-iwOffsetY + padY + iwHeight)) {\n yOffset = pixPosition.y + iwOffsetY - padY - iwHeight;\n } else if ((pixPosition.y + iwOffsetY + padY) > mapHeight) {\n yOffset = pixPosition.y + iwOffsetY + padY - mapHeight;\n }\n } else {\n if (pixPosition.y < (-iwOffsetY + padY)) {\n yOffset = pixPosition.y + iwOffsetY - padY;\n } else if ((pixPosition.y + iwHeight + iwOffsetY + padY) > mapHeight) {\n yOffset = pixPosition.y + iwHeight + iwOffsetY + padY - mapHeight;\n }\n }\n\n if (!(xOffset === 0 && yOffset === 0)) {\n\n // Move the map to the shifted center.\n //\n var c = map.getCenter();\n map.panBy(xOffset, yOffset);\n }\n }\n }\n};\n\n/**\n * Sets the style of the InfoBox by setting the style sheet and applying\n * other specific styles requested.\n * @private\n */\nInfoBox.prototype.setBoxStyle_ = function () {\n\n var i, boxStyle;\n\n if (this.div_) {\n\n // Apply style values from the style sheet defined in the boxClass parameter:\n this.div_.className = this.boxClass_;\n\n // Clear existing inline style values:\n this.div_.style.cssText = \"\";\n\n // Apply style values defined in the boxStyle parameter:\n boxStyle = this.boxStyle_;\n for (i in boxStyle) {\n\n if (boxStyle.hasOwnProperty(i)) {\n\n this.div_.style[i] = boxStyle[i];\n }\n }\n\n // Fix for iOS disappearing InfoBox problem.\n // See http://stackoverflow.com/questions/9229535/google-maps-markers-disappear-at-certain-zoom-level-only-on-iphone-ipad\n this.div_.style.WebkitTransform = \"translateZ(0)\";\n\n // Fix up opacity style for benefit of MSIE:\n //\n if (typeof this.div_.style.opacity !== \"undefined\" && this.div_.style.opacity !== \"\") {\n // See http://www.quirksmode.org/css/opacity.html\n this.div_.style.MsFilter = \"\\\"progid:DXImageTransform.Microsoft.Alpha(Opacity=\" + (this.div_.style.opacity * 100) + \")\\\"\";\n this.div_.style.filter = \"alpha(opacity=\" + (this.div_.style.opacity * 100) + \")\";\n }\n\n // Apply required styles:\n //\n this.div_.style.position = \"absolute\";\n this.div_.style.visibility = 'hidden';\n if (this.zIndex_ !== null) {\n\n this.div_.style.zIndex = this.zIndex_;\n }\n }\n};\n\n/**\n * Get the widths of the borders of the InfoBox.\n * @private\n * @return {Object} widths object (top, bottom left, right)\n */\nInfoBox.prototype.getBoxWidths_ = function () {\n\n var computedStyle;\n var bw = {top: 0, bottom: 0, left: 0, right: 0};\n var box = this.div_;\n\n if (document.defaultView && document.defaultView.getComputedStyle) {\n\n computedStyle = box.ownerDocument.defaultView.getComputedStyle(box, \"\");\n\n if (computedStyle) {\n\n // The computed styles are always in pixel units (good!)\n bw.top = parseInt(computedStyle.borderTopWidth, 10) || 0;\n bw.bottom = parseInt(computedStyle.borderBottomWidth, 10) || 0;\n bw.left = parseInt(computedStyle.borderLeftWidth, 10) || 0;\n bw.right = parseInt(computedStyle.borderRightWidth, 10) || 0;\n }\n\n } else if (document.documentElement.currentStyle) { // MSIE\n\n if (box.currentStyle) {\n\n // The current styles may not be in pixel units, but assume they are (bad!)\n bw.top = parseInt(box.currentStyle.borderTopWidth, 10) || 0;\n bw.bottom = parseInt(box.currentStyle.borderBottomWidth, 10) || 0;\n bw.left = parseInt(box.currentStyle.borderLeftWidth, 10) || 0;\n bw.right = parseInt(box.currentStyle.borderRightWidth, 10) || 0;\n }\n }\n\n return bw;\n};\n\n/**\n * Invoked when close is called. Do not call it directly.\n */\nInfoBox.prototype.onRemove = function () {\n\n if (this.div_) {\n\n this.div_.parentNode.removeChild(this.div_);\n this.div_ = null;\n }\n};\n\n/**\n * Draws the InfoBox based on the current map projection and zoom level.\n */\nInfoBox.prototype.draw = function () {\n\n this.createInfoBoxDiv_();\n\n var pixPosition = this.getProjection().fromLatLngToDivPixel(this.position_);\n\n this.div_.style.left = (pixPosition.x + this.pixelOffset_.width) + \"px\";\n \n if (this.alignBottom_) {\n this.div_.style.bottom = -(pixPosition.y + this.pixelOffset_.height) + \"px\";\n } else {\n this.div_.style.top = (pixPosition.y + this.pixelOffset_.height) + \"px\";\n }\n\n if (this.isHidden_) {\n\n this.div_.style.visibility = \"hidden\";\n\n } else {\n\n this.div_.style.visibility = \"visible\";\n }\n};\n\n/**\n * Sets the options for the InfoBox. Note that changes to the maxWidth,\n * closeBoxMargin, closeBoxURL, and enableEventPropagation\n * properties have no affect until the current InfoBox is closed and a new one\n * is opened.\n * @param {InfoBoxOptions} opt_opts\n */\nInfoBox.prototype.setOptions = function (opt_opts) {\n if (typeof opt_opts.boxClass !== \"undefined\") { // Must be first\n\n this.boxClass_ = opt_opts.boxClass;\n this.setBoxStyle_();\n }\n if (typeof opt_opts.boxStyle !== \"undefined\") { // Must be second\n\n this.boxStyle_ = opt_opts.boxStyle;\n this.setBoxStyle_();\n }\n if (typeof opt_opts.content !== \"undefined\") {\n\n this.setContent(opt_opts.content);\n }\n if (typeof opt_opts.disableAutoPan !== \"undefined\") {\n\n this.disableAutoPan_ = opt_opts.disableAutoPan;\n }\n if (typeof opt_opts.maxWidth !== \"undefined\") {\n\n this.maxWidth_ = opt_opts.maxWidth;\n }\n if (typeof opt_opts.pixelOffset !== \"undefined\") {\n\n this.pixelOffset_ = opt_opts.pixelOffset;\n }\n if (typeof opt_opts.alignBottom !== \"undefined\") {\n\n this.alignBottom_ = opt_opts.alignBottom;\n }\n if (typeof opt_opts.position !== \"undefined\") {\n\n this.setPosition(opt_opts.position);\n }\n if (typeof opt_opts.zIndex !== \"undefined\") {\n\n this.setZIndex(opt_opts.zIndex);\n }\n if (typeof opt_opts.closeBoxMargin !== \"undefined\") {\n\n this.closeBoxMargin_ = opt_opts.closeBoxMargin;\n }\n if (typeof opt_opts.closeBoxURL !== \"undefined\") {\n\n this.closeBoxURL_ = opt_opts.closeBoxURL;\n }\n if (typeof opt_opts.infoBoxClearance !== \"undefined\") {\n\n this.infoBoxClearance_ = opt_opts.infoBoxClearance;\n }\n if (typeof opt_opts.isHidden !== \"undefined\") {\n\n this.isHidden_ = opt_opts.isHidden;\n }\n if (typeof opt_opts.visible !== \"undefined\") {\n\n this.isHidden_ = !opt_opts.visible;\n }\n if (typeof opt_opts.enableEventPropagation !== \"undefined\") {\n\n this.enableEventPropagation_ = opt_opts.enableEventPropagation;\n }\n\n if (this.div_) {\n\n this.draw();\n }\n};\n\n/**\n * Sets the content of the InfoBox.\n * The content can be plain text or an HTML DOM node.\n * @param {string|Node} content\n */\nInfoBox.prototype.setContent = function (content) {\n this.content_ = content;\n\n if (this.div_) {\n\n if (this.closeListener_) {\n\n google.maps.event.removeListener(this.closeListener_);\n this.closeListener_ = null;\n }\n\n // Odd code required to make things work with MSIE.\n //\n if (!this.fixedWidthSet_) {\n\n this.div_.style.width = \"\";\n }\n\n if (typeof content.nodeType === \"undefined\") {\n this.div_.innerHTML = this.getCloseBoxImg_() + content;\n } else {\n this.div_.innerHTML = this.getCloseBoxImg_();\n this.div_.appendChild(content);\n }\n\n // Perverse code required to make things work with MSIE.\n // (Ensures the close box does, in fact, float to the right.)\n //\n if (!this.fixedWidthSet_) {\n this.div_.style.width = this.div_.offsetWidth + \"px\";\n if (typeof content.nodeType === \"undefined\") {\n this.div_.innerHTML = this.getCloseBoxImg_() + content;\n } else {\n this.div_.innerHTML = this.getCloseBoxImg_();\n this.div_.appendChild(content);\n }\n }\n\n this.addClickHandler_();\n }\n\n /**\n * This event is fired when the content of the InfoBox changes.\n * @name InfoBox#content_changed\n * @event\n */\n google.maps.event.trigger(this, \"content_changed\");\n};\n\n/**\n * Sets the geographic location of the InfoBox.\n * @param {LatLng} latlng\n */\nInfoBox.prototype.setPosition = function (latlng) {\n\n this.position_ = latlng;\n\n if (this.div_) {\n\n this.draw();\n }\n\n /**\n * This event is fired when the position of the InfoBox changes.\n * @name InfoBox#position_changed\n * @event\n */\n google.maps.event.trigger(this, \"position_changed\");\n};\n\n/**\n * Sets the zIndex style for the InfoBox.\n * @param {number} index\n */\nInfoBox.prototype.setZIndex = function (index) {\n\n this.zIndex_ = index;\n\n if (this.div_) {\n\n this.div_.style.zIndex = index;\n }\n\n /**\n * This event is fired when the zIndex of the InfoBox changes.\n * @name InfoBox#zindex_changed\n * @event\n */\n google.maps.event.trigger(this, \"zindex_changed\");\n};\n\n/**\n * Sets the visibility of the InfoBox.\n * @param {boolean} isVisible\n */\nInfoBox.prototype.setVisible = function (isVisible) {\n\n this.isHidden_ = !isVisible;\n if (this.div_) {\n this.div_.style.visibility = (this.isHidden_ ? \"hidden\" : \"visible\");\n }\n};\n\n/**\n * Returns the content of the InfoBox.\n * @returns {string}\n */\nInfoBox.prototype.getContent = function () {\n\n return this.content_;\n};\n\n/**\n * Returns the geographic location of the InfoBox.\n * @returns {LatLng}\n */\nInfoBox.prototype.getPosition = function () {\n\n return this.position_;\n};\n\n/**\n * Returns the zIndex for the InfoBox.\n * @returns {number}\n */\nInfoBox.prototype.getZIndex = function () {\n\n return this.zIndex_;\n};\n\n/**\n * Returns a flag indicating whether the InfoBox is visible.\n * @returns {boolean}\n */\nInfoBox.prototype.getVisible = function () {\n\n var isVisible;\n\n if ((typeof this.getMap() === \"undefined\") || (this.getMap() === null)) {\n isVisible = false;\n } else {\n isVisible = !this.isHidden_;\n }\n return isVisible;\n};\n\n/**\n * Shows the InfoBox. [Deprecated; use setVisible instead.]\n */\nInfoBox.prototype.show = function () {\n\n this.isHidden_ = false;\n if (this.div_) {\n this.div_.style.visibility = \"visible\";\n }\n};\n\n/**\n * Hides the InfoBox. [Deprecated; use setVisible instead.]\n */\nInfoBox.prototype.hide = function () {\n\n this.isHidden_ = true;\n if (this.div_) {\n this.div_.style.visibility = \"hidden\";\n }\n};\n\n/**\n * Adds the InfoBox to the specified map or Street View panorama. If anchor\n * (usually a google.maps.Marker) is specified, the position\n * of the InfoBox is set to the position of the anchor. If the\n * anchor is dragged to a new location, the InfoBox moves as well.\n * @param {Map|StreetViewPanorama} map\n * @param {MVCObject} [anchor]\n */\nInfoBox.prototype.open = function (map, anchor) {\n\n var me = this;\n\n if (anchor) {\n\n this.position_ = anchor.getPosition();\n this.moveListener_ = google.maps.event.addListener(anchor, \"position_changed\", function () {\n me.setPosition(this.getPosition());\n });\n }\n\n this.setMap(map);\n\n if (this.div_) {\n\n this.panBox_();\n }\n};\n\n/**\n * Removes the InfoBox from the map.\n */\nInfoBox.prototype.close = function () {\n\n var i;\n\n if (this.closeListener_) {\n\n google.maps.event.removeListener(this.closeListener_);\n this.closeListener_ = null;\n }\n\n if (this.eventListeners_) {\n \n for (i = 0; i < this.eventListeners_.length; i++) {\n\n google.maps.event.removeListener(this.eventListeners_[i]);\n }\n this.eventListeners_ = null;\n }\n\n if (this.moveListener_) {\n\n google.maps.event.removeListener(this.moveListener_);\n this.moveListener_ = null;\n }\n\n if (this.contextListener_) {\n\n google.maps.event.removeListener(this.contextListener_);\n this.contextListener_ = null;\n }\n\n this.setMap(null);\n};\n\n/**\n * @name KeyDragZoom for V3\n * @version 2.0.9 [December 17, 2012] NOT YET RELEASED\n * @author: Nianwei Liu [nianwei at gmail dot com] & Gary Little [gary at luxcentral dot com]\n * @fileoverview This library adds a drag zoom capability to a V3 Google map.\n * When drag zoom is enabled, holding down a designated hot key (shift | ctrl | alt)
\n * while dragging a box around an area of interest will zoom the map in to that area when\n * the mouse button is released. Optionally, a visual control can also be supplied for turning\n * a drag zoom operation on and off.\n * Only one line of code is needed: google.maps.Map.enableKeyDragZoom();
\n *
\n * NOTE: Do not use Ctrl as the hot key with Google Maps JavaScript API V3 since, unlike with V2,\n * it causes a context menu to appear when running on the Macintosh.\n *
\n * Note that if the map's container has a border around it, the border widths must be specified\n * in pixel units (or as thin, medium, or thick). This is required because of an MSIE limitation.\n *
NL: 2009-05-28: initial port to core API V3.\n *
NL: 2009-11-02: added a temp fix for -moz-transform for FF3.5.x using code from Paul Kulchenko (http://notebook.kulchenko.com/maps/gridmove).\n *
NL: 2010-02-02: added a fix for IE flickering on divs onmousemove, caused by scroll value when get mouse position.\n *
GL: 2010-06-15: added a visual control option.\n */\n/*!\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n(function () {\n /*jslint browser:true */\n /*global window,google */\n /* Utility functions use \"var funName=function()\" syntax to allow use of the */\n /* Dean Edwards Packer compression tool (with Shrink variables, without Base62 encode). */\n\n /**\n * Converts \"thin\", \"medium\", and \"thick\" to pixel widths\n * in an MSIE environment. Not called for other browsers\n * because getComputedStyle() returns pixel widths automatically.\n * @param {string} widthValue The value of the border width parameter.\n */\n var toPixels = function (widthValue) {\n var px;\n switch (widthValue) {\n case \"thin\":\n px = \"2px\";\n break;\n case \"medium\":\n px = \"4px\";\n break;\n case \"thick\":\n px = \"6px\";\n break;\n default:\n px = widthValue;\n }\n return px;\n };\n /**\n * Get the widths of the borders of an HTML element.\n *\n * @param {Node} h The HTML element.\n * @return {Object} The width object {top, bottom left, right}.\n */\n var getBorderWidths = function (h) {\n var computedStyle;\n var bw = {};\n if (document.defaultView && document.defaultView.getComputedStyle) {\n computedStyle = h.ownerDocument.defaultView.getComputedStyle(h, \"\");\n if (computedStyle) {\n // The computed styles are always in pixel units (good!)\n bw.top = parseInt(computedStyle.borderTopWidth, 10) || 0;\n bw.bottom = parseInt(computedStyle.borderBottomWidth, 10) || 0;\n bw.left = parseInt(computedStyle.borderLeftWidth, 10) || 0;\n bw.right = parseInt(computedStyle.borderRightWidth, 10) || 0;\n return bw;\n }\n } else if (document.documentElement.currentStyle) { // MSIE\n if (h.currentStyle) {\n // The current styles may not be in pixel units so try to convert (bad!)\n bw.top = parseInt(toPixels(h.currentStyle.borderTopWidth), 10) || 0;\n bw.bottom = parseInt(toPixels(h.currentStyle.borderBottomWidth), 10) || 0;\n bw.left = parseInt(toPixels(h.currentStyle.borderLeftWidth), 10) || 0;\n bw.right = parseInt(toPixels(h.currentStyle.borderRightWidth), 10) || 0;\n return bw;\n }\n }\n // Shouldn't get this far for any modern browser\n bw.top = parseInt(h.style[\"border-top-width\"], 10) || 0;\n bw.bottom = parseInt(h.style[\"border-bottom-width\"], 10) || 0;\n bw.left = parseInt(h.style[\"border-left-width\"], 10) || 0;\n bw.right = parseInt(h.style[\"border-right-width\"], 10) || 0;\n return bw;\n };\n\n // Page scroll values for use by getMousePosition. To prevent flickering on MSIE\n // they are calculated only when the document actually scrolls, not every time the\n // mouse moves (as they would be if they were calculated inside getMousePosition).\n var scroll = {\n x: 0,\n y: 0\n };\n var getScrollValue = function (e) {\n scroll.x = (typeof document.documentElement.scrollLeft !== \"undefined\" ? document.documentElement.scrollLeft : document.body.scrollLeft);\n scroll.y = (typeof document.documentElement.scrollTop !== \"undefined\" ? document.documentElement.scrollTop : document.body.scrollTop);\n };\n getScrollValue();\n\n /**\n * Get the position of the mouse relative to the document.\n * @param {Event} e The mouse event.\n * @return {Object} The position object {left, top}.\n */\n var getMousePosition = function (e) {\n var posX = 0, posY = 0;\n e = e || window.event;\n if (typeof e.pageX !== \"undefined\") {\n posX = e.pageX;\n posY = e.pageY;\n } else if (typeof e.clientX !== \"undefined\") { // MSIE\n posX = e.clientX + scroll.x;\n posY = e.clientY + scroll.y;\n }\n return {\n left: posX,\n top: posY\n };\n };\n /**\n * Get the position of an HTML element relative to the document.\n * @param {Node} h The HTML element.\n * @return {Object} The position object {left, top}.\n */\n var getElementPosition = function (h) {\n var posX = h.offsetLeft;\n var posY = h.offsetTop;\n var parent = h.offsetParent;\n // Add offsets for all ancestors in the hierarchy\n while (parent !== null) {\n // Adjust for scrolling elements which may affect the map position.\n //\n // See http://www.howtocreate.co.uk/tutorials/javascript/browserspecific\n //\n // \"...make sure that every element [on a Web page] with an overflow\n // of anything other than visible also has a position style set to\n // something other than the default static...\"\n if (parent !== document.body && parent !== document.documentElement) {\n posX -= parent.scrollLeft;\n posY -= parent.scrollTop;\n }\n // See http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/4cb86c0c1037a5e5\n // Example: http://notebook.kulchenko.com/maps/gridmove\n var m = parent;\n // This is the \"normal\" way to get offset information:\n var moffx = m.offsetLeft;\n var moffy = m.offsetTop;\n // This covers those cases where a transform is used:\n if (!moffx && !moffy && window.getComputedStyle) {\n var matrix = document.defaultView.getComputedStyle(m, null).MozTransform ||\n document.defaultView.getComputedStyle(m, null).WebkitTransform;\n if (matrix) {\n if (typeof matrix === \"string\") {\n var parms = matrix.split(\",\");\n moffx += parseInt(parms[4], 10) || 0;\n moffy += parseInt(parms[5], 10) || 0;\n }\n }\n }\n posX += moffx;\n posY += moffy;\n parent = parent.offsetParent;\n }\n return {\n left: posX,\n top: posY\n };\n };\n /**\n * Set the properties of an object to those from another object.\n * @param {Object} obj The target object.\n * @param {Object} vals The source object.\n */\n var setVals = function (obj, vals) {\n if (obj && vals) {\n for (var x in vals) {\n if (vals.hasOwnProperty(x)) {\n obj[x] = vals[x];\n }\n }\n }\n return obj;\n };\n /**\n * Set the opacity. If op is not passed in, this function just performs an MSIE fix.\n * @param {Node} h The HTML element.\n * @param {number} op The opacity value (0-1).\n */\n var setOpacity = function (h, op) {\n if (typeof op !== \"undefined\") {\n h.style.opacity = op;\n }\n if (typeof h.style.opacity !== \"undefined\" && h.style.opacity !== \"\") {\n h.style.filter = \"alpha(opacity=\" + (h.style.opacity * 100) + \")\";\n }\n };\n /**\n * @name KeyDragZoomOptions\n * @class This class represents the optional parameter passed into google.maps.Map.enableKeyDragZoom
.\n * @property {string} [key=\"shift\"] The hot key to hold down to activate a drag zoom, shift | ctrl | alt
.\n * NOTE: Do not use Ctrl as the hot key with Google Maps JavaScript API V3 since, unlike with V2,\n * it causes a context menu to appear when running on the Macintosh. Also note that the\n * alt
hot key refers to the Option key on a Macintosh.\n * @property {Object} [boxStyle={border: \"4px solid #736AFF\"}]\n * An object literal defining the CSS styles of the zoom box.\n * Border widths must be specified in pixel units (or as thin, medium, or thick).\n * @property {Object} [veilStyle={backgroundColor: \"gray\", opacity: 0.25, cursor: \"crosshair\"}]\n * An object literal defining the CSS styles of the veil pane which covers the map when a drag\n * zoom is activated. The previous name for this property was paneStyle
but the use\n * of this name is now deprecated.\n * @property {boolean} [noZoom=false] A flag indicating whether to disable zooming after an area is\n * selected. Set this to true
to allow KeyDragZoom to be used as a simple area\n * selection tool.\n * @property {boolean} [visualEnabled=false] A flag indicating whether a visual control is to be used.\n * @property {string} [visualClass=\"\"] The name of the CSS class defining the styles for the visual\n * control. To prevent the visual control from being printed, set this property to the name of\n * a class, defined inside a @media print
rule, which sets the CSS\n * display
style to none
.\n * @property {ControlPosition} [visualPosition=google.maps.ControlPosition.LEFT_TOP]\n * The position of the visual control.\n * @property {Size} [visualPositionOffset=google.maps.Size(35, 0)] The width and height values\n * provided by this property are the offsets (in pixels) from the location at which the control\n * would normally be drawn to the desired drawing location.\n * @property {number} [visualPositionIndex=null] The index of the visual control.\n * The index is for controlling the placement of the control relative to other controls at the\n * position given by visualPosition
; controls with a lower index are placed first.\n * Use a negative value to place the control before any default controls. No index is\n * generally required.\n * @property {String} [visualSprite=\"http://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png\"]\n * The URL of the sprite image used for showing the visual control in the on, off, and hot\n * (i.e., when the mouse is over the control) states. The three images within the sprite must\n * be the same size and arranged in on-hot-off order in a single row with no spaces between images.\n * @property {Size} [visualSize=google.maps.Size(20, 20)] The width and height values provided by\n * this property are the size (in pixels) of each of the images within visualSprite
.\n * @property {Object} [visualTips={off: \"Turn on drag zoom mode\", on: \"Turn off drag zoom mode\"}]\n * An object literal defining the help tips that appear when\n * the mouse moves over the visual control. The off
property is the tip to be shown\n * when the control is off and the on
property is the tip to be shown when the\n * control is on.\n */\n /**\n * @name DragZoom\n * @class This class represents a drag zoom object for a map. The object is activated by holding down the hot key\n * or by turning on the visual control.\n * This object is created when google.maps.Map.enableKeyDragZoom
is called; it cannot be created directly.\n * Use google.maps.Map.getDragZoomObject
to gain access to this object in order to attach event listeners.\n * @param {Map} map The map to which the DragZoom object is to be attached.\n * @param {KeyDragZoomOptions} [opt_zoomOpts] The optional parameters.\n */\n function DragZoom(map, opt_zoomOpts) {\n var me = this;\n var ov = new google.maps.OverlayView();\n ov.onAdd = function () {\n me.init_(map, opt_zoomOpts);\n };\n ov.draw = function () {\n };\n ov.onRemove = function () {\n };\n ov.setMap(map);\n this.prjov_ = ov;\n }\n /**\n * Initialize the tool.\n * @param {Map} map The map to which the DragZoom object is to be attached.\n * @param {KeyDragZoomOptions} [opt_zoomOpts] The optional parameters.\n */\n DragZoom.prototype.init_ = function (map, opt_zoomOpts) {\n var i;\n var me = this;\n this.map_ = map;\n opt_zoomOpts = opt_zoomOpts || {};\n this.key_ = opt_zoomOpts.key || \"shift\";\n this.key_ = this.key_.toLowerCase();\n this.borderWidths_ = getBorderWidths(this.map_.getDiv());\n this.veilDiv_ = [];\n for (i = 0; i < 4; i++) {\n this.veilDiv_[i] = document.createElement(\"div\");\n // Prevents selection of other elements on the webpage\n // when a drag zoom operation is in progress:\n this.veilDiv_[i].onselectstart = function () {\n return false;\n };\n // Apply default style values for the veil:\n setVals(this.veilDiv_[i].style, {\n backgroundColor: \"gray\",\n opacity: 0.25,\n cursor: \"crosshair\"\n });\n // Apply style values specified in veilStyle parameter:\n setVals(this.veilDiv_[i].style, opt_zoomOpts.paneStyle); // Old option name was \"paneStyle\"\n setVals(this.veilDiv_[i].style, opt_zoomOpts.veilStyle); // New name is \"veilStyle\"\n // Apply mandatory style values:\n setVals(this.veilDiv_[i].style, {\n position: \"absolute\",\n overflow: \"hidden\",\n display: \"none\"\n });\n // Workaround for Firefox Shift-Click problem:\n if (this.key_ === \"shift\") {\n this.veilDiv_[i].style.MozUserSelect = \"none\";\n }\n setOpacity(this.veilDiv_[i]);\n // An IE fix: If the background is transparent it cannot capture mousedown\n // events, so if it is, change the background to white with 0 opacity.\n if (this.veilDiv_[i].style.backgroundColor === \"transparent\") {\n this.veilDiv_[i].style.backgroundColor = \"white\";\n setOpacity(this.veilDiv_[i], 0);\n }\n this.map_.getDiv().appendChild(this.veilDiv_[i]);\n }\n\n this.noZoom_ = opt_zoomOpts.noZoom || false;\n this.visualEnabled_ = opt_zoomOpts.visualEnabled || false;\n this.visualClass_ = opt_zoomOpts.visualClass || \"\";\n this.visualPosition_ = opt_zoomOpts.visualPosition || google.maps.ControlPosition.LEFT_TOP;\n this.visualPositionOffset_ = opt_zoomOpts.visualPositionOffset || new google.maps.Size(35, 0);\n this.visualPositionIndex_ = opt_zoomOpts.visualPositionIndex || null;\n this.visualSprite_ = opt_zoomOpts.visualSprite || \"http\" + (document.location.protocol === \"https:\" ? \"s\" : \"\") + \"://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png\";\n this.visualSize_ = opt_zoomOpts.visualSize || new google.maps.Size(20, 20);\n this.visualTips_ = opt_zoomOpts.visualTips || {};\n this.visualTips_.off = this.visualTips_.off || \"Turn on drag zoom mode\";\n this.visualTips_.on = this.visualTips_.on || \"Turn off drag zoom mode\";\n\n this.boxDiv_ = document.createElement(\"div\");\n // Apply default style values for the zoom box:\n setVals(this.boxDiv_.style, {\n border: \"4px solid #736AFF\"\n });\n // Apply style values specified in boxStyle parameter:\n setVals(this.boxDiv_.style, opt_zoomOpts.boxStyle);\n // Apply mandatory style values:\n setVals(this.boxDiv_.style, {\n position: \"absolute\",\n display: \"none\"\n });\n setOpacity(this.boxDiv_);\n this.map_.getDiv().appendChild(this.boxDiv_);\n this.boxBorderWidths_ = getBorderWidths(this.boxDiv_);\n\n this.listeners_ = [\n google.maps.event.addDomListener(document, \"keydown\", function (e) {\n me.onKeyDown_(e);\n }),\n google.maps.event.addDomListener(document, \"keyup\", function (e) {\n me.onKeyUp_(e);\n }),\n google.maps.event.addDomListener(this.veilDiv_[0], \"mousedown\", function (e) {\n me.onMouseDown_(e);\n }),\n google.maps.event.addDomListener(this.veilDiv_[1], \"mousedown\", function (e) {\n me.onMouseDown_(e);\n }),\n google.maps.event.addDomListener(this.veilDiv_[2], \"mousedown\", function (e) {\n me.onMouseDown_(e);\n }),\n google.maps.event.addDomListener(this.veilDiv_[3], \"mousedown\", function (e) {\n me.onMouseDown_(e);\n }),\n google.maps.event.addDomListener(document, \"mousedown\", function (e) {\n me.onMouseDownDocument_(e);\n }),\n google.maps.event.addDomListener(document, \"mousemove\", function (e) {\n me.onMouseMove_(e);\n }),\n google.maps.event.addDomListener(document, \"mouseup\", function (e) {\n me.onMouseUp_(e);\n }),\n google.maps.event.addDomListener(window, \"scroll\", getScrollValue)\n ];\n\n this.hotKeyDown_ = false;\n this.mouseDown_ = false;\n this.dragging_ = false;\n this.startPt_ = null;\n this.endPt_ = null;\n this.mapWidth_ = null;\n this.mapHeight_ = null;\n this.mousePosn_ = null;\n this.mapPosn_ = null;\n\n if (this.visualEnabled_) {\n this.buttonDiv_ = this.initControl_(this.visualPositionOffset_);\n if (this.visualPositionIndex_ !== null) {\n this.buttonDiv_.index = this.visualPositionIndex_;\n }\n this.map_.controls[this.visualPosition_].push(this.buttonDiv_);\n this.controlIndex_ = this.map_.controls[this.visualPosition_].length - 1;\n }\n };\n /**\n * Initializes the visual control and returns its DOM element.\n * @param {Size} offset The offset of the control from its normal position.\n * @return {Node} The DOM element containing the visual control.\n */\n DragZoom.prototype.initControl_ = function (offset) {\n var control;\n var image;\n var me = this;\n \n control = document.createElement(\"div\");\n control.className = this.visualClass_;\n control.style.position = \"relative\";\n control.style.overflow = \"hidden\";\n control.style.height = this.visualSize_.height + \"px\";\n control.style.width = this.visualSize_.width + \"px\";\n control.title = this.visualTips_.off;\n image = document.createElement(\"img\");\n image.src = this.visualSprite_;\n image.style.position = \"absolute\";\n image.style.left = -(this.visualSize_.width * 2) + \"px\";\n image.style.top = 0 + \"px\";\n control.appendChild(image);\n control.onclick = function (e) {\n me.hotKeyDown_ = !me.hotKeyDown_;\n if (me.hotKeyDown_) {\n me.buttonDiv_.firstChild.style.left = -(me.visualSize_.width * 0) + \"px\";\n me.buttonDiv_.title = me.visualTips_.on;\n me.activatedByControl_ = true;\n google.maps.event.trigger(me, \"activate\");\n } else {\n me.buttonDiv_.firstChild.style.left = -(me.visualSize_.width * 2) + \"px\";\n me.buttonDiv_.title = me.visualTips_.off;\n google.maps.event.trigger(me, \"deactivate\");\n }\n me.onMouseMove_(e); // Updates the veil\n };\n control.onmouseover = function () {\n me.buttonDiv_.firstChild.style.left = -(me.visualSize_.width * 1) + \"px\";\n };\n control.onmouseout = function () {\n if (me.hotKeyDown_) {\n me.buttonDiv_.firstChild.style.left = -(me.visualSize_.width * 0) + \"px\";\n me.buttonDiv_.title = me.visualTips_.on;\n } else {\n me.buttonDiv_.firstChild.style.left = -(me.visualSize_.width * 2) + \"px\";\n me.buttonDiv_.title = me.visualTips_.off;\n }\n };\n control.ondragstart = function () {\n return false;\n };\n setVals(control.style, {\n cursor: \"pointer\",\n marginTop: offset.height + \"px\",\n marginLeft: offset.width + \"px\"\n });\n return control;\n };\n /**\n * Returns true
if the hot key is being pressed when an event occurs.\n * @param {Event} e The keyboard event.\n * @return {boolean} Flag indicating whether the hot key is down.\n */\n DragZoom.prototype.isHotKeyDown_ = function (e) {\n var isHot;\n e = e || window.event;\n isHot = (e.shiftKey && this.key_ === \"shift\") || (e.altKey && this.key_ === \"alt\") || (e.ctrlKey && this.key_ === \"ctrl\");\n if (!isHot) {\n // Need to look at keyCode for Opera because it\n // doesn't set the shiftKey, altKey, ctrlKey properties\n // unless a non-modifier event is being reported.\n //\n // See http://cross-browser.com/x/examples/shift_mode.php\n // Also see http://unixpapa.com/js/key.html\n switch (e.keyCode) {\n case 16:\n if (this.key_ === \"shift\") {\n isHot = true;\n }\n break;\n case 17:\n if (this.key_ === \"ctrl\") {\n isHot = true;\n }\n break;\n case 18:\n if (this.key_ === \"alt\") {\n isHot = true;\n }\n break;\n }\n }\n return isHot;\n };\n /**\n * Returns true
if the mouse is on top of the map div.\n * The position is captured in onMouseMove_.\n * @return {boolean}\n */\n DragZoom.prototype.isMouseOnMap_ = function () {\n var mousePosn = this.mousePosn_;\n if (mousePosn) {\n var mapPosn = this.mapPosn_;\n var mapDiv = this.map_.getDiv();\n return mousePosn.left > mapPosn.left && mousePosn.left < (mapPosn.left + mapDiv.offsetWidth) &&\n mousePosn.top > mapPosn.top && mousePosn.top < (mapPosn.top + mapDiv.offsetHeight);\n } else {\n // if user never moved mouse\n return false;\n }\n };\n /**\n * Show the veil if the hot key is down and the mouse is over the map,\n * otherwise hide the veil.\n */\n DragZoom.prototype.setVeilVisibility_ = function () {\n var i;\n if (this.map_ && this.hotKeyDown_ && this.isMouseOnMap_()) {\n var mapDiv = this.map_.getDiv();\n this.mapWidth_ = mapDiv.offsetWidth - (this.borderWidths_.left + this.borderWidths_.right);\n this.mapHeight_ = mapDiv.offsetHeight - (this.borderWidths_.top + this.borderWidths_.bottom);\n if (this.activatedByControl_) { // Veil covers entire map (except control)\n var left = parseInt(this.buttonDiv_.style.left, 10) + this.visualPositionOffset_.width;\n var top = parseInt(this.buttonDiv_.style.top, 10) + this.visualPositionOffset_.height;\n var width = this.visualSize_.width;\n var height = this.visualSize_.height;\n // Left veil rectangle:\n this.veilDiv_[0].style.top = \"0px\";\n this.veilDiv_[0].style.left = \"0px\";\n this.veilDiv_[0].style.width = left + \"px\";\n this.veilDiv_[0].style.height = this.mapHeight_ + \"px\";\n // Right veil rectangle:\n this.veilDiv_[1].style.top = \"0px\";\n this.veilDiv_[1].style.left = (left + width) + \"px\";\n this.veilDiv_[1].style.width = (this.mapWidth_ - (left + width)) + \"px\";\n this.veilDiv_[1].style.height = this.mapHeight_ + \"px\";\n // Top veil rectangle:\n this.veilDiv_[2].style.top = \"0px\";\n this.veilDiv_[2].style.left = left + \"px\";\n this.veilDiv_[2].style.width = width + \"px\";\n this.veilDiv_[2].style.height = top + \"px\";\n // Bottom veil rectangle:\n this.veilDiv_[3].style.top = (top + height) + \"px\";\n this.veilDiv_[3].style.left = left + \"px\";\n this.veilDiv_[3].style.width = width + \"px\";\n this.veilDiv_[3].style.height = (this.mapHeight_ - (top + height)) + \"px\";\n for (i = 0; i < this.veilDiv_.length; i++) {\n this.veilDiv_[i].style.display = \"block\";\n }\n } else {\n this.veilDiv_[0].style.left = \"0px\";\n this.veilDiv_[0].style.top = \"0px\";\n this.veilDiv_[0].style.width = this.mapWidth_ + \"px\";\n this.veilDiv_[0].style.height = this.mapHeight_ + \"px\";\n for (i = 1; i < this.veilDiv_.length; i++) {\n this.veilDiv_[i].style.width = \"0px\";\n this.veilDiv_[i].style.height = \"0px\";\n }\n for (i = 0; i < this.veilDiv_.length; i++) {\n this.veilDiv_[i].style.display = \"block\";\n }\n }\n } else {\n for (i = 0; i < this.veilDiv_.length; i++) {\n this.veilDiv_[i].style.display = \"none\";\n }\n }\n };\n /**\n * Handle key down. Show the veil if the hot key has been pressed.\n * @param {Event} e The keyboard event.\n */\n DragZoom.prototype.onKeyDown_ = function (e) {\n if (this.map_ && !this.hotKeyDown_ && this.isHotKeyDown_(e)) {\n this.mapPosn_ = getElementPosition(this.map_.getDiv());\n this.hotKeyDown_ = true;\n this.activatedByControl_ = false;\n this.setVeilVisibility_();\n /**\n * This event is fired when the hot key is pressed.\n * @name DragZoom#activate\n * @event\n */\n google.maps.event.trigger(this, \"activate\");\n }\n };\n /**\n * Get the google.maps.Point
of the mouse position.\n * @param {Event} e The mouse event.\n * @return {Point} The mouse position.\n */\n DragZoom.prototype.getMousePoint_ = function (e) {\n var mousePosn = getMousePosition(e);\n var p = new google.maps.Point();\n p.x = mousePosn.left - this.mapPosn_.left - this.borderWidths_.left;\n p.y = mousePosn.top - this.mapPosn_.top - this.borderWidths_.top;\n p.x = Math.min(p.x, this.mapWidth_);\n p.y = Math.min(p.y, this.mapHeight_);\n p.x = Math.max(p.x, 0);\n p.y = Math.max(p.y, 0);\n return p;\n };\n /**\n * Handle mouse down.\n * @param {Event} e The mouse event.\n */\n DragZoom.prototype.onMouseDown_ = function (e) {\n if (this.map_ && this.hotKeyDown_) {\n this.mapPosn_ = getElementPosition(this.map_.getDiv());\n this.dragging_ = true;\n this.startPt_ = this.endPt_ = this.getMousePoint_(e);\n this.boxDiv_.style.width = this.boxDiv_.style.height = \"0px\";\n var prj = this.prjov_.getProjection();\n var latlng = prj.fromContainerPixelToLatLng(this.startPt_);\n /**\n * This event is fired when the drag operation begins.\n * The parameter passed is the geographic position of the starting point.\n * @name DragZoom#dragstart\n * @param {LatLng} latlng The geographic position of the starting point.\n * @event\n */\n google.maps.event.trigger(this, \"dragstart\", latlng);\n }\n };\n /**\n * Handle mouse down at the document level.\n * @param {Event} e The mouse event.\n */\n DragZoom.prototype.onMouseDownDocument_ = function (e) {\n this.mouseDown_ = true;\n };\n /**\n * Handle mouse move.\n * @param {Event} e The mouse event.\n */\n DragZoom.prototype.onMouseMove_ = function (e) {\n this.mousePosn_ = getMousePosition(e);\n if (this.dragging_) {\n this.endPt_ = this.getMousePoint_(e);\n var left = Math.min(this.startPt_.x, this.endPt_.x);\n var top = Math.min(this.startPt_.y, this.endPt_.y);\n var width = Math.abs(this.startPt_.x - this.endPt_.x);\n var height = Math.abs(this.startPt_.y - this.endPt_.y);\n // For benefit of MSIE 7/8 ensure following values are not negative:\n var boxWidth = Math.max(0, width - (this.boxBorderWidths_.left + this.boxBorderWidths_.right));\n var boxHeight = Math.max(0, height - (this.boxBorderWidths_.top + this.boxBorderWidths_.bottom));\n // Left veil rectangle:\n this.veilDiv_[0].style.top = \"0px\";\n this.veilDiv_[0].style.left = \"0px\";\n this.veilDiv_[0].style.width = left + \"px\";\n this.veilDiv_[0].style.height = this.mapHeight_ + \"px\";\n // Right veil rectangle:\n this.veilDiv_[1].style.top = \"0px\";\n this.veilDiv_[1].style.left = (left + width) + \"px\";\n this.veilDiv_[1].style.width = (this.mapWidth_ - (left + width)) + \"px\";\n this.veilDiv_[1].style.height = this.mapHeight_ + \"px\";\n // Top veil rectangle:\n this.veilDiv_[2].style.top = \"0px\";\n this.veilDiv_[2].style.left = left + \"px\";\n this.veilDiv_[2].style.width = width + \"px\";\n this.veilDiv_[2].style.height = top + \"px\";\n // Bottom veil rectangle:\n this.veilDiv_[3].style.top = (top + height) + \"px\";\n this.veilDiv_[3].style.left = left + \"px\";\n this.veilDiv_[3].style.width = width + \"px\";\n this.veilDiv_[3].style.height = (this.mapHeight_ - (top + height)) + \"px\";\n // Selection rectangle:\n this.boxDiv_.style.top = top + \"px\";\n this.boxDiv_.style.left = left + \"px\";\n this.boxDiv_.style.width = boxWidth + \"px\";\n this.boxDiv_.style.height = boxHeight + \"px\";\n this.boxDiv_.style.display = \"block\";\n /**\n * This event is fired repeatedly while the user drags a box across the area of interest.\n * The southwest and northeast point are passed as parameters of type google.maps.Point
\n * (for performance reasons), relative to the map container. Also passed is the projection object\n * so that the event listener, if necessary, can convert the pixel positions to geographic\n * coordinates using google.maps.MapCanvasProjection.fromContainerPixelToLatLng
.\n * @name DragZoom#drag\n * @param {Point} southwestPixel The southwest point of the selection area.\n * @param {Point} northeastPixel The northeast point of the selection area.\n * @param {MapCanvasProjection} prj The projection object.\n * @event\n */\n google.maps.event.trigger(this, \"drag\", new google.maps.Point(left, top + height), new google.maps.Point(left + width, top), this.prjov_.getProjection());\n } else if (!this.mouseDown_) {\n this.mapPosn_ = getElementPosition(this.map_.getDiv());\n this.setVeilVisibility_();\n }\n };\n /**\n * Handle mouse up.\n * @param {Event} e The mouse event.\n */\n DragZoom.prototype.onMouseUp_ = function (e) {\n var z;\n var me = this;\n this.mouseDown_ = false;\n if (this.dragging_) {\n if ((this.getMousePoint_(e).x === this.startPt_.x) && (this.getMousePoint_(e).y === this.startPt_.y)) {\n this.onKeyUp_(e); // Cancel event\n return;\n }\n var left = Math.min(this.startPt_.x, this.endPt_.x);\n var top = Math.min(this.startPt_.y, this.endPt_.y);\n var width = Math.abs(this.startPt_.x - this.endPt_.x);\n var height = Math.abs(this.startPt_.y - this.endPt_.y);\n // Google Maps API bug: setCenter() doesn't work as expected if the map has a\n // border on the left or top. The code here includes a workaround for this problem.\n var kGoogleCenteringBug = true;\n if (kGoogleCenteringBug) {\n left += this.borderWidths_.left;\n top += this.borderWidths_.top;\n }\n\n var prj = this.prjov_.getProjection();\n var sw = prj.fromContainerPixelToLatLng(new google.maps.Point(left, top + height));\n var ne = prj.fromContainerPixelToLatLng(new google.maps.Point(left + width, top));\n var bnds = new google.maps.LatLngBounds(sw, ne);\n\n if (this.noZoom_) {\n this.boxDiv_.style.display = \"none\";\n } else {\n // Sometimes fitBounds causes a zoom OUT, so restore original zoom level if this happens.\n z = this.map_.getZoom();\n this.map_.fitBounds(bnds);\n if (this.map_.getZoom() < z) {\n this.map_.setZoom(z);\n }\n\n // Redraw box after zoom:\n var swPt = prj.fromLatLngToContainerPixel(sw);\n var nePt = prj.fromLatLngToContainerPixel(ne);\n if (kGoogleCenteringBug) {\n swPt.x -= this.borderWidths_.left;\n swPt.y -= this.borderWidths_.top;\n nePt.x -= this.borderWidths_.left;\n nePt.y -= this.borderWidths_.top;\n }\n this.boxDiv_.style.left = swPt.x + \"px\";\n this.boxDiv_.style.top = nePt.y + \"px\";\n this.boxDiv_.style.width = (Math.abs(nePt.x - swPt.x) - (this.boxBorderWidths_.left + this.boxBorderWidths_.right)) + \"px\";\n this.boxDiv_.style.height = (Math.abs(nePt.y - swPt.y) - (this.boxBorderWidths_.top + this.boxBorderWidths_.bottom)) + \"px\";\n // Hide box asynchronously after 1 second:\n setTimeout(function () {\n me.boxDiv_.style.display = \"none\";\n }, 1000);\n }\n this.dragging_ = false;\n this.onMouseMove_(e); // Updates the veil\n /**\n * This event is fired when the drag operation ends.\n * The parameter passed is the geographic bounds of the selected area.\n * Note that this event is not fired if the hot key is released before the drag operation ends.\n * @name DragZoom#dragend\n * @param {LatLngBounds} bnds The geographic bounds of the selected area.\n * @event\n */\n google.maps.event.trigger(this, \"dragend\", bnds);\n // if the hot key isn't down, the drag zoom must have been activated by turning\n // on the visual control. In this case, finish up by simulating a key up event.\n if (!this.isHotKeyDown_(e)) {\n this.onKeyUp_(e);\n }\n }\n };\n /**\n * Handle key up.\n * @param {Event} e The keyboard event.\n */\n DragZoom.prototype.onKeyUp_ = function (e) {\n var i;\n var left, top, width, height, prj, sw, ne;\n var bnds = null;\n if (this.map_ && this.hotKeyDown_) {\n this.hotKeyDown_ = false;\n if (this.dragging_) {\n this.boxDiv_.style.display = \"none\";\n this.dragging_ = false;\n // Calculate the bounds when drag zoom was cancelled\n left = Math.min(this.startPt_.x, this.endPt_.x);\n top = Math.min(this.startPt_.y, this.endPt_.y);\n width = Math.abs(this.startPt_.x - this.endPt_.x);\n height = Math.abs(this.startPt_.y - this.endPt_.y);\n prj = this.prjov_.getProjection();\n sw = prj.fromContainerPixelToLatLng(new google.maps.Point(left, top + height));\n ne = prj.fromContainerPixelToLatLng(new google.maps.Point(left + width, top));\n bnds = new google.maps.LatLngBounds(sw, ne);\n }\n for (i = 0; i < this.veilDiv_.length; i++) {\n this.veilDiv_[i].style.display = \"none\";\n }\n if (this.visualEnabled_) {\n this.buttonDiv_.firstChild.style.left = -(this.visualSize_.width * 2) + \"px\";\n this.buttonDiv_.title = this.visualTips_.off;\n this.buttonDiv_.style.display = \"\";\n }\n /**\n * This event is fired when the hot key is released.\n * The parameter passed is the geographic bounds of the selected area immediately\n * before the hot key was released.\n * @name DragZoom#deactivate\n * @param {LatLngBounds} bnds The geographic bounds of the selected area immediately\n * before the hot key was released.\n * @event\n */\n google.maps.event.trigger(this, \"deactivate\", bnds);\n }\n };\n /**\n * @name google.maps.Map\n * @class These are new methods added to the Google Maps JavaScript API V3's\n * Map\n * class.\n */\n /**\n * Enables drag zoom. The user can zoom to an area of interest by holding down the hot key\n * (shift | ctrl | alt )
while dragging a box around the area or by turning\n * on the visual control then dragging a box around the area.\n * @param {KeyDragZoomOptions} opt_zoomOpts The optional parameters.\n */\n google.maps.Map.prototype.enableKeyDragZoom = function (opt_zoomOpts) {\n this.dragZoom_ = new DragZoom(this, opt_zoomOpts);\n };\n /**\n * Disables drag zoom.\n */\n google.maps.Map.prototype.disableKeyDragZoom = function () {\n var i;\n var d = this.dragZoom_;\n if (d) {\n for (i = 0; i < d.listeners_.length; ++i) {\n google.maps.event.removeListener(d.listeners_[i]);\n }\n this.getDiv().removeChild(d.boxDiv_);\n for (i = 0; i < d.veilDiv_.length; i++) {\n this.getDiv().removeChild(d.veilDiv_[i]);\n }\n if (d.visualEnabled_) {\n // Remove the custom control:\n this.controls[d.visualPosition_].removeAt(d.controlIndex_);\n }\n d.prjov_.setMap(null);\n this.dragZoom_ = null;\n }\n };\n /**\n * Returns true
if the drag zoom feature has been enabled.\n * @return {boolean}\n */\n google.maps.Map.prototype.keyDragZoomEnabled = function () {\n return this.dragZoom_ !== null;\n };\n /**\n * Returns the DragZoom object which is created when google.maps.Map.enableKeyDragZoom
is called.\n * With this object you can use google.maps.event.addListener
to attach event listeners\n * for the \"activate\", \"deactivate\", \"dragstart\", \"drag\", and \"dragend\" events.\n * @return {DragZoom}\n */\n google.maps.Map.prototype.getDragZoomObject = function () {\n return this.dragZoom_;\n };\n})();\n/**\n * @name MarkerClustererPlus for Google Maps V3\n * @version 2.1.1 [November 4, 2013]\n * @author Gary Little\n * @fileoverview\n * The library creates and manages per-zoom-level clusters for large amounts of markers.\n *
\n * This is an enhanced V3 implementation of the\n * V2 MarkerClusterer by Xiaoxi Wu. It is based on the\n * V3 MarkerClusterer port by Luke Mahe. MarkerClustererPlus was created by Gary Little.\n *
\n * v2.0 release: MarkerClustererPlus v2.0 is backward compatible with MarkerClusterer v1.0. It\n * adds support for the ignoreHidden
, title
, batchSizeIE
,\n * and calculator
properties as well as support for four more events. It also allows\n * greater control over the styling of the text that appears on the cluster marker. The\n * documentation has been significantly improved and the overall code has been simplified and\n * polished. Very large numbers of markers can now be managed without causing Javascript timeout\n * errors on Internet Explorer. Note that the name of the clusterclick
event has been\n * deprecated. The new name is click
, so please change your application code now.\n */\n\n/**\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n\n/**\n * @name ClusterIconStyle\n * @class This class represents the object for values in the styles
array passed\n * to the {@link MarkerClusterer} constructor. The element in this array that is used to\n * style the cluster icon is determined by calling the calculator
function.\n *\n * @property {string} url The URL of the cluster icon image file. Required.\n * @property {number} height The display height (in pixels) of the cluster icon. Required.\n * @property {number} width The display width (in pixels) of the cluster icon. Required.\n * @property {Array} [anchorText] The position (in pixels) from the center of the cluster icon to\n * where the text label is to be centered and drawn. The format is [yoffset, xoffset]
\n * where yoffset
increases as you go down from center and xoffset
\n * increases to the right of center. The default is [0, 0]
.\n * @property {Array} [anchorIcon] The anchor position (in pixels) of the cluster icon. This is the\n * spot on the cluster icon that is to be aligned with the cluster position. The format is\n * [yoffset, xoffset]
where yoffset
increases as you go down and\n * xoffset
increases to the right of the top-left corner of the icon. The default\n * anchor position is the center of the cluster icon.\n * @property {string} [textColor=\"black\"] The color of the label text shown on the\n * cluster icon.\n * @property {number} [textSize=11] The size (in pixels) of the label text shown on the\n * cluster icon.\n * @property {string} [textDecoration=\"none\"] The value of the CSS text-decoration
\n * property for the label text shown on the cluster icon.\n * @property {string} [fontWeight=\"bold\"] The value of the CSS font-weight
\n * property for the label text shown on the cluster icon.\n * @property {string} [fontStyle=\"normal\"] The value of the CSS font-style
\n * property for the label text shown on the cluster icon.\n * @property {string} [fontFamily=\"Arial,sans-serif\"] The value of the CSS font-family
\n * property for the label text shown on the cluster icon.\n * @property {string} [backgroundPosition=\"0 0\"] The position of the cluster icon image\n * within the image defined by url
. The format is \"xpos ypos\"
\n * (the same format as for the CSS background-position
property). You must set\n * this property appropriately when the image defined by url
represents a sprite\n * containing multiple images. Note that the position must be specified in px units.\n */\n/**\n * @name ClusterIconInfo\n * @class This class is an object containing general information about a cluster icon. This is\n * the object that a calculator
function returns.\n *\n * @property {string} text The text of the label to be shown on the cluster icon.\n * @property {number} index The index plus 1 of the element in the styles
\n * array to be used to style the cluster icon.\n * @property {string} title The tooltip to display when the mouse moves over the cluster icon.\n * If this value is undefined
or \"\"
, title
is set to the\n * value of the title
property passed to the MarkerClusterer.\n */\n/**\n * A cluster icon.\n *\n * @constructor\n * @extends google.maps.OverlayView\n * @param {Cluster} cluster The cluster with which the icon is to be associated.\n * @param {Array} [styles] An array of {@link ClusterIconStyle} defining the cluster icons\n * to use for various cluster sizes.\n * @private\n */\nfunction ClusterIcon(cluster, styles) {\n cluster.getMarkerClusterer().extend(ClusterIcon, google.maps.OverlayView);\n\n this.cluster_ = cluster;\n this.className_ = cluster.getMarkerClusterer().getClusterClass();\n this.styles_ = styles;\n this.center_ = null;\n this.div_ = null;\n this.sums_ = null;\n this.visible_ = false;\n\n this.setMap(cluster.getMap()); // Note: this causes onAdd to be called\n}\n\n\n/**\n * Adds the icon to the DOM.\n */\nClusterIcon.prototype.onAdd = function () {\n var cClusterIcon = this;\n var cMouseDownInCluster;\n var cDraggingMapByCluster;\n\n this.div_ = document.createElement(\"div\");\n this.div_.className = this.className_;\n if (this.visible_) {\n this.show();\n }\n\n this.getPanes().overlayMouseTarget.appendChild(this.div_);\n\n // Fix for Issue 157\n this.boundsChangedListener_ = google.maps.event.addListener(this.getMap(), \"bounds_changed\", function () {\n cDraggingMapByCluster = cMouseDownInCluster;\n });\n\n google.maps.event.addDomListener(this.div_, \"mousedown\", function () {\n cMouseDownInCluster = true;\n cDraggingMapByCluster = false;\n });\n\n google.maps.event.addDomListener(this.div_, \"click\", function (e) {\n cMouseDownInCluster = false;\n if (!cDraggingMapByCluster) {\n var theBounds;\n var mz;\n var mc = cClusterIcon.cluster_.getMarkerClusterer();\n /**\n * This event is fired when a cluster marker is clicked.\n * @name MarkerClusterer#click\n * @param {Cluster} c The cluster that was clicked.\n * @event\n */\n google.maps.event.trigger(mc, \"click\", cClusterIcon.cluster_);\n google.maps.event.trigger(mc, \"clusterclick\", cClusterIcon.cluster_); // deprecated name\n\n // The default click handler follows. Disable it by setting\n // the zoomOnClick property to false.\n if (mc.getZoomOnClick()) {\n // Zoom into the cluster.\n mz = mc.getMaxZoom();\n theBounds = cClusterIcon.cluster_.getBounds();\n mc.getMap().fitBounds(theBounds);\n // There is a fix for Issue 170 here:\n setTimeout(function () {\n mc.getMap().fitBounds(theBounds);\n // Don't zoom beyond the max zoom level\n if (mz !== null && (mc.getMap().getZoom() > mz)) {\n mc.getMap().setZoom(mz + 1);\n }\n }, 100);\n }\n\n // Prevent event propagation to the map:\n e.cancelBubble = true;\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n }\n });\n\n google.maps.event.addDomListener(this.div_, \"mouseover\", function () {\n var mc = cClusterIcon.cluster_.getMarkerClusterer();\n /**\n * This event is fired when the mouse moves over a cluster marker.\n * @name MarkerClusterer#mouseover\n * @param {Cluster} c The cluster that the mouse moved over.\n * @event\n */\n google.maps.event.trigger(mc, \"mouseover\", cClusterIcon.cluster_);\n });\n\n google.maps.event.addDomListener(this.div_, \"mouseout\", function () {\n var mc = cClusterIcon.cluster_.getMarkerClusterer();\n /**\n * This event is fired when the mouse moves out of a cluster marker.\n * @name MarkerClusterer#mouseout\n * @param {Cluster} c The cluster that the mouse moved out of.\n * @event\n */\n google.maps.event.trigger(mc, \"mouseout\", cClusterIcon.cluster_);\n });\n};\n\n\n/**\n * Removes the icon from the DOM.\n */\nClusterIcon.prototype.onRemove = function () {\n if (this.div_ && this.div_.parentNode) {\n this.hide();\n google.maps.event.removeListener(this.boundsChangedListener_);\n google.maps.event.clearInstanceListeners(this.div_);\n this.div_.parentNode.removeChild(this.div_);\n this.div_ = null;\n }\n};\n\n\n/**\n * Draws the icon.\n */\nClusterIcon.prototype.draw = function () {\n if (this.visible_) {\n var pos = this.getPosFromLatLng_(this.center_);\n this.div_.style.top = pos.y + \"px\";\n this.div_.style.left = pos.x + \"px\";\n }\n};\n\n\n/**\n * Hides the icon.\n */\nClusterIcon.prototype.hide = function () {\n if (this.div_) {\n this.div_.style.display = \"none\";\n }\n this.visible_ = false;\n};\n\n\n/**\n * Positions and shows the icon.\n */\nClusterIcon.prototype.show = function () {\n if (this.div_) {\n var img = \"\";\n // NOTE: values must be specified in px units\n var bp = this.backgroundPosition_.split(\" \");\n var spriteH = parseInt(bp[0].trim(), 10);\n var spriteV = parseInt(bp[1].trim(), 10);\n var pos = this.getPosFromLatLng_(this.center_);\n this.div_.style.cssText = this.createCss(pos);\n img = \"\";\n this.div_.innerHTML = img + \"
MarkerClusterer
object with which this\n * cluster is associated.\n */\nfunction Cluster(mc) {\n this.markerClusterer_ = mc;\n this.map_ = mc.getMap();\n this.gridSize_ = mc.getGridSize();\n this.minClusterSize_ = mc.getMinimumClusterSize();\n this.averageCenter_ = mc.getAverageCenter();\n this.markers_ = [];\n this.center_ = null;\n this.bounds_ = null;\n this.clusterIcon_ = new ClusterIcon(this, mc.getStyles());\n}\n\n\n/**\n * Returns the number of markers managed by the cluster. You can call this from\n * a click
, mouseover
, or mouseout
event handler\n * for the MarkerClusterer
object.\n *\n * @return {number} The number of markers in the cluster.\n */\nCluster.prototype.getSize = function () {\n return this.markers_.length;\n};\n\n\n/**\n * Returns the array of markers managed by the cluster. You can call this from\n * a click
, mouseover
, or mouseout
event handler\n * for the MarkerClusterer
object.\n *\n * @return {Array} The array of markers in the cluster.\n */\nCluster.prototype.getMarkers = function () {\n return this.markers_;\n};\n\n\n/**\n * Returns the center of the cluster. You can call this from\n * a click
, mouseover
, or mouseout
event handler\n * for the MarkerClusterer
object.\n *\n * @return {google.maps.LatLng} The center of the cluster.\n */\nCluster.prototype.getCenter = function () {\n return this.center_;\n};\n\n\n/**\n * Returns the map with which the cluster is associated.\n *\n * @return {google.maps.Map} The map.\n * @ignore\n */\nCluster.prototype.getMap = function () {\n return this.map_;\n};\n\n\n/**\n * Returns the MarkerClusterer
object with which the cluster is associated.\n *\n * @return {MarkerClusterer} The associated marker clusterer.\n * @ignore\n */\nCluster.prototype.getMarkerClusterer = function () {\n return this.markerClusterer_;\n};\n\n\n/**\n * Returns the bounds of the cluster.\n *\n * @return {google.maps.LatLngBounds} the cluster bounds.\n * @ignore\n */\nCluster.prototype.getBounds = function () {\n var i;\n var bounds = new google.maps.LatLngBounds(this.center_, this.center_);\n var markers = this.getMarkers();\n for (i = 0; i < markers.length; i++) {\n bounds.extend(markers[i].getPosition());\n }\n return bounds;\n};\n\n\n/**\n * Removes the cluster from the map.\n *\n * @ignore\n */\nCluster.prototype.remove = function () {\n this.clusterIcon_.setMap(null);\n this.markers_ = [];\n delete this.markers_;\n};\n\n\n/**\n * Adds a marker to the cluster.\n *\n * @param {google.maps.Marker} marker The marker to be added.\n * @return {boolean} True if the marker was added.\n * @ignore\n */\nCluster.prototype.addMarker = function (marker) {\n var i;\n var mCount;\n var mz;\n\n if (this.isMarkerAlreadyAdded_(marker)) {\n return false;\n }\n\n if (!this.center_) {\n this.center_ = marker.getPosition();\n this.calculateBounds_();\n } else {\n if (this.averageCenter_) {\n var l = this.markers_.length + 1;\n var lat = (this.center_.lat() * (l - 1) + marker.getPosition().lat()) / l;\n var lng = (this.center_.lng() * (l - 1) + marker.getPosition().lng()) / l;\n this.center_ = new google.maps.LatLng(lat, lng);\n this.calculateBounds_();\n }\n }\n\n marker.isAdded = true;\n this.markers_.push(marker);\n\n mCount = this.markers_.length;\n mz = this.markerClusterer_.getMaxZoom();\n if (mz !== null && this.map_.getZoom() > mz) {\n // Zoomed in past max zoom, so show the marker.\n if (marker.getMap() !== this.map_) {\n marker.setMap(this.map_);\n }\n } else if (mCount < this.minClusterSize_) {\n // Min cluster size not reached so show the marker.\n if (marker.getMap() !== this.map_) {\n marker.setMap(this.map_);\n }\n } else if (mCount === this.minClusterSize_) {\n // Hide the markers that were showing.\n for (i = 0; i < mCount; i++) {\n this.markers_[i].setMap(null);\n }\n } else {\n marker.setMap(null);\n }\n\n this.updateIcon_();\n return true;\n};\n\n\n/**\n * Determines if a marker lies within the cluster's bounds.\n *\n * @param {google.maps.Marker} marker The marker to check.\n * @return {boolean} True if the marker lies in the bounds.\n * @ignore\n */\nCluster.prototype.isMarkerInClusterBounds = function (marker) {\n return this.bounds_.contains(marker.getPosition());\n};\n\n\n/**\n * Calculates the extended bounds of the cluster with the grid.\n */\nCluster.prototype.calculateBounds_ = function () {\n var bounds = new google.maps.LatLngBounds(this.center_, this.center_);\n this.bounds_ = this.markerClusterer_.getExtendedBounds(bounds);\n};\n\n\n/**\n * Updates the cluster icon.\n */\nCluster.prototype.updateIcon_ = function () {\n var mCount = this.markers_.length;\n var mz = this.markerClusterer_.getMaxZoom();\n\n if (mz !== null && this.map_.getZoom() > mz) {\n this.clusterIcon_.hide();\n return;\n }\n\n if (mCount < this.minClusterSize_) {\n // Min cluster size not yet reached.\n this.clusterIcon_.hide();\n return;\n }\n\n var numStyles = this.markerClusterer_.getStyles().length;\n var sums = this.markerClusterer_.getCalculator()(this.markers_, numStyles);\n this.clusterIcon_.setCenter(this.center_);\n this.clusterIcon_.useStyle(sums);\n this.clusterIcon_.show();\n};\n\n\n/**\n * Determines if a marker has already been added to the cluster.\n *\n * @param {google.maps.Marker} marker The marker to check.\n * @return {boolean} True if the marker has already been added.\n */\nCluster.prototype.isMarkerAlreadyAdded_ = function (marker) {\n var i;\n if (this.markers_.indexOf) {\n return this.markers_.indexOf(marker) !== -1;\n } else {\n for (i = 0; i < this.markers_.length; i++) {\n if (marker === this.markers_[i]) {\n return true;\n }\n }\n }\n return false;\n};\n\n\n/**\n * @name MarkerClustererOptions\n * @class This class represents the optional parameter passed to\n * the {@link MarkerClusterer} constructor.\n * @property {number} [gridSize=60] The grid size of a cluster in pixels. The grid is a square.\n * @property {number} [maxZoom=null] The maximum zoom level at which clustering is enabled or\n * null
if clustering is to be enabled at all zoom levels.\n * @property {boolean} [zoomOnClick=true] Whether to zoom the map when a cluster marker is\n * clicked. You may want to set this to false
if you have installed a handler\n * for the click
event and it deals with zooming on its own.\n * @property {boolean} [averageCenter=false] Whether the position of a cluster marker should be\n * the average position of all markers in the cluster. If set to false
, the\n * cluster marker is positioned at the location of the first marker added to the cluster.\n * @property {number} [minimumClusterSize=2] The minimum number of markers needed in a cluster\n * before the markers are hidden and a cluster marker appears.\n * @property {boolean} [ignoreHidden=false] Whether to ignore hidden markers in clusters. You\n * may want to set this to true
to ensure that hidden markers are not included\n * in the marker count that appears on a cluster marker (this count is the value of the\n * text
property of the result returned by the default calculator
).\n * If set to true
and you change the visibility of a marker being clustered, be\n * sure to also call MarkerClusterer.repaint()
.\n * @property {string} [title=\"\"] The tooltip to display when the mouse moves over a cluster\n * marker. (Alternatively, you can use a custom calculator
function to specify a\n * different tooltip for each cluster marker.)\n * @property {function} [calculator=MarkerClusterer.CALCULATOR] The function used to determine\n * the text to be displayed on a cluster marker and the index indicating which style to use\n * for the cluster marker. The input parameters for the function are (1) the array of markers\n * represented by a cluster marker and (2) the number of cluster icon styles. It returns a\n * {@link ClusterIconInfo} object. The default calculator
returns a\n * text
property which is the number of markers in the cluster and an\n * index
property which is one higher than the lowest integer such that\n * 10^i
exceeds the number of markers in the cluster, or the size of the styles\n * array, whichever is less. The styles
array element used has an index of\n * index
minus 1. For example, the default calculator
returns a\n * text
value of \"125\"
and an index
of 3
\n * for a cluster icon representing 125 markers so the element used in the styles
\n * array is 2
. A calculator
may also return a title
\n * property that contains the text of the tooltip to be used for the cluster marker. If\n * title
is not defined, the tooltip is set to the value of the title
\n * property for the MarkerClusterer.\n * @property {string} [clusterClass=\"cluster\"] The name of the CSS class defining general styles\n * for the cluster markers. Use this class to define CSS styles that are not set up by the code\n * that processes the styles
array.\n * @property {Array} [styles] An array of {@link ClusterIconStyle} elements defining the styles\n * of the cluster markers to be used. The element to be used to style a given cluster marker\n * is determined by the function defined by the calculator
property.\n * The default is an array of {@link ClusterIconStyle} elements whose properties are derived\n * from the values for imagePath
, imageExtension
, and\n * imageSizes
.\n * @property {boolean} [enableRetinaIcons=false] Whether to allow the use of cluster icons that\n * have sizes that are some multiple (typically double) of their actual display size. Icons such\n * as these look better when viewed on high-resolution monitors such as Apple's Retina displays.\n * Note: if this property is true
, sprites cannot be used as cluster icons.\n * @property {number} [batchSize=MarkerClusterer.BATCH_SIZE] Set this property to the\n * number of markers to be processed in a single batch when using a browser other than\n * Internet Explorer (for Internet Explorer, use the batchSizeIE property instead).\n * @property {number} [batchSizeIE=MarkerClusterer.BATCH_SIZE_IE] When Internet Explorer is\n * being used, markers are processed in several batches with a small delay inserted between\n * each batch in an attempt to avoid Javascript timeout errors. Set this property to the\n * number of markers to be processed in a single batch; select as high a number as you can\n * without causing a timeout error in the browser. This number might need to be as low as 100\n * if 15,000 markers are being managed, for example.\n * @property {string} [imagePath=MarkerClusterer.IMAGE_PATH]\n * The full URL of the root name of the group of image files to use for cluster icons.\n * The complete file name is of the form imagePath
n.imageExtension
\n * where n is the image file number (1, 2, etc.).\n * @property {string} [imageExtension=MarkerClusterer.IMAGE_EXTENSION]\n * The extension name for the cluster icon image files (e.g., \"png\"
or\n * \"jpg\"
).\n * @property {Array} [imageSizes=MarkerClusterer.IMAGE_SIZES]\n * An array of numbers containing the widths of the group of\n * imagePath
n.imageExtension
image files.\n * (The images are assumed to be square.)\n */\n/**\n * Creates a MarkerClusterer object with the options specified in {@link MarkerClustererOptions}.\n * @constructor\n * @extends google.maps.OverlayView\n * @param {google.maps.Map} map The Google map to attach to.\n * @param {Array.gridSize
property.\n *\n * @return {number} The grid size.\n */\nMarkerClusterer.prototype.getGridSize = function () {\n return this.gridSize_;\n};\n\n\n/**\n * Sets the value of the gridSize
property.\n *\n * @param {number} gridSize The grid size.\n */\nMarkerClusterer.prototype.setGridSize = function (gridSize) {\n this.gridSize_ = gridSize;\n};\n\n\n/**\n * Returns the value of the minimumClusterSize
property.\n *\n * @return {number} The minimum cluster size.\n */\nMarkerClusterer.prototype.getMinimumClusterSize = function () {\n return this.minClusterSize_;\n};\n\n/**\n * Sets the value of the minimumClusterSize
property.\n *\n * @param {number} minimumClusterSize The minimum cluster size.\n */\nMarkerClusterer.prototype.setMinimumClusterSize = function (minimumClusterSize) {\n this.minClusterSize_ = minimumClusterSize;\n};\n\n\n/**\n * Returns the value of the maxZoom
property.\n *\n * @return {number} The maximum zoom level.\n */\nMarkerClusterer.prototype.getMaxZoom = function () {\n return this.maxZoom_;\n};\n\n\n/**\n * Sets the value of the maxZoom
property.\n *\n * @param {number} maxZoom The maximum zoom level.\n */\nMarkerClusterer.prototype.setMaxZoom = function (maxZoom) {\n this.maxZoom_ = maxZoom;\n};\n\n\n/**\n * Returns the value of the styles
property.\n *\n * @return {Array} The array of styles defining the cluster markers to be used.\n */\nMarkerClusterer.prototype.getStyles = function () {\n return this.styles_;\n};\n\n\n/**\n * Sets the value of the styles
property.\n *\n * @param {Array.title
property.\n *\n * @return {string} The content of the title text.\n */\nMarkerClusterer.prototype.getTitle = function () {\n return this.title_;\n};\n\n\n/**\n * Sets the value of the title
property.\n *\n * @param {string} title The value of the title property.\n */\nMarkerClusterer.prototype.setTitle = function (title) {\n this.title_ = title;\n};\n\n\n/**\n * Returns the value of the zoomOnClick
property.\n *\n * @return {boolean} True if zoomOnClick property is set.\n */\nMarkerClusterer.prototype.getZoomOnClick = function () {\n return this.zoomOnClick_;\n};\n\n\n/**\n * Sets the value of the zoomOnClick
property.\n *\n * @param {boolean} zoomOnClick The value of the zoomOnClick property.\n */\nMarkerClusterer.prototype.setZoomOnClick = function (zoomOnClick) {\n this.zoomOnClick_ = zoomOnClick;\n};\n\n\n/**\n * Returns the value of the averageCenter
property.\n *\n * @return {boolean} True if averageCenter property is set.\n */\nMarkerClusterer.prototype.getAverageCenter = function () {\n return this.averageCenter_;\n};\n\n\n/**\n * Sets the value of the averageCenter
property.\n *\n * @param {boolean} averageCenter The value of the averageCenter property.\n */\nMarkerClusterer.prototype.setAverageCenter = function (averageCenter) {\n this.averageCenter_ = averageCenter;\n};\n\n\n/**\n * Returns the value of the ignoreHidden
property.\n *\n * @return {boolean} True if ignoreHidden property is set.\n */\nMarkerClusterer.prototype.getIgnoreHidden = function () {\n return this.ignoreHidden_;\n};\n\n\n/**\n * Sets the value of the ignoreHidden
property.\n *\n * @param {boolean} ignoreHidden The value of the ignoreHidden property.\n */\nMarkerClusterer.prototype.setIgnoreHidden = function (ignoreHidden) {\n this.ignoreHidden_ = ignoreHidden;\n};\n\n\n/**\n * Returns the value of the enableRetinaIcons
property.\n *\n * @return {boolean} True if enableRetinaIcons property is set.\n */\nMarkerClusterer.prototype.getEnableRetinaIcons = function () {\n return this.enableRetinaIcons_;\n};\n\n\n/**\n * Sets the value of the enableRetinaIcons
property.\n *\n * @param {boolean} enableRetinaIcons The value of the enableRetinaIcons property.\n */\nMarkerClusterer.prototype.setEnableRetinaIcons = function (enableRetinaIcons) {\n this.enableRetinaIcons_ = enableRetinaIcons;\n};\n\n\n/**\n * Returns the value of the imageExtension
property.\n *\n * @return {string} The value of the imageExtension property.\n */\nMarkerClusterer.prototype.getImageExtension = function () {\n return this.imageExtension_;\n};\n\n\n/**\n * Sets the value of the imageExtension
property.\n *\n * @param {string} imageExtension The value of the imageExtension property.\n */\nMarkerClusterer.prototype.setImageExtension = function (imageExtension) {\n this.imageExtension_ = imageExtension;\n};\n\n\n/**\n * Returns the value of the imagePath
property.\n *\n * @return {string} The value of the imagePath property.\n */\nMarkerClusterer.prototype.getImagePath = function () {\n return this.imagePath_;\n};\n\n\n/**\n * Sets the value of the imagePath
property.\n *\n * @param {string} imagePath The value of the imagePath property.\n */\nMarkerClusterer.prototype.setImagePath = function (imagePath) {\n this.imagePath_ = imagePath;\n};\n\n\n/**\n * Returns the value of the imageSizes
property.\n *\n * @return {Array} The value of the imageSizes property.\n */\nMarkerClusterer.prototype.getImageSizes = function () {\n return this.imageSizes_;\n};\n\n\n/**\n * Sets the value of the imageSizes
property.\n *\n * @param {Array} imageSizes The value of the imageSizes property.\n */\nMarkerClusterer.prototype.setImageSizes = function (imageSizes) {\n this.imageSizes_ = imageSizes;\n};\n\n\n/**\n * Returns the value of the calculator
property.\n *\n * @return {function} the value of the calculator property.\n */\nMarkerClusterer.prototype.getCalculator = function () {\n return this.calculator_;\n};\n\n\n/**\n * Sets the value of the calculator
property.\n *\n * @param {function(Array.batchSizeIE
property.\n *\n * @return {number} the value of the batchSizeIE property.\n */\nMarkerClusterer.prototype.getBatchSizeIE = function () {\n return this.batchSizeIE_;\n};\n\n\n/**\n * Sets the value of the batchSizeIE
property.\n *\n * @param {number} batchSizeIE The value of the batchSizeIE property.\n */\nMarkerClusterer.prototype.setBatchSizeIE = function (batchSizeIE) {\n this.batchSizeIE_ = batchSizeIE;\n};\n\n\n/**\n * Returns the value of the clusterClass
property.\n *\n * @return {string} the value of the clusterClass property.\n */\nMarkerClusterer.prototype.getClusterClass = function () {\n return this.clusterClass_;\n};\n\n\n/**\n * Sets the value of the clusterClass
property.\n *\n * @param {string} clusterClass The value of the clusterClass property.\n */\nMarkerClusterer.prototype.setClusterClass = function (clusterClass) {\n this.clusterClass_ = clusterClass;\n};\n\n\n/**\n * Returns the array of markers managed by the clusterer.\n *\n * @return {Array} The array of markers managed by the clusterer.\n */\nMarkerClusterer.prototype.getMarkers = function () {\n return this.markers_;\n};\n\n\n/**\n * Returns the number of markers managed by the clusterer.\n *\n * @return {number} The number of markers.\n */\nMarkerClusterer.prototype.getTotalMarkers = function () {\n return this.markers_.length;\n};\n\n\n/**\n * Returns the current array of clusters formed by the clusterer.\n *\n * @return {Array} The array of clusters formed by the clusterer.\n */\nMarkerClusterer.prototype.getClusters = function () {\n return this.clusters_;\n};\n\n\n/**\n * Returns the number of clusters formed by the clusterer.\n *\n * @return {number} The number of clusters formed by the clusterer.\n */\nMarkerClusterer.prototype.getTotalClusters = function () {\n return this.clusters_.length;\n};\n\n\n/**\n * Adds a marker to the clusterer. The clusters are redrawn unless\n * opt_nodraw
is set to true
.\n *\n * @param {google.maps.Marker} marker The marker to add.\n * @param {boolean} [opt_nodraw] Set to true
to prevent redrawing.\n */\nMarkerClusterer.prototype.addMarker = function (marker, opt_nodraw) {\n this.pushMarkerTo_(marker);\n if (!opt_nodraw) {\n this.redraw_();\n }\n};\n\n\n/**\n * Adds an array of markers to the clusterer. The clusters are redrawn unless\n * opt_nodraw
is set to true
.\n *\n * @param {Array.true
to prevent redrawing.\n */\nMarkerClusterer.prototype.addMarkers = function (markers, opt_nodraw) {\n var key;\n for (key in markers) {\n if (markers.hasOwnProperty(key)) {\n this.pushMarkerTo_(markers[key]);\n }\n } \n if (!opt_nodraw) {\n this.redraw_();\n }\n};\n\n\n/**\n * Pushes a marker to the clusterer.\n *\n * @param {google.maps.Marker} marker The marker to add.\n */\nMarkerClusterer.prototype.pushMarkerTo_ = function (marker) {\n // If the marker is draggable add a listener so we can update the clusters on the dragend:\n if (marker.getDraggable()) {\n var cMarkerClusterer = this;\n google.maps.event.addListener(marker, \"dragend\", function () {\n if (cMarkerClusterer.ready_) {\n this.isAdded = false;\n cMarkerClusterer.repaint();\n }\n });\n }\n marker.isAdded = false;\n this.markers_.push(marker);\n};\n\n\n/**\n * Removes a marker from the cluster. The clusters are redrawn unless\n * opt_nodraw
is set to true
. Returns true
if the\n * marker was removed from the clusterer.\n *\n * @param {google.maps.Marker} marker The marker to remove.\n * @param {boolean} [opt_nodraw] Set to true
to prevent redrawing.\n * @return {boolean} True if the marker was removed from the clusterer.\n */\nMarkerClusterer.prototype.removeMarker = function (marker, opt_nodraw) {\n var removed = this.removeMarker_(marker);\n\n if (!opt_nodraw && removed) {\n this.repaint();\n }\n\n return removed;\n};\n\n\n/**\n * Removes an array of markers from the cluster. The clusters are redrawn unless\n * opt_nodraw
is set to true
. Returns true
if markers\n * were removed from the clusterer.\n *\n * @param {Array.true
to prevent redrawing.\n * @return {boolean} True if markers were removed from the clusterer.\n */\nMarkerClusterer.prototype.removeMarkers = function (markers, opt_nodraw) {\n var i, r;\n var removed = false;\n\n for (i = 0; i < markers.length; i++) {\n r = this.removeMarker_(markers[i]);\n removed = removed || r;\n }\n\n if (!opt_nodraw && removed) {\n this.repaint();\n }\n\n return removed;\n};\n\n\n/**\n * Removes a marker and returns true if removed, false if not.\n *\n * @param {google.maps.Marker} marker The marker to remove\n * @return {boolean} Whether the marker was removed or not\n */\nMarkerClusterer.prototype.removeMarker_ = function (marker) {\n var i;\n var index = -1;\n if (this.markers_.indexOf) {\n index = this.markers_.indexOf(marker);\n } else {\n for (i = 0; i < this.markers_.length; i++) {\n if (marker === this.markers_[i]) {\n index = i;\n break;\n }\n }\n }\n\n if (index === -1) {\n // Marker is not in our list of markers, so do nothing:\n return false;\n }\n\n marker.setMap(null);\n this.markers_.splice(index, 1); // Remove the marker from the list of managed markers\n return true;\n};\n\n\n/**\n * Removes all clusters and markers from the map and also removes all markers\n * managed by the clusterer.\n */\nMarkerClusterer.prototype.clearMarkers = function () {\n this.resetViewport_(true);\n this.markers_ = [];\n};\n\n\n/**\n * Recalculates and redraws all the marker clusters from scratch.\n * Call this after changing any properties.\n */\nMarkerClusterer.prototype.repaint = function () {\n var oldClusters = this.clusters_.slice();\n this.clusters_ = [];\n this.resetViewport_(false);\n this.redraw_();\n\n // Remove the old clusters.\n // Do it in a timeout to prevent blinking effect.\n setTimeout(function () {\n var i;\n for (i = 0; i < oldClusters.length; i++) {\n oldClusters[i].remove();\n }\n }, 0);\n};\n\n\n/**\n * Returns the current bounds extended by the grid size.\n *\n * @param {google.maps.LatLngBounds} bounds The bounds to extend.\n * @return {google.maps.LatLngBounds} The extended bounds.\n * @ignore\n */\nMarkerClusterer.prototype.getExtendedBounds = function (bounds) {\n var projection = this.getProjection();\n\n // Turn the bounds into latlng.\n var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),\n bounds.getNorthEast().lng());\n var bl = new google.maps.LatLng(bounds.getSouthWest().lat(),\n bounds.getSouthWest().lng());\n\n // Convert the points to pixels and the extend out by the grid size.\n var trPix = projection.fromLatLngToDivPixel(tr);\n trPix.x += this.gridSize_;\n trPix.y -= this.gridSize_;\n\n var blPix = projection.fromLatLngToDivPixel(bl);\n blPix.x -= this.gridSize_;\n blPix.y += this.gridSize_;\n\n // Convert the pixel points back to LatLng\n var ne = projection.fromDivPixelToLatLng(trPix);\n var sw = projection.fromDivPixelToLatLng(blPix);\n\n // Extend the bounds to contain the new bounds.\n bounds.extend(ne);\n bounds.extend(sw);\n\n return bounds;\n};\n\n\n/**\n * Redraws all the clusters.\n */\nMarkerClusterer.prototype.redraw_ = function () {\n this.createClusters_(0);\n};\n\n\n/**\n * Removes all clusters from the map. The markers are also removed from the map\n * if opt_hide
is set to true
.\n *\n * @param {boolean} [opt_hide] Set to true
to also remove the markers\n * from the map.\n */\nMarkerClusterer.prototype.resetViewport_ = function (opt_hide) {\n var i, marker;\n // Remove all the clusters\n for (i = 0; i < this.clusters_.length; i++) {\n this.clusters_[i].remove();\n }\n this.clusters_ = [];\n\n // Reset the markers to not be added and to be removed from the map.\n for (i = 0; i < this.markers_.length; i++) {\n marker = this.markers_[i];\n marker.isAdded = false;\n if (opt_hide) {\n marker.setMap(null);\n }\n }\n};\n\n\n/**\n * Calculates the distance between two latlng locations in km.\n *\n * @param {google.maps.LatLng} p1 The first lat lng point.\n * @param {google.maps.LatLng} p2 The second lat lng point.\n * @return {number} The distance between the two points in km.\n * @see http://www.movable-type.co.uk/scripts/latlong.html\n*/\nMarkerClusterer.prototype.distanceBetweenPoints_ = function (p1, p2) {\n var R = 6371; // Radius of the Earth in km\n var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;\n var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;\n var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +\n Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *\n Math.sin(dLon / 2) * Math.sin(dLon / 2);\n var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n var d = R * c;\n return d;\n};\n\n\n/**\n * Determines if a marker is contained in a bounds.\n *\n * @param {google.maps.Marker} marker The marker to check.\n * @param {google.maps.LatLngBounds} bounds The bounds to check against.\n * @return {boolean} True if the marker is in the bounds.\n */\nMarkerClusterer.prototype.isMarkerInBounds_ = function (marker, bounds) {\n return bounds.contains(marker.getPosition());\n};\n\n\n/**\n * Adds a marker to a cluster, or creates a new cluster.\n *\n * @param {google.maps.Marker} marker The marker to add.\n */\nMarkerClusterer.prototype.addToClosestCluster_ = function (marker) {\n var i, d, cluster, center;\n var distance = 40000; // Some large number\n var clusterToAddTo = null;\n for (i = 0; i < this.clusters_.length; i++) {\n cluster = this.clusters_[i];\n center = cluster.getCenter();\n if (center) {\n d = this.distanceBetweenPoints_(center, marker.getPosition());\n if (d < distance) {\n distance = d;\n clusterToAddTo = cluster;\n }\n }\n }\n\n if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)) {\n clusterToAddTo.addMarker(marker);\n } else {\n cluster = new Cluster(this);\n cluster.addMarker(marker);\n this.clusters_.push(cluster);\n }\n};\n\n\n/**\n * Creates the clusters. This is done in batches to avoid timeout errors\n * in some browsers when there is a huge number of markers.\n *\n * @param {number} iFirst The index of the first marker in the batch of\n * markers to be added to clusters.\n */\nMarkerClusterer.prototype.createClusters_ = function (iFirst) {\n var i, marker;\n var mapBounds;\n var cMarkerClusterer = this;\n if (!this.ready_) {\n return;\n }\n\n // Cancel previous batch processing if we're working on the first batch:\n if (iFirst === 0) {\n /**\n * This event is fired when the MarkerClusterer
begins\n * clustering markers.\n * @name MarkerClusterer#clusteringbegin\n * @param {MarkerClusterer} mc The MarkerClusterer whose markers are being clustered.\n * @event\n */\n google.maps.event.trigger(this, \"clusteringbegin\", this);\n\n if (typeof this.timerRefStatic !== \"undefined\") {\n clearTimeout(this.timerRefStatic);\n delete this.timerRefStatic;\n }\n }\n\n // Get our current map view bounds.\n // Create a new bounds object so we don't affect the map.\n //\n // See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:\n if (this.getMap().getZoom() > 3) {\n mapBounds = new google.maps.LatLngBounds(this.getMap().getBounds().getSouthWest(),\n this.getMap().getBounds().getNorthEast());\n } else {\n mapBounds = new google.maps.LatLngBounds(new google.maps.LatLng(85.02070771743472, -178.48388434375), new google.maps.LatLng(-85.08136444384544, 178.00048865625));\n }\n var bounds = this.getExtendedBounds(mapBounds);\n\n var iLast = Math.min(iFirst + this.batchSize_, this.markers_.length);\n\n for (i = iFirst; i < iLast; i++) {\n marker = this.markers_[i];\n if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {\n if (!this.ignoreHidden_ || (this.ignoreHidden_ && marker.getVisible())) {\n this.addToClosestCluster_(marker);\n }\n }\n }\n\n if (iLast < this.markers_.length) {\n this.timerRefStatic = setTimeout(function () {\n cMarkerClusterer.createClusters_(iLast);\n }, 0);\n } else {\n delete this.timerRefStatic;\n\n /**\n * This event is fired when the MarkerClusterer
stops\n * clustering markers.\n * @name MarkerClusterer#clusteringend\n * @param {MarkerClusterer} mc The MarkerClusterer whose markers are being clustered.\n * @event\n */\n google.maps.event.trigger(this, \"clusteringend\", this);\n }\n};\n\n\n/**\n * Extends an object's prototype by another's.\n *\n * @param {Object} obj1 The object to be extended.\n * @param {Object} obj2 The object to extend with.\n * @return {Object} The new extended object.\n * @ignore\n */\nMarkerClusterer.prototype.extend = function (obj1, obj2) {\n return (function (object) {\n var property;\n for (property in object.prototype) {\n this.prototype[property] = object.prototype[property];\n }\n return this;\n }).apply(obj1, [obj2]);\n};\n\n\n/**\n * The default function for determining the label text and style\n * for a cluster icon.\n *\n * @param {Array.google.maps.Marker
class.\n * \n * MarkerWithLabel allows you to define markers with associated labels. As you would expect,\n * if the marker is draggable, so too will be the label. In addition, a marker with a label\n * responds to all mouse events in the same manner as a regular marker. It also fires mouse\n * events and \"property changed\" events just as a regular marker would. Version 1.1 adds\n * support for the raiseOnDrag feature introduced in API V3.3.\n *
\n * If you drag a marker by its label, you can cancel the drag and return the marker to its\n * original position by pressing the Esc
key. This doesn't work if you drag the marker\n * itself because this feature is not (yet) supported in the google.maps.Marker
class.\n */\n\n/*!\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/*jslint browser:true */\n/*global document,google */\n\n/**\n * @param {Function} childCtor Child class.\n * @param {Function} parentCtor Parent class.\n * @private\n */\nfunction inherits(childCtor, parentCtor) {\n /* @constructor */\n function tempCtor() {}\n tempCtor.prototype = parentCtor.prototype;\n childCtor.superClass_ = parentCtor.prototype;\n childCtor.prototype = new tempCtor();\n /* @override */\n childCtor.prototype.constructor = childCtor;\n}\n\n/**\n * This constructor creates a label and associates it with a marker.\n * It is for the private use of the MarkerWithLabel class.\n * @constructor\n * @param {Marker} marker The marker with which the label is to be associated.\n * @param {string} crossURL The URL of the cross image =.\n * @param {string} handCursor The URL of the hand cursor.\n * @private\n */\nfunction MarkerLabel_(marker, crossURL, handCursorURL) {\n this.marker_ = marker;\n this.handCursorURL_ = marker.handCursorURL;\n\n this.labelDiv_ = document.createElement(\"div\");\n this.labelDiv_.style.cssText = \"position: absolute; overflow: hidden;\";\n\n // Set up the DIV for handling mouse events in the label. This DIV forms a transparent veil\n // in the \"overlayMouseTarget\" pane, a veil that covers just the label. This is done so that\n // events can be captured even if the label is in the shadow of a google.maps.InfoWindow.\n // Code is included here to ensure the veil is always exactly the same size as the label.\n this.eventDiv_ = document.createElement(\"div\");\n this.eventDiv_.style.cssText = this.labelDiv_.style.cssText;\n\n // This is needed for proper behavior on MSIE:\n this.eventDiv_.setAttribute(\"onselectstart\", \"return false;\");\n this.eventDiv_.setAttribute(\"ondragstart\", \"return false;\");\n\n // Get the DIV for the \"X\" to be displayed when the marker is raised.\n this.crossDiv_ = MarkerLabel_.getSharedCross(crossURL);\n}\n\ninherits(MarkerLabel_, google.maps.OverlayView);\n\n/**\n * Returns the DIV for the cross used when dragging a marker when the\n * raiseOnDrag parameter set to true. One cross is shared with all markers.\n * @param {string} crossURL The URL of the cross image =.\n * @private\n */\nMarkerLabel_.getSharedCross = function (crossURL) {\n var div;\n if (typeof MarkerLabel_.getSharedCross.crossDiv === \"undefined\") {\n div = document.createElement(\"img\");\n div.style.cssText = \"position: absolute; z-index: 1000002; display: none;\";\n // Hopefully Google never changes the standard \"X\" attributes:\n div.style.marginLeft = \"-8px\";\n div.style.marginTop = \"-9px\";\n div.src = crossURL;\n MarkerLabel_.getSharedCross.crossDiv = div;\n }\n return MarkerLabel_.getSharedCross.crossDiv;\n};\n\n/**\n * Adds the DIV representing the label to the DOM. This method is called\n * automatically when the marker's setMap
method is called.\n * @private\n */\nMarkerLabel_.prototype.onAdd = function () {\n var me = this;\n var cMouseIsDown = false;\n var cDraggingLabel = false;\n var cSavedZIndex;\n var cLatOffset, cLngOffset;\n var cIgnoreClick;\n var cRaiseEnabled;\n var cStartPosition;\n var cStartCenter;\n // Constants:\n var cRaiseOffset = 20;\n var cDraggingCursor = \"url(\" + this.handCursorURL_ + \")\";\n\n // Stops all processing of an event.\n //\n var cAbortEvent = function (e) {\n if (e.preventDefault) {\n e.preventDefault();\n }\n e.cancelBubble = true;\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n };\n\n var cStopBounce = function () {\n me.marker_.setAnimation(null);\n };\n\n this.getPanes().overlayImage.appendChild(this.labelDiv_);\n this.getPanes().overlayMouseTarget.appendChild(this.eventDiv_);\n // One cross is shared with all markers, so only add it once:\n if (typeof MarkerLabel_.getSharedCross.processed === \"undefined\") {\n this.getPanes().overlayImage.appendChild(this.crossDiv_);\n MarkerLabel_.getSharedCross.processed = true;\n }\n\n this.listeners_ = [\n google.maps.event.addDomListener(this.eventDiv_, \"mouseover\", function (e) {\n if (me.marker_.getDraggable() || me.marker_.getClickable()) {\n this.style.cursor = \"pointer\";\n google.maps.event.trigger(me.marker_, \"mouseover\", e);\n }\n }),\n google.maps.event.addDomListener(this.eventDiv_, \"mouseout\", function (e) {\n if ((me.marker_.getDraggable() || me.marker_.getClickable()) && !cDraggingLabel) {\n this.style.cursor = me.marker_.getCursor();\n google.maps.event.trigger(me.marker_, \"mouseout\", e);\n }\n }),\n google.maps.event.addDomListener(this.eventDiv_, \"mousedown\", function (e) {\n cDraggingLabel = false;\n if (me.marker_.getDraggable()) {\n cMouseIsDown = true;\n this.style.cursor = cDraggingCursor;\n }\n if (me.marker_.getDraggable() || me.marker_.getClickable()) {\n google.maps.event.trigger(me.marker_, \"mousedown\", e);\n cAbortEvent(e); // Prevent map pan when starting a drag on a label\n }\n }),\n google.maps.event.addDomListener(document, \"mouseup\", function (mEvent) {\n var position;\n if (cMouseIsDown) {\n cMouseIsDown = false;\n me.eventDiv_.style.cursor = \"pointer\";\n google.maps.event.trigger(me.marker_, \"mouseup\", mEvent);\n }\n if (cDraggingLabel) {\n if (cRaiseEnabled) { // Lower the marker & label\n position = me.getProjection().fromLatLngToDivPixel(me.marker_.getPosition());\n position.y += cRaiseOffset;\n me.marker_.setPosition(me.getProjection().fromDivPixelToLatLng(position));\n // This is not the same bouncing style as when the marker portion is dragged,\n // but it will have to do:\n try { // Will fail if running Google Maps API earlier than V3.3\n me.marker_.setAnimation(google.maps.Animation.BOUNCE);\n setTimeout(cStopBounce, 1406);\n } catch (e) {}\n }\n me.crossDiv_.style.display = \"none\";\n me.marker_.setZIndex(cSavedZIndex);\n cIgnoreClick = true; // Set flag to ignore the click event reported after a label drag\n cDraggingLabel = false;\n mEvent.latLng = me.marker_.getPosition();\n google.maps.event.trigger(me.marker_, \"dragend\", mEvent);\n }\n }),\n google.maps.event.addListener(me.marker_.getMap(), \"mousemove\", function (mEvent) {\n var position;\n if (cMouseIsDown) {\n if (cDraggingLabel) {\n // Change the reported location from the mouse position to the marker position:\n mEvent.latLng = new google.maps.LatLng(mEvent.latLng.lat() - cLatOffset, mEvent.latLng.lng() - cLngOffset);\n position = me.getProjection().fromLatLngToDivPixel(mEvent.latLng);\n if (cRaiseEnabled) {\n me.crossDiv_.style.left = position.x + \"px\";\n me.crossDiv_.style.top = position.y + \"px\";\n me.crossDiv_.style.display = \"\";\n position.y -= cRaiseOffset;\n }\n me.marker_.setPosition(me.getProjection().fromDivPixelToLatLng(position));\n if (cRaiseEnabled) { // Don't raise the veil; this hack needed to make MSIE act properly\n me.eventDiv_.style.top = (position.y + cRaiseOffset) + \"px\";\n }\n google.maps.event.trigger(me.marker_, \"drag\", mEvent);\n } else {\n // Calculate offsets from the click point to the marker position:\n cLatOffset = mEvent.latLng.lat() - me.marker_.getPosition().lat();\n cLngOffset = mEvent.latLng.lng() - me.marker_.getPosition().lng();\n cSavedZIndex = me.marker_.getZIndex();\n cStartPosition = me.marker_.getPosition();\n cStartCenter = me.marker_.getMap().getCenter();\n cRaiseEnabled = me.marker_.get(\"raiseOnDrag\");\n cDraggingLabel = true;\n me.marker_.setZIndex(1000000); // Moves the marker & label to the foreground during a drag\n mEvent.latLng = me.marker_.getPosition();\n google.maps.event.trigger(me.marker_, \"dragstart\", mEvent);\n }\n }\n }),\n google.maps.event.addDomListener(document, \"keydown\", function (e) {\n if (cDraggingLabel) {\n if (e.keyCode === 27) { // Esc key\n cRaiseEnabled = false;\n me.marker_.setPosition(cStartPosition);\n me.marker_.getMap().setCenter(cStartCenter);\n google.maps.event.trigger(document, \"mouseup\", e);\n }\n }\n }),\n google.maps.event.addDomListener(this.eventDiv_, \"click\", function (e) {\n if (me.marker_.getDraggable() || me.marker_.getClickable()) {\n if (cIgnoreClick) { // Ignore the click reported when a label drag ends\n cIgnoreClick = false;\n } else {\n google.maps.event.trigger(me.marker_, \"click\", e);\n cAbortEvent(e); // Prevent click from being passed on to map\n }\n }\n }),\n google.maps.event.addDomListener(this.eventDiv_, \"dblclick\", function (e) {\n if (me.marker_.getDraggable() || me.marker_.getClickable()) {\n google.maps.event.trigger(me.marker_, \"dblclick\", e);\n cAbortEvent(e); // Prevent map zoom when double-clicking on a label\n }\n }),\n google.maps.event.addListener(this.marker_, \"dragstart\", function (mEvent) {\n if (!cDraggingLabel) {\n cRaiseEnabled = this.get(\"raiseOnDrag\");\n }\n }),\n google.maps.event.addListener(this.marker_, \"drag\", function (mEvent) {\n if (!cDraggingLabel) {\n if (cRaiseEnabled) {\n me.setPosition(cRaiseOffset);\n // During a drag, the marker's z-index is temporarily set to 1000000 to\n // ensure it appears above all other markers. Also set the label's z-index\n // to 1000000 (plus or minus 1 depending on whether the label is supposed\n // to be above or below the marker).\n me.labelDiv_.style.zIndex = 1000000 + (this.get(\"labelInBackground\") ? -1 : +1);\n }\n }\n }),\n google.maps.event.addListener(this.marker_, \"dragend\", function (mEvent) {\n if (!cDraggingLabel) {\n if (cRaiseEnabled) {\n me.setPosition(0); // Also restores z-index of label\n }\n }\n }),\n google.maps.event.addListener(this.marker_, \"position_changed\", function () {\n me.setPosition();\n }),\n google.maps.event.addListener(this.marker_, \"zindex_changed\", function () {\n me.setZIndex();\n }),\n google.maps.event.addListener(this.marker_, \"visible_changed\", function () {\n me.setVisible();\n }),\n google.maps.event.addListener(this.marker_, \"labelvisible_changed\", function () {\n me.setVisible();\n }),\n google.maps.event.addListener(this.marker_, \"title_changed\", function () {\n me.setTitle();\n }),\n google.maps.event.addListener(this.marker_, \"labelcontent_changed\", function () {\n me.setContent();\n }),\n google.maps.event.addListener(this.marker_, \"labelanchor_changed\", function () {\n me.setAnchor();\n }),\n google.maps.event.addListener(this.marker_, \"labelclass_changed\", function () {\n me.setStyles();\n }),\n google.maps.event.addListener(this.marker_, \"labelstyle_changed\", function () {\n me.setStyles();\n })\n ];\n};\n\n/**\n * Removes the DIV for the label from the DOM. It also removes all event handlers.\n * This method is called automatically when the marker's setMap(null)
\n * method is called.\n * @private\n */\nMarkerLabel_.prototype.onRemove = function () {\n var i;\n this.labelDiv_.parentNode.removeChild(this.labelDiv_);\n this.eventDiv_.parentNode.removeChild(this.eventDiv_);\n\n // Remove event listeners:\n for (i = 0; i < this.listeners_.length; i++) {\n google.maps.event.removeListener(this.listeners_[i]);\n }\n};\n\n/**\n * Draws the label on the map.\n * @private\n */\nMarkerLabel_.prototype.draw = function () {\n this.setContent();\n this.setTitle();\n this.setStyles();\n};\n\n/**\n * Sets the content of the label.\n * The content can be plain text or an HTML DOM node.\n * @private\n */\nMarkerLabel_.prototype.setContent = function () {\n var content = this.marker_.get(\"labelContent\");\n if (typeof content.nodeType === \"undefined\") {\n this.labelDiv_.innerHTML = content;\n this.eventDiv_.innerHTML = this.labelDiv_.innerHTML;\n } else {\n this.labelDiv_.innerHTML = \"\"; // Remove current content\n this.labelDiv_.appendChild(content);\n content = content.cloneNode(true);\n this.eventDiv_.innerHTML = \"\"; // Remove current content\n this.eventDiv_.appendChild(content);\n }\n};\n\n/**\n * Sets the content of the tool tip for the label. It is\n * always set to be the same as for the marker itself.\n * @private\n */\nMarkerLabel_.prototype.setTitle = function () {\n this.eventDiv_.title = this.marker_.getTitle() || \"\";\n};\n\n/**\n * Sets the style of the label by setting the style sheet and applying\n * other specific styles requested.\n * @private\n */\nMarkerLabel_.prototype.setStyles = function () {\n var i, labelStyle;\n\n // Apply style values from the style sheet defined in the labelClass parameter:\n this.labelDiv_.className = this.marker_.get(\"labelClass\");\n this.eventDiv_.className = this.labelDiv_.className;\n\n // Clear existing inline style values:\n this.labelDiv_.style.cssText = \"\";\n this.eventDiv_.style.cssText = \"\";\n // Apply style values defined in the labelStyle parameter:\n labelStyle = this.marker_.get(\"labelStyle\");\n for (i in labelStyle) {\n if (labelStyle.hasOwnProperty(i)) {\n this.labelDiv_.style[i] = labelStyle[i];\n this.eventDiv_.style[i] = labelStyle[i];\n }\n }\n this.setMandatoryStyles();\n};\n\n/**\n * Sets the mandatory styles to the DIV representing the label as well as to the\n * associated event DIV. This includes setting the DIV position, z-index, and visibility.\n * @private\n */\nMarkerLabel_.prototype.setMandatoryStyles = function () {\n this.labelDiv_.style.position = \"absolute\";\n this.labelDiv_.style.overflow = \"hidden\";\n // Make sure the opacity setting causes the desired effect on MSIE:\n if (typeof this.labelDiv_.style.opacity !== \"undefined\" && this.labelDiv_.style.opacity !== \"\") {\n this.labelDiv_.style.MsFilter = \"\\\"progid:DXImageTransform.Microsoft.Alpha(opacity=\" + (this.labelDiv_.style.opacity * 100) + \")\\\"\";\n this.labelDiv_.style.filter = \"alpha(opacity=\" + (this.labelDiv_.style.opacity * 100) + \")\";\n }\n\n this.eventDiv_.style.position = this.labelDiv_.style.position;\n this.eventDiv_.style.overflow = this.labelDiv_.style.overflow;\n this.eventDiv_.style.opacity = 0.01; // Don't use 0; DIV won't be clickable on MSIE\n this.eventDiv_.style.MsFilter = \"\\\"progid:DXImageTransform.Microsoft.Alpha(opacity=1)\\\"\";\n this.eventDiv_.style.filter = \"alpha(opacity=1)\"; // For MSIE\n\n this.setAnchor();\n this.setPosition(); // This also updates z-index, if necessary.\n this.setVisible();\n};\n\n/**\n * Sets the anchor point of the label.\n * @private\n */\nMarkerLabel_.prototype.setAnchor = function () {\n var anchor = this.marker_.get(\"labelAnchor\");\n this.labelDiv_.style.marginLeft = -anchor.x + \"px\";\n this.labelDiv_.style.marginTop = -anchor.y + \"px\";\n this.eventDiv_.style.marginLeft = -anchor.x + \"px\";\n this.eventDiv_.style.marginTop = -anchor.y + \"px\";\n};\n\n/**\n * Sets the position of the label. The z-index is also updated, if necessary.\n * @private\n */\nMarkerLabel_.prototype.setPosition = function (yOffset) {\n var position = this.getProjection().fromLatLngToDivPixel(this.marker_.getPosition());\n if (typeof yOffset === \"undefined\") {\n yOffset = 0;\n }\n this.labelDiv_.style.left = Math.round(position.x) + \"px\";\n this.labelDiv_.style.top = Math.round(position.y - yOffset) + \"px\";\n this.eventDiv_.style.left = this.labelDiv_.style.left;\n this.eventDiv_.style.top = this.labelDiv_.style.top;\n\n this.setZIndex();\n};\n\n/**\n * Sets the z-index of the label. If the marker's z-index property has not been defined, the z-index\n * of the label is set to the vertical coordinate of the label. This is in keeping with the default\n * stacking order for Google Maps: markers to the south are in front of markers to the north.\n * @private\n */\nMarkerLabel_.prototype.setZIndex = function () {\n var zAdjust = (this.marker_.get(\"labelInBackground\") ? -1 : +1);\n if (typeof this.marker_.getZIndex() === \"undefined\") {\n this.labelDiv_.style.zIndex = parseInt(this.labelDiv_.style.top, 10) + zAdjust;\n this.eventDiv_.style.zIndex = this.labelDiv_.style.zIndex;\n } else {\n this.labelDiv_.style.zIndex = this.marker_.getZIndex() + zAdjust;\n this.eventDiv_.style.zIndex = this.labelDiv_.style.zIndex;\n }\n};\n\n/**\n * Sets the visibility of the label. The label is visible only if the marker itself is\n * visible (i.e., its visible property is true) and the labelVisible property is true.\n * @private\n */\nMarkerLabel_.prototype.setVisible = function () {\n if (this.marker_.get(\"labelVisible\")) {\n this.labelDiv_.style.display = this.marker_.getVisible() ? \"block\" : \"none\";\n } else {\n this.labelDiv_.style.display = \"none\";\n }\n this.eventDiv_.style.display = this.labelDiv_.style.display;\n};\n\n/**\n * @name MarkerWithLabelOptions\n * @class This class represents the optional parameter passed to the {@link MarkerWithLabel} constructor.\n * The properties available are the same as for google.maps.Marker
with the addition\n * of the properties listed below. To change any of these additional properties after the labeled\n * marker has been created, call google.maps.Marker.set(propertyName, propertyValue)
.\n *
\n * When any of these properties changes, a property changed event is fired. The names of these\n * events are derived from the name of the property and are of the form propertyname_changed
.\n * For example, if the content of the label changes, a labelcontent_changed
event\n * is fired.\n *
\n * @property {string|Node} [labelContent] The content of the label (plain text or an HTML DOM node).\n * @property {Point} [labelAnchor] By default, a label is drawn with its anchor point at (0,0) so\n * that its top left corner is positioned at the anchor point of the associated marker. Use this\n * property to change the anchor point of the label. For example, to center a 50px-wide label\n * beneath a marker, specify a labelAnchor
of google.maps.Point(25, 0)
.\n * (Note: x-values increase to the right and y-values increase to the top.)\n * @property {string} [labelClass] The name of the CSS class defining the styles for the label.\n * Note that style values for position
, overflow
, top
,\n * left
, zIndex
, display
, marginLeft
, and\n * marginTop
are ignored; these styles are for internal use only.\n * @property {Object} [labelStyle] An object literal whose properties define specific CSS\n * style values to be applied to the label. Style values defined here override those that may\n * be defined in the labelClass
style sheet. If this property is changed after the\n * label has been created, all previously set styles (except those defined in the style sheet)\n * are removed from the label before the new style values are applied.\n * Note that style values for position
, overflow
, top
,\n * left
, zIndex
, display
, marginLeft
, and\n * marginTop
are ignored; these styles are for internal use only.\n * @property {boolean} [labelInBackground] A flag indicating whether a label that overlaps its\n * associated marker should appear in the background (i.e., in a plane below the marker).\n * The default is false
, which causes the label to appear in the foreground.\n * @property {boolean} [labelVisible] A flag indicating whether the label is to be visible.\n * The default is true
. Note that even if labelVisible
is\n * true
, the label will not be visible unless the associated marker is also\n * visible (i.e., unless the marker's visible
property is true
).\n * @property {boolean} [raiseOnDrag] A flag indicating whether the label and marker are to be\n * raised when the marker is dragged. The default is true
. If a draggable marker is\n * being created and a version of Google Maps API earlier than V3.3 is being used, this property\n * must be set to false
.\n * @property {boolean} [optimized] A flag indicating whether rendering is to be optimized for the\n * marker. Important: The optimized rendering technique is not supported by MarkerWithLabel,\n * so the value of this parameter is always forced to false
.\n * @property {string} [crossImage=\"http://maps.gstatic.com/intl/en_us/mapfiles/drag_cross_67_16.png\"]\n * The URL of the cross image to be displayed while dragging a marker.\n * @property {string} [handCursor=\"http://maps.gstatic.com/intl/en_us/mapfiles/closedhand_8_8.cur\"]\n * The URL of the cursor to be displayed while dragging a marker.\n */\n/**\n * Creates a MarkerWithLabel with the options specified in {@link MarkerWithLabelOptions}.\n * @constructor\n * @param {MarkerWithLabelOptions} [opt_options] The optional parameters.\n */\nfunction MarkerWithLabel(opt_options) {\n opt_options = opt_options || {};\n opt_options.labelContent = opt_options.labelContent || \"\";\n opt_options.labelAnchor = opt_options.labelAnchor || new google.maps.Point(0, 0);\n opt_options.labelClass = opt_options.labelClass || \"markerLabels\";\n opt_options.labelStyle = opt_options.labelStyle || {};\n opt_options.labelInBackground = opt_options.labelInBackground || false;\n if (typeof opt_options.labelVisible === \"undefined\") {\n opt_options.labelVisible = true;\n }\n if (typeof opt_options.raiseOnDrag === \"undefined\") {\n opt_options.raiseOnDrag = true;\n }\n if (typeof opt_options.clickable === \"undefined\") {\n opt_options.clickable = true;\n }\n if (typeof opt_options.draggable === \"undefined\") {\n opt_options.draggable = false;\n }\n if (typeof opt_options.optimized === \"undefined\") {\n opt_options.optimized = false;\n }\n opt_options.crossImage = opt_options.crossImage || \"http\" + (document.location.protocol === \"https:\" ? \"s\" : \"\") + \"://maps.gstatic.com/intl/en_us/mapfiles/drag_cross_67_16.png\";\n opt_options.handCursor = opt_options.handCursor || \"http\" + (document.location.protocol === \"https:\" ? \"s\" : \"\") + \"://maps.gstatic.com/intl/en_us/mapfiles/closedhand_8_8.cur\";\n opt_options.optimized = false; // Optimized rendering is not supported\n\n this.label = new MarkerLabel_(this, opt_options.crossImage, opt_options.handCursor); // Bind the label to the marker\n\n // Call the parent constructor. It calls Marker.setValues to initialize, so all\n // the new parameters are conveniently saved and can be accessed with get/set.\n // Marker.set triggers a property changed event (called \"propertyname_changed\")\n // that the marker label listens for in order to react to state changes.\n google.maps.Marker.apply(this, arguments);\n}\n\ninherits(MarkerWithLabel, google.maps.Marker);\n\n/**\n * Overrides the standard Marker setMap function.\n * @param {Map} theMap The map to which the marker is to be added.\n * @private\n */\nMarkerWithLabel.prototype.setMap = function (theMap) {\n\n // Call the inherited function...\n google.maps.Marker.prototype.setMap.apply(this, arguments);\n\n // ... then deal with the label:\n this.label.setMap(theMap);\n};\n\n// ==ClosureCompiler==\n// @compilation_level ADVANCED_OPTIMIZATIONS\n// @externs_url http://closure-compiler.googlecode.com/svn/trunk/contrib/externs/maps/google_maps_api_v3.js\n// @output_wrapper (function() {%output%})();\n// ==/ClosureCompiler==\n\n/**\n * @license\n * Copyright 2013 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * A RichMarker that allows any HTML/DOM to be added to a map and be draggable.\n *\n * @param {Object.MarkerClusterer
begins\n * clustering markers.\n * @name MarkerClusterer#clusteringbegin\n * @param {MarkerClusterer} mc The MarkerClusterer whose markers are being clustered.\n * @event\n */\n google.maps.event.trigger(this, 'clusteringbegin', this);\n\n if (typeof this.timerRefStatic !== 'undefined') {\n clearTimeout(this.timerRefStatic);\n delete this.timerRefStatic;\n }\n }\n\n // Get our current map view bounds.\n // Create a new bounds object so we don't affect the map.\n //\n // See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:\n if (this.getMap().getZoom() > 3) {\n mapBounds = new google.maps.LatLngBounds(this.getMap().getBounds().getSouthWest(),\n this.getMap().getBounds().getNorthEast());\n } else {\n mapBounds = new google.maps.LatLngBounds(new google.maps.LatLng(85.02070771743472, -178.48388434375), new google.maps.LatLng(-85.08136444384544, 178.00048865625));\n }\n var bounds = this.getExtendedBounds(mapBounds);\n\n var iLast = Math.min(iFirst + this.batchSize_, this.markers_.length);\n\n var _ms = this.markers_.values();\n for (i = iFirst; i < iLast; i++) {\n marker = _ms[i];\n if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {\n if (!this.ignoreHidden_ || (this.ignoreHidden_ && marker.getVisible())) {\n this.addToClosestCluster_(marker);\n }\n }\n }\n\n if (iLast < this.markers_.length) {\n this.timerRefStatic = setTimeout(function () {\n cMarkerClusterer.createClusters_(iLast);\n }, 0);\n } else {\n // custom addition by ui-gmap\n // update icon for all clusters\n for (i = 0; i < this.clusters_.length; i++) {\n this.clusters_[i].updateIcon_();\n }\n\n delete this.timerRefStatic;\n\n /**\n * This event is fired when the MarkerClusterer
stops\n * clustering markers.\n * @name MarkerClusterer#clusteringend\n * @param {MarkerClusterer} mc The MarkerClusterer whose markers are being clustered.\n * @event\n */\n google.maps.event.trigger(this, 'clusteringend', this);\n }\n };\n\n /**\n * Adds a marker to a cluster, or creates a new cluster.\n *\n * @param {google.maps.Marker} marker The marker to add.\n */\n NgMapMarkerClusterer.prototype.addToClosestCluster_ = function (marker) {\n var i, d, cluster, center;\n var distance = 40000; // Some large number\n var clusterToAddTo = null;\n for (i = 0; i < this.clusters_.length; i++) {\n cluster = this.clusters_[i];\n center = cluster.getCenter();\n if (center) {\n d = this.distanceBetweenPoints_(center, marker.getPosition());\n if (d < distance) {\n distance = d;\n clusterToAddTo = cluster;\n }\n }\n }\n\n if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)) {\n clusterToAddTo.addMarker(marker);\n } else {\n cluster = new NgMapCluster(this);\n cluster.addMarker(marker);\n this.clusters_.push(cluster);\n }\n };\n\n /**\n * Redraws all the clusters.\n */\n NgMapMarkerClusterer.prototype.redraw_ = function () {\n this.createClusters_(0);\n };\n\n\n /**\n * Removes all clusters from the map. The markers are also removed from the map\n * if opt_hide
is set to true
.\n *\n * @param {boolean} [opt_hide] Set to true
to also remove the markers\n * from the map.\n */\n NgMapMarkerClusterer.prototype.resetViewport_ = function (opt_hide) {\n var i, marker;\n // Remove all the clusters\n for (i = 0; i < this.clusters_.length; i++) {\n this.clusters_[i].remove();\n }\n this.clusters_ = [];\n\n // Reset the markers to not be added and to be removed from the map.\n this.markers_.each(function (marker) {\n marker.isAdded = false;\n if (opt_hide) {\n marker.setMap(null);\n }\n });\n };\n\n /**\n * Extends an object's prototype by another's.\n *\n * @param {Object} obj1 The object to be extended.\n * @param {Object} obj2 The object to extend with.\n * @return {Object} The new extended object.\n * @ignore\n */\n NgMapMarkerClusterer.prototype.extend = function (obj1, obj2) {\n return (function (object) {\n var property;\n for (property in object.prototype) {\n if (property !== 'constructor')\n this.prototype[property] = object.prototype[property];\n }\n return this;\n }).apply(obj1, [obj2]);\n };\n ////////////////////////////////////////////////////////////////////////////////\n /*\n Other overrides relevant to MarkerClusterPlus\n */\n ////////////////////////////////////////////////////////////////////////////////\n /**\n * Positions and shows the icon.\n */\n ClusterIcon.prototype.show = function () {\n if (this.div_) {\n var img = \"\";\n // NOTE: values must be specified in px units\n var bp = this.backgroundPosition_.split(\" \");\n var spriteH = parseInt(bp[0].trim(), 10);\n var spriteV = parseInt(bp[1].trim(), 10);\n var pos = this.getPosFromLatLng_(this.center_);\n this.div_.style.cssText = this.createCss(pos);\n img = \"\";\n this.div_.innerHTML = img + \"