{"version":3,"file":"2028.js","sources":["webpack://frontend/./node_modules/@google/markerclusterer/src/markerclusterer.js","webpack://frontend/../../../node_modules/.pnpm/supercluster@8.0.1/node_modules/supercluster/index.js","webpack://frontend/../src/useLoadScript.tsx","webpack://frontend/../../../node_modules/.pnpm/@babel+runtime@7.25.7/node_modules/@babel/runtime/helpers/esm/typeof.js","webpack://frontend/../../../node_modules/.pnpm/@babel+runtime@7.25.7/node_modules/@babel/runtime/helpers/esm/defineProperty.js","webpack://frontend/../../../node_modules/.pnpm/@babel+runtime@7.25.7/node_modules/@babel/runtime/helpers/esm/toPropertyKey.js","webpack://frontend/../../../node_modules/.pnpm/@babel+runtime@7.25.7/node_modules/@babel/runtime/helpers/esm/toPrimitive.js","webpack://frontend/../../../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/invariant.js","webpack://frontend/../src/map-context.ts","webpack://frontend/../src/utils/helper.ts","webpack://frontend/../src/utils/reduce.ts","webpack://frontend/../src/utils/foreach.ts","webpack://frontend/../../../node_modules/.pnpm/@babel+runtime@7.25.7/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js","webpack://frontend/../src/utils/make-load-script-url.ts","webpack://frontend/../src/GoogleMap.tsx","webpack://frontend/../src/utils/isbrowser.ts","webpack://frontend/../src/utils/injectscript.ts","webpack://frontend/../src/utils/prevent-google-fonts.ts","webpack://frontend/../src/LoadScript.tsx","webpack://frontend/../src/LoadScriptNext.tsx","webpack://frontend/../../../node_modules/.pnpm/@googlemaps+js-api-loader@1.16.8/node_modules/@googlemaps/js-api-loader/dist/index.mjs","webpack://frontend/../src/components/maps/TrafficLayer.tsx","webpack://frontend/../src/components/maps/BicyclingLayer.tsx","webpack://frontend/../src/components/maps/TransitLayer.tsx","webpack://frontend/../src/components/drawing/DrawingManager.tsx","webpack://frontend/../src/components/drawing/Marker.tsx","webpack://frontend/../../../node_modules/.pnpm/@react-google-maps+marker-clusterer@2.20.0/node_modules/@react-google-maps/marker-clusterer/dist/esm.js","webpack://frontend/../src/components/addons/MarkerClusterer.tsx","webpack://frontend/../../../node_modules/.pnpm/@react-google-maps+infobox@2.20.0/node_modules/@react-google-maps/infobox/dist/esm.js","webpack://frontend/../src/components/addons/InfoBox.tsx","webpack://frontend/../../../node_modules/.pnpm/@babel+runtime@7.25.7/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js","webpack://frontend/../../../node_modules/.pnpm/@babel+runtime@7.25.7/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js","webpack://frontend/../../../node_modules/.pnpm/kdbush@4.0.2/node_modules/kdbush/index.js","webpack://frontend/../src/components/drawing/InfoWindow.tsx","webpack://frontend/../src/components/drawing/Polyline.tsx","webpack://frontend/../src/components/drawing/Polygon.tsx","webpack://frontend/../src/components/drawing/Rectangle.tsx","webpack://frontend/../src/components/drawing/Circle.tsx","webpack://frontend/../src/components/drawing/Data.tsx","webpack://frontend/../src/components/kml/KmlLayer.tsx","webpack://frontend/../src/components/dom/dom-helper.ts","webpack://frontend/../src/components/dom/OverlayView.tsx","webpack://frontend/../src/components/overlays/GroundOverlay.tsx","webpack://frontend/../src/utils/noop.ts","webpack://frontend/../src/components/heatmap/HeatmapLayer.tsx","webpack://frontend/../src/components/streetview/StreetViewPanorama.tsx","webpack://frontend/../src/components/streetview/StreetViewService.tsx","webpack://frontend/../src/components/directions/DirectionsService.tsx","webpack://frontend/../src/components/directions/DirectionsRenderer.tsx","webpack://frontend/../src/components/distance-matrix/DistanceMatrixService.tsx","webpack://frontend/../src/components/places/StandaloneSearchBox.tsx","webpack://frontend/../src/components/places/Autocomplete.tsx","webpack://frontend/../src/logic/storeFactory.ts","webpack://frontend/../src/constants.ts","webpack://frontend/../src/StateMachineContext.tsx","webpack://frontend/../src/stateMachine.tsx","webpack://frontend/./node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["// ==ClosureCompiler==\n// @compilation_level ADVANCED_OPTIMIZATIONS\n// @externs_url http://closure-compiler.googlecode.com/svn/trunk/contrib/externs/maps/google_maps_api_v3_3.js\n// ==/ClosureCompiler==\n\n/**\n * @name MarkerClusterer for Google Maps v3\n * @version version 1.0.3\n * @author Luke Mahe\n * @fileoverview\n * The library creates and manages per-zoom-level clusters for large amounts of\n * markers.\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 * A Marker Clusterer that clusters markers.\n *\n * @param {google.maps.Map} map The Google map to attach to.\n * @param {Array.=} opt_markers Optional markers to add to\n * the cluster.\n * @param {Object=} opt_options support the following options:\n * 'gridSize': (number) The grid size of a cluster in pixels.\n * 'maxZoom': (number) The maximum zoom level that a marker can be part of a\n * cluster.\n * 'zoomOnClick': (boolean) Whether the default behaviour of clicking on a\n * cluster is to zoom into it.\n * 'imagePath': (string) The base URL where the images representing\n * clusters will be found. The full URL will be:\n * {imagePath}[1-5].{imageExtension}\n * Default: '../images/m'.\n * 'imageExtension': (string) The suffix for images URL representing\n * clusters will be found. See _imagePath_ for details.\n * Default: 'png'.\n * 'averageCenter': (boolean) Whether the center of each cluster should be\n * the average of all markers in the cluster.\n * 'minimumClusterSize': (number) The minimum number of markers to be in a\n * cluster before the markers are hidden and a count\n * is shown.\n * 'styles': (object) An object that has style properties:\n * 'url': (string) The image url.\n * 'height': (number) The image height.\n * 'width': (number) The image width.\n * 'anchor': (Array) The anchor position of the label text.\n * 'textColor': (string) The text color.\n * 'textSize': (number) The text size.\n * 'backgroundPosition': (string) The position of the backgound x, y.\n * @constructor\n * @extends google.maps.OverlayView\n */\nfunction MarkerClusterer(map, opt_markers, opt_options) {\n // MarkerClusterer implements google.maps.OverlayView interface. We use the\n // extend function to extend MarkerClusterer with google.maps.OverlayView\n // because it might not always be available when the code is defined so we\n // look for it at the last possible moment. If it doesn't exist now then\n // there is no point going ahead :)\n this.extend(MarkerClusterer, google.maps.OverlayView);\n this.map_ = map;\n\n /**\n * @type {Array.}\n * @private\n */\n this.markers_ = [];\n\n /**\n * @type {Array.}\n */\n this.clusters_ = [];\n\n this.sizes = [53, 56, 66, 78, 90];\n\n /**\n * @private\n */\n this.styles_ = [];\n\n /**\n * @type {boolean}\n * @private\n */\n this.ready_ = false;\n\n var options = opt_options || {};\n\n /**\n * @type {number}\n * @private\n */\n this.gridSize_ = options['gridSize'] || 60;\n\n /**\n * @private\n */\n this.minClusterSize_ = options['minimumClusterSize'] || 2;\n\n\n /**\n * @type {?number}\n * @private\n */\n this.maxZoom_ = options['maxZoom'] || null;\n\n this.styles_ = options['styles'] || [];\n\n /**\n * @type {string}\n * @private\n */\n this.imagePath_ = options['imagePath'] ||\n this.MARKER_CLUSTER_IMAGE_PATH_;\n\n /**\n * @type {string}\n * @private\n */\n this.imageExtension_ = options['imageExtension'] ||\n this.MARKER_CLUSTER_IMAGE_EXTENSION_;\n\n /**\n * @type {boolean}\n * @private\n */\n this.zoomOnClick_ = true;\n\n if (options['zoomOnClick'] != undefined) {\n this.zoomOnClick_ = options['zoomOnClick'];\n }\n\n /**\n * @type {boolean}\n * @private\n */\n this.averageCenter_ = false;\n\n if (options['averageCenter'] != undefined) {\n this.averageCenter_ = options['averageCenter'];\n }\n\n this.setupStyles_();\n\n this.setMap(map);\n\n /**\n * @type {number}\n * @private\n */\n this.prevZoom_ = this.map_.getZoom();\n\n // Add the map event listeners\n var that = this;\n google.maps.event.addListener(this.map_, 'zoom_changed', function() {\n // Determines map type and prevent illegal zoom levels\n var zoom = that.map_.getZoom();\n var minZoom = that.map_.minZoom || 0;\n var maxZoom = Math.min(that.map_.maxZoom || 100,\n that.map_.mapTypes[that.map_.getMapTypeId()].maxZoom);\n zoom = Math.min(Math.max(zoom,minZoom),maxZoom);\n\n if (that.prevZoom_ != zoom) {\n that.prevZoom_ = zoom;\n that.resetViewport();\n }\n });\n\n google.maps.event.addListener(this.map_, 'idle', function() {\n that.redraw();\n });\n\n // Finally, add the markers\n if (opt_markers && (opt_markers.length || Object.keys(opt_markers).length)) {\n this.addMarkers(opt_markers, false);\n }\n}\n\n\n/**\n * The marker cluster image path.\n *\n * @type {string}\n * @private\n */\nMarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = '../images/m';\n\n\n/**\n * The marker cluster image path.\n *\n * @type {string}\n * @private\n */\nMarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_EXTENSION_ = 'png';\n\n\n/**\n * Extends a objects prototype by anothers.\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 for (var property in object.prototype) {\n this.prototype[property] = object.prototype[property];\n }\n return this;\n }).apply(obj1, [obj2]);\n};\n\n\n/**\n * Implementaion of the interface method.\n * @ignore\n */\nMarkerClusterer.prototype.onAdd = function() {\n this.setReady_(true);\n};\n\n/**\n * Implementaion of the interface method.\n * @ignore\n */\nMarkerClusterer.prototype.draw = function() {};\n\n/**\n * Sets up the styles object.\n *\n * @private\n */\nMarkerClusterer.prototype.setupStyles_ = function() {\n if (this.styles_.length) {\n return;\n }\n\n for (var i = 0, size; size = this.sizes[i]; i++) {\n this.styles_.push({\n url: this.imagePath_ + (i + 1) + '.' + this.imageExtension_,\n height: size,\n width: size\n });\n }\n};\n\n/**\n * Fit the map to the bounds of the markers in the clusterer.\n */\nMarkerClusterer.prototype.fitMapToMarkers = function() {\n var markers = this.getMarkers();\n var bounds = new google.maps.LatLngBounds();\n for (var i = 0, marker; marker = markers[i]; i++) {\n bounds.extend(marker.getPosition());\n }\n\n this.map_.fitBounds(bounds);\n};\n\n\n/**\n * Sets the styles.\n *\n * @param {Object} styles The style to set.\n */\nMarkerClusterer.prototype.setStyles = function(styles) {\n this.styles_ = styles;\n};\n\n\n/**\n * Gets the styles.\n *\n * @return {Object} The styles object.\n */\nMarkerClusterer.prototype.getStyles = function() {\n return this.styles_;\n};\n\n\n/**\n * Whether zoom on click is set.\n *\n * @return {boolean} True if zoomOnClick_ is set.\n */\nMarkerClusterer.prototype.isZoomOnClick = function() {\n return this.zoomOnClick_;\n};\n\n/**\n * Whether average center is set.\n *\n * @return {boolean} True if averageCenter_ is set.\n */\nMarkerClusterer.prototype.isAverageCenter = function() {\n return this.averageCenter_;\n};\n\n\n/**\n * Returns the array of markers in the clusterer.\n *\n * @return {Array.} The markers.\n */\nMarkerClusterer.prototype.getMarkers = function() {\n return this.markers_;\n};\n\n\n/**\n * Returns the number of markers in 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 * Sets the max zoom for the clusterer.\n *\n * @param {number} maxZoom The max zoom level.\n */\nMarkerClusterer.prototype.setMaxZoom = function(maxZoom) {\n this.maxZoom_ = maxZoom;\n};\n\n\n/**\n * Gets the max zoom for the clusterer.\n *\n * @return {number} The max zoom level.\n */\nMarkerClusterer.prototype.getMaxZoom = function() {\n return this.maxZoom_;\n};\n\n\n/**\n * The function for calculating the cluster icon image.\n *\n * @param {Array.} markers The markers in the clusterer.\n * @param {number} numStyles The number of styles available.\n * @return {Object} A object properties: 'text' (string) and 'index' (number).\n * @private\n */\nMarkerClusterer.prototype.calculator_ = function(markers, numStyles) {\n var index = 0;\n var count = markers.length;\n var dv = count;\n while (dv !== 0) {\n dv = parseInt(dv / 10, 10);\n index++;\n }\n\n index = Math.min(index, numStyles);\n return {\n text: count,\n index: index\n };\n};\n\n\n/**\n * Set the calculator function.\n *\n * @param {function(Array, number)} calculator The function to set as the\n * calculator. The function should return a object properties:\n * 'text' (string) and 'index' (number).\n *\n */\nMarkerClusterer.prototype.setCalculator = function(calculator) {\n this.calculator_ = calculator;\n};\n\n\n/**\n * Get the calculator function.\n *\n * @return {function(Array, number)} the calculator function.\n */\nMarkerClusterer.prototype.getCalculator = function() {\n return this.calculator_;\n};\n\n\n/**\n * Add an array of markers to the clusterer.\n *\n * @param {Array.} markers The markers to add.\n * @param {boolean=} opt_nodraw Whether to redraw the clusters.\n */\nMarkerClusterer.prototype.addMarkers = function(markers, opt_nodraw) {\n if (markers.length) {\n for (var i = 0, marker; marker = markers[i]; i++) {\n this.pushMarkerTo_(marker);\n }\n } else if (Object.keys(markers).length) {\n for (var marker in markers) {\n this.pushMarkerTo_(markers[marker]);\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 * @private\n */\nMarkerClusterer.prototype.pushMarkerTo_ = function(marker) {\n marker.isAdded = false;\n if (marker['draggable']) {\n // If the marker is draggable add a listener so we update the clusters on\n // the drag end.\n var that = this;\n google.maps.event.addListener(marker, 'dragend', function() {\n marker.isAdded = false;\n that.repaint();\n });\n }\n this.markers_.push(marker);\n};\n\n\n/**\n * Adds a marker to the clusterer and redraws if needed.\n *\n * @param {google.maps.Marker} marker The marker to add.\n * @param {boolean=} opt_nodraw Whether to redraw the clusters.\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 * 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 * @private\n */\nMarkerClusterer.prototype.removeMarker_ = function(marker) {\n var index = -1;\n if (this.markers_.indexOf) {\n index = this.markers_.indexOf(marker);\n } else {\n for (var i = 0, m; m = this.markers_[i]; i++) {\n if (m == marker) {\n index = i;\n break;\n }\n }\n }\n\n if (index == -1) {\n // Marker is not in our list of markers.\n return false;\n }\n\n marker.setMap(null);\n\n this.markers_.splice(index, 1);\n\n return true;\n};\n\n\n/**\n * Remove a marker from the cluster.\n *\n * @param {google.maps.Marker} marker The marker to remove.\n * @param {boolean=} opt_nodraw Optional boolean to force no redraw.\n * @return {boolean} True if the marker was removed.\n */\nMarkerClusterer.prototype.removeMarker = function(marker, opt_nodraw) {\n var removed = this.removeMarker_(marker);\n\n if (!opt_nodraw && removed) {\n this.resetViewport();\n this.redraw();\n return true;\n } else {\n return false;\n }\n};\n\n\n/**\n * Removes an array of markers from the cluster.\n *\n * @param {Array.} markers The markers to remove.\n * @param {boolean=} opt_nodraw Optional boolean to force no redraw.\n */\nMarkerClusterer.prototype.removeMarkers = function(markers, opt_nodraw) {\n // create a local copy of markers if required\n // (removeMarker_ modifies the getMarkers() array in place)\n var markersCopy = markers === this.getMarkers() ? markers.slice() : markers;\n var removed = false;\n\n for (var i = 0, marker; marker = markersCopy[i]; i++) {\n var r = this.removeMarker_(marker);\n removed = removed || r;\n }\n\n if (!opt_nodraw && removed) {\n this.resetViewport();\n this.redraw();\n return true;\n }\n};\n\n\n/**\n * Sets the clusterer's ready state.\n *\n * @param {boolean} ready The state.\n * @private\n */\nMarkerClusterer.prototype.setReady_ = function(ready) {\n if (!this.ready_) {\n this.ready_ = ready;\n this.createClusters_();\n }\n};\n\n\n/**\n * Returns the number of clusters in the clusterer.\n *\n * @return {number} The number of clusters.\n */\nMarkerClusterer.prototype.getTotalClusters = function() {\n return this.clusters_.length;\n};\n\n\n/**\n * Returns the google map that the clusterer is associated with.\n *\n * @return {google.maps.Map} The map.\n */\nMarkerClusterer.prototype.getMap = function() {\n return this.map_;\n};\n\n\n/**\n * Sets the google map that the clusterer is associated with.\n *\n * @param {google.maps.Map} map The map.\n */\nMarkerClusterer.prototype.setMap = function(map) {\n this.map_ = map;\n};\n\n\n/**\n * Returns the size of the grid.\n *\n * @return {number} The grid size.\n */\nMarkerClusterer.prototype.getGridSize = function() {\n return this.gridSize_;\n};\n\n\n/**\n * Sets the size of the grid.\n *\n * @param {number} size The grid size.\n */\nMarkerClusterer.prototype.setGridSize = function(size) {\n this.gridSize_ = size;\n};\n\n\n/**\n * Returns the min cluster size.\n *\n * @return {number} The grid size.\n */\nMarkerClusterer.prototype.getMinClusterSize = function() {\n return this.minClusterSize_;\n};\n\n/**\n * Sets the min cluster size.\n *\n * @param {number} size The grid size.\n */\nMarkerClusterer.prototype.setMinClusterSize = function(size) {\n this.minClusterSize_ = size;\n};\n\n\n/**\n * Extends a bounds object by the grid size.\n *\n * @param {google.maps.LatLngBounds} bounds The bounds to extend.\n * @return {google.maps.LatLngBounds} The extended bounds.\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 * Determins 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 * @private\n */\nMarkerClusterer.prototype.isMarkerInBounds_ = function(marker, bounds) {\n return bounds.contains(marker.getPosition());\n};\n\n\n/**\n * Clears all clusters and markers from the clusterer.\n */\nMarkerClusterer.prototype.clearMarkers = function() {\n this.resetViewport(true);\n\n // Set the markers a empty array.\n this.markers_ = [];\n};\n\n\n/**\n * Clears all existing clusters and recreates them.\n * @param {boolean} opt_hide To also hide the marker.\n */\nMarkerClusterer.prototype.resetViewport = function(opt_hide) {\n // Remove all the clusters\n for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {\n cluster.remove();\n }\n\n // Reset the markers to not be added and to be invisible.\n for (var i = 0, marker; marker = this.markers_[i]; i++) {\n marker.isAdded = false;\n if (opt_hide) {\n marker.setMap(null);\n }\n }\n\n this.clusters_ = [];\n};\n\n/**\n *\n */\nMarkerClusterer.prototype.repaint = function() {\n var oldClusters = this.clusters_.slice();\n this.clusters_.length = 0;\n this.resetViewport();\n this.redraw();\n\n // Remove the old clusters.\n // Do it in a timeout so the other clusters have been drawn first.\n window.setTimeout(function() {\n for (var i = 0, cluster; cluster = oldClusters[i]; i++) {\n cluster.remove();\n }\n }, 0);\n};\n\n\n/**\n * Redraws the clusters.\n */\nMarkerClusterer.prototype.redraw = function() {\n this.createClusters_();\n};\n\n\n/**\n * Calculates the distance between two latlng locations in km.\n * @see http://www.movable-type.co.uk/scripts/latlong.html\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 * @private\n*/\nMarkerClusterer.prototype.distanceBetweenPoints_ = function(p1, p2) {\n if (!p1 || !p2) {\n return 0;\n }\n\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 * Add a marker to a cluster, or creates a new cluster.\n *\n * @param {google.maps.Marker} marker The marker to add.\n * @private\n */\nMarkerClusterer.prototype.addToClosestCluster_ = function(marker) {\n var distance = 40000; // Some large number\n var clusterToAddTo = null;\n var pos = marker.getPosition();\n for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {\n var center = cluster.getCenter();\n if (center) {\n var 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 var cluster = new Cluster(this);\n cluster.addMarker(marker);\n this.clusters_.push(cluster);\n }\n};\n\n\n/**\n * Creates the clusters.\n *\n * @private\n */\nMarkerClusterer.prototype.createClusters_ = function() {\n if (!this.ready_) {\n return;\n }\n\n // Get our current map view bounds.\n // Create a new bounds object so we don't affect the map.\n var mapBounds = new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(),\n this.map_.getBounds().getNorthEast());\n var bounds = this.getExtendedBounds(mapBounds);\n\n for (var i = 0, marker; marker = this.markers_[i]; i++) {\n if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {\n this.addToClosestCluster_(marker);\n }\n }\n};\n\n\n/**\n * A cluster that contains markers.\n *\n * @param {MarkerClusterer} markerClusterer The markerclusterer that this\n * cluster is associated with.\n * @constructor\n * @ignore\n */\nfunction Cluster(markerClusterer) {\n this.markerClusterer_ = markerClusterer;\n this.map_ = markerClusterer.getMap();\n this.gridSize_ = markerClusterer.getGridSize();\n this.minClusterSize_ = markerClusterer.getMinClusterSize();\n this.averageCenter_ = markerClusterer.isAverageCenter();\n this.center_ = null;\n this.markers_ = [];\n this.bounds_ = null;\n this.clusterIcon_ = new ClusterIcon(this, markerClusterer.getStyles(),\n markerClusterer.getGridSize());\n}\n\n/**\n * Determins if a marker is already added to the cluster.\n *\n * @param {google.maps.Marker} marker The marker to check.\n * @return {boolean} True if the marker is already added.\n */\nCluster.prototype.isMarkerAlreadyAdded = function(marker) {\n if (this.markers_.indexOf) {\n return this.markers_.indexOf(marker) != -1;\n } else {\n for (var i = 0, m; m = this.markers_[i]; i++) {\n if (m == marker) {\n return true;\n }\n }\n }\n return false;\n};\n\n\n/**\n * Add a marker the cluster.\n *\n * @param {google.maps.Marker} marker The marker to add.\n * @return {boolean} True if the marker was added.\n */\nCluster.prototype.addMarker = function(marker) {\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 var len = this.markers_.length;\n if (len < this.minClusterSize_ && marker.getMap() != this.map_) {\n // Min cluster size not reached so show the marker.\n marker.setMap(this.map_);\n }\n\n if (len == this.minClusterSize_) {\n // Hide the markers that were showing.\n for (var i = 0; i < len; i++) {\n this.markers_[i].setMap(null);\n }\n }\n\n if (len >= this.minClusterSize_) {\n marker.setMap(null);\n }\n\n this.updateIcon();\n return true;\n};\n\n\n/**\n * Returns the marker clusterer that the cluster is associated with.\n *\n * @return {MarkerClusterer} The associated marker clusterer.\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 */\nCluster.prototype.getBounds = function() {\n var bounds = new google.maps.LatLngBounds(this.center_, this.center_);\n var markers = this.getMarkers();\n for (var i = 0, marker; marker = markers[i]; i++) {\n bounds.extend(marker.getPosition());\n }\n return bounds;\n};\n\n\n/**\n * Removes the cluster\n */\nCluster.prototype.remove = function() {\n this.clusterIcon_.remove();\n this.markers_.length = 0;\n delete this.markers_;\n};\n\n\n/**\n * Returns the number of markers in the cluster.\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 a list of the markers in the cluster.\n *\n * @return {Array.} The markers in the cluster.\n */\nCluster.prototype.getMarkers = function() {\n return this.markers_;\n};\n\n\n/**\n * Returns the center of the cluster.\n *\n * @return {google.maps.LatLng} The cluster center.\n */\nCluster.prototype.getCenter = function() {\n return this.center_;\n};\n\n\n/**\n * Calculated the extended bounds of the cluster with the grid.\n *\n * @private\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 * Determines if a marker lies in the clusters bounds.\n *\n * @param {google.maps.Marker} marker The marker to check.\n * @return {boolean} True if the marker lies in the bounds.\n */\nCluster.prototype.isMarkerInClusterBounds = function(marker) {\n return this.bounds_.contains(marker.getPosition());\n};\n\n\n/**\n * Returns the map that the cluster is associated with.\n *\n * @return {google.maps.Map} The map.\n */\nCluster.prototype.getMap = function() {\n return this.map_;\n};\n\n\n/**\n * Updates the cluster icon\n */\nCluster.prototype.updateIcon = function() {\n var zoom = this.map_.getZoom();\n var mz = this.markerClusterer_.getMaxZoom();\n\n if (mz && zoom > mz) {\n // The zoom is greater than our max zoom so show all the markers in cluster.\n for (var i = 0, marker; marker = this.markers_[i]; i++) {\n marker.setMap(this.map_);\n }\n return;\n }\n\n if (this.markers_.length < 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_.setSums(sums);\n this.clusterIcon_.show();\n};\n\n\n/**\n * A cluster icon\n *\n * @param {Cluster} cluster The cluster to be associated with.\n * @param {Object} styles An object that has style properties:\n * 'url': (string) The image url.\n * 'height': (number) The image height.\n * 'width': (number) The image width.\n * 'anchor': (Array) The anchor position of the label text.\n * 'textColor': (string) The text color.\n * 'textSize': (number) The text size.\n * 'backgroundPosition: (string) The background postition x, y.\n * @param {number=} opt_padding Optional padding to apply to the cluster icon.\n * @constructor\n * @extends google.maps.OverlayView\n * @ignore\n */\nfunction ClusterIcon(cluster, styles, opt_padding) {\n cluster.getMarkerClusterer().extend(ClusterIcon, google.maps.OverlayView);\n\n this.styles_ = styles;\n this.padding_ = opt_padding || 0;\n this.cluster_ = cluster;\n this.center_ = null;\n this.map_ = cluster.getMap();\n this.div_ = null;\n this.sums_ = null;\n this.visible_ = false;\n\n this.setMap(this.map_);\n}\n\n\n/**\n * Triggers the clusterclick event and zoom's if the option is set.\n */\nClusterIcon.prototype.triggerClusterClick = function() {\n var markerClusterer = this.cluster_.getMarkerClusterer();\n\n // Trigger the clusterclick event.\n google.maps.event.trigger(markerClusterer.map_, 'clusterclick', this.cluster_);\n\n if (markerClusterer.isZoomOnClick()) {\n // Zoom into the cluster.\n this.map_.fitBounds(this.cluster_.getBounds());\n }\n};\n\n\n/**\n * Adding the cluster icon to the dom.\n * @ignore\n */\nClusterIcon.prototype.onAdd = function() {\n this.div_ = document.createElement('DIV');\n if (this.visible_) {\n var pos = this.getPosFromLatLng_(this.center_);\n this.div_.style.cssText = this.createCss(pos);\n this.div_.innerHTML = this.sums_.text;\n }\n\n var panes = this.getPanes();\n panes.overlayMouseTarget.appendChild(this.div_);\n\n var that = this;\n google.maps.event.addDomListener(this.div_, 'click', function() {\n that.triggerClusterClick();\n });\n};\n\n\n/**\n * Returns the position to place the div dending on the latlng.\n *\n * @param {google.maps.LatLng} latlng The position in latlng.\n * @return {google.maps.Point} The position in pixels.\n * @private\n */\nClusterIcon.prototype.getPosFromLatLng_ = function(latlng) {\n var pos = this.getProjection().fromLatLngToDivPixel(latlng);\n pos.x -= parseInt(this.width_ / 2, 10);\n pos.y -= parseInt(this.height_ / 2, 10);\n return pos;\n};\n\n\n/**\n * Draw the icon.\n * @ignore\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 this.div_.style.zIndex = google.maps.Marker.MAX_ZINDEX + 1;\n }\n};\n\n\n/**\n * Hide 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 * Position and show the icon.\n */\nClusterIcon.prototype.show = function() {\n if (this.div_) {\n var pos = this.getPosFromLatLng_(this.center_);\n this.div_.style.cssText = this.createCss(pos);\n this.div_.style.display = '';\n }\n this.visible_ = true;\n};\n\n\n/**\n * Remove the icon from the map\n */\nClusterIcon.prototype.remove = function() {\n this.setMap(null);\n};\n\n\n/**\n * Implementation of the onRemove interface.\n * @ignore\n */\nClusterIcon.prototype.onRemove = function() {\n if (this.div_ && this.div_.parentNode) {\n this.hide();\n this.div_.parentNode.removeChild(this.div_);\n this.div_ = null;\n }\n};\n\n\n/**\n * Set the sums of the icon.\n *\n * @param {Object} sums The sums containing:\n * 'text': (string) The text to display in the icon.\n * 'index': (number) The style index of the icon.\n */\nClusterIcon.prototype.setSums = function(sums) {\n this.sums_ = sums;\n this.text_ = sums.text;\n this.index_ = sums.index;\n if (this.div_) {\n this.div_.innerHTML = sums.text;\n }\n\n this.useStyle();\n};\n\n\n/**\n * Sets the icon to the the styles.\n */\nClusterIcon.prototype.useStyle = function() {\n var index = Math.max(0, this.sums_.index - 1);\n index = Math.min(this.styles_.length - 1, index);\n var style = this.styles_[index];\n this.url_ = style['url'];\n this.height_ = style['height'];\n this.width_ = style['width'];\n this.textColor_ = style['textColor'];\n this.anchor_ = style['anchor'];\n this.textSize_ = style['textSize'];\n this.backgroundPosition_ = style['backgroundPosition'];\n};\n\n\n/**\n * Sets the center of the icon.\n *\n * @param {google.maps.LatLng} center The latlng to set as the center.\n */\nClusterIcon.prototype.setCenter = function(center) {\n this.center_ = center;\n};\n\n\n/**\n * Create the css text based on the position of the icon.\n *\n * @param {google.maps.Point} pos The position.\n * @return {string} The css style text.\n */\nClusterIcon.prototype.createCss = function(pos) {\n var style = [];\n style.push('background-image:url(' + this.url_ + ');');\n var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0';\n style.push('background-position:' + backgroundPosition + ';');\n\n if (typeof this.anchor_ === 'object') {\n if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 &&\n this.anchor_[0] < this.height_) {\n style.push('height:' + (this.height_ - this.anchor_[0]) +\n 'px; padding-top:' + this.anchor_[0] + 'px;');\n } else {\n style.push('height:' + this.height_ + 'px; line-height:' + this.height_ +\n 'px;');\n }\n if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 &&\n this.anchor_[1] < this.width_) {\n style.push('width:' + (this.width_ - this.anchor_[1]) +\n 'px; padding-left:' + this.anchor_[1] + 'px;');\n } else {\n style.push('width:' + this.width_ + 'px; text-align:center;');\n }\n } else {\n style.push('height:' + this.height_ + 'px; line-height:' +\n this.height_ + 'px; width:' + this.width_ + 'px; text-align:center;');\n }\n\n var txtColor = this.textColor_ ? this.textColor_ : 'black';\n var txtSize = this.textSize_ ? this.textSize_ : 11;\n\n style.push('cursor:pointer; top:' + pos.y + 'px; left:' +\n pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' +\n txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold');\n return style.join('');\n};\n\n\n// Export Symbols for Closure\n// If you are not going to compile with closure then you can remove the\n// code below.\nvar window = window || {};\nwindow['MarkerClusterer'] = MarkerClusterer;\nMarkerClusterer.prototype['addMarker'] = MarkerClusterer.prototype.addMarker;\nMarkerClusterer.prototype['addMarkers'] = MarkerClusterer.prototype.addMarkers;\nMarkerClusterer.prototype['clearMarkers'] =\n MarkerClusterer.prototype.clearMarkers;\nMarkerClusterer.prototype['fitMapToMarkers'] =\n MarkerClusterer.prototype.fitMapToMarkers;\nMarkerClusterer.prototype['getCalculator'] =\n MarkerClusterer.prototype.getCalculator;\nMarkerClusterer.prototype['getGridSize'] =\n MarkerClusterer.prototype.getGridSize;\nMarkerClusterer.prototype['getExtendedBounds'] =\n MarkerClusterer.prototype.getExtendedBounds;\nMarkerClusterer.prototype['getMap'] = MarkerClusterer.prototype.getMap;\nMarkerClusterer.prototype['getMarkers'] = MarkerClusterer.prototype.getMarkers;\nMarkerClusterer.prototype['getMaxZoom'] = MarkerClusterer.prototype.getMaxZoom;\nMarkerClusterer.prototype['getStyles'] = MarkerClusterer.prototype.getStyles;\nMarkerClusterer.prototype['getTotalClusters'] =\n MarkerClusterer.prototype.getTotalClusters;\nMarkerClusterer.prototype['getTotalMarkers'] =\n MarkerClusterer.prototype.getTotalMarkers;\nMarkerClusterer.prototype['redraw'] = MarkerClusterer.prototype.redraw;\nMarkerClusterer.prototype['removeMarker'] =\n MarkerClusterer.prototype.removeMarker;\nMarkerClusterer.prototype['removeMarkers'] =\n MarkerClusterer.prototype.removeMarkers;\nMarkerClusterer.prototype['resetViewport'] =\n MarkerClusterer.prototype.resetViewport;\nMarkerClusterer.prototype['repaint'] =\n MarkerClusterer.prototype.repaint;\nMarkerClusterer.prototype['setCalculator'] =\n MarkerClusterer.prototype.setCalculator;\nMarkerClusterer.prototype['setGridSize'] =\n MarkerClusterer.prototype.setGridSize;\nMarkerClusterer.prototype['setMaxZoom'] =\n MarkerClusterer.prototype.setMaxZoom;\nMarkerClusterer.prototype['onAdd'] = MarkerClusterer.prototype.onAdd;\nMarkerClusterer.prototype['draw'] = MarkerClusterer.prototype.draw;\n\nCluster.prototype['getCenter'] = Cluster.prototype.getCenter;\nCluster.prototype['getSize'] = Cluster.prototype.getSize;\nCluster.prototype['getMarkers'] = Cluster.prototype.getMarkers;\n\nClusterIcon.prototype['onAdd'] = ClusterIcon.prototype.onAdd;\nClusterIcon.prototype['draw'] = ClusterIcon.prototype.draw;\nClusterIcon.prototype['onRemove'] = ClusterIcon.prototype.onRemove;\n\nObject.keys = Object.keys || function(o) {\n var result = [];\n for(var name in o) {\n if (o.hasOwnProperty(name))\n result.push(name);\n }\n return result;\n};\n\nif (typeof module == 'object') {\n module.exports = MarkerClusterer;\n}\n","\nimport KDBush from 'kdbush';\n\nconst defaultOptions = {\n minZoom: 0, // min zoom to generate clusters on\n maxZoom: 16, // max zoom level to cluster the points on\n minPoints: 2, // minimum points to form a cluster\n radius: 40, // cluster radius in pixels\n extent: 512, // tile extent (radius is calculated relative to it)\n nodeSize: 64, // size of the KD-tree leaf node, affects performance\n log: false, // whether to log timing info\n\n // whether to generate numeric ids for input features (in vector tiles)\n generateId: false,\n\n // a reduce function for calculating custom cluster properties\n reduce: null, // (accumulated, props) => { accumulated.sum += props.sum; }\n\n // properties to use for individual points when running the reducer\n map: props => props // props => ({sum: props.my_value})\n};\n\nconst fround = Math.fround || (tmp => ((x) => { tmp[0] = +x; return tmp[0]; }))(new Float32Array(1));\n\nconst OFFSET_ZOOM = 2;\nconst OFFSET_ID = 3;\nconst OFFSET_PARENT = 4;\nconst OFFSET_NUM = 5;\nconst OFFSET_PROP = 6;\n\nexport default class Supercluster {\n constructor(options) {\n this.options = Object.assign(Object.create(defaultOptions), options);\n this.trees = new Array(this.options.maxZoom + 1);\n this.stride = this.options.reduce ? 7 : 6;\n this.clusterProps = [];\n }\n\n load(points) {\n const {log, minZoom, maxZoom} = this.options;\n\n if (log) console.time('total time');\n\n const timerId = `prepare ${ points.length } points`;\n if (log) console.time(timerId);\n\n this.points = points;\n\n // generate a cluster object for each point and index input points into a KD-tree\n const data = [];\n\n for (let i = 0; i < points.length; i++) {\n const p = points[i];\n if (!p.geometry) continue;\n\n const [lng, lat] = p.geometry.coordinates;\n const x = fround(lngX(lng));\n const y = fround(latY(lat));\n // store internal point/cluster data in flat numeric arrays for performance\n data.push(\n x, y, // projected point coordinates\n Infinity, // the last zoom the point was processed at\n i, // index of the source feature in the original input array\n -1, // parent cluster id\n 1 // number of points in a cluster\n );\n if (this.options.reduce) data.push(0); // noop\n }\n let tree = this.trees[maxZoom + 1] = this._createTree(data);\n\n if (log) console.timeEnd(timerId);\n\n // cluster points on max zoom, then cluster the results on previous zoom, etc.;\n // results in a cluster hierarchy across zoom levels\n for (let z = maxZoom; z >= minZoom; z--) {\n const now = +Date.now();\n\n // create a new set of clusters for the zoom and index them with a KD-tree\n tree = this.trees[z] = this._createTree(this._cluster(tree, z));\n\n if (log) console.log('z%d: %d clusters in %dms', z, tree.numItems, +Date.now() - now);\n }\n\n if (log) console.timeEnd('total time');\n\n return this;\n }\n\n getClusters(bbox, zoom) {\n let minLng = ((bbox[0] + 180) % 360 + 360) % 360 - 180;\n const minLat = Math.max(-90, Math.min(90, bbox[1]));\n let maxLng = bbox[2] === 180 ? 180 : ((bbox[2] + 180) % 360 + 360) % 360 - 180;\n const maxLat = Math.max(-90, Math.min(90, bbox[3]));\n\n if (bbox[2] - bbox[0] >= 360) {\n minLng = -180;\n maxLng = 180;\n } else if (minLng > maxLng) {\n const easternHem = this.getClusters([minLng, minLat, 180, maxLat], zoom);\n const westernHem = this.getClusters([-180, minLat, maxLng, maxLat], zoom);\n return easternHem.concat(westernHem);\n }\n\n const tree = this.trees[this._limitZoom(zoom)];\n const ids = tree.range(lngX(minLng), latY(maxLat), lngX(maxLng), latY(minLat));\n const data = tree.data;\n const clusters = [];\n for (const id of ids) {\n const k = this.stride * id;\n clusters.push(data[k + OFFSET_NUM] > 1 ? getClusterJSON(data, k, this.clusterProps) : this.points[data[k + OFFSET_ID]]);\n }\n return clusters;\n }\n\n getChildren(clusterId) {\n const originId = this._getOriginId(clusterId);\n const originZoom = this._getOriginZoom(clusterId);\n const errorMsg = 'No cluster with the specified id.';\n\n const tree = this.trees[originZoom];\n if (!tree) throw new Error(errorMsg);\n\n const data = tree.data;\n if (originId * this.stride >= data.length) throw new Error(errorMsg);\n\n const r = this.options.radius / (this.options.extent * Math.pow(2, originZoom - 1));\n const x = data[originId * this.stride];\n const y = data[originId * this.stride + 1];\n const ids = tree.within(x, y, r);\n const children = [];\n for (const id of ids) {\n const k = id * this.stride;\n if (data[k + OFFSET_PARENT] === clusterId) {\n children.push(data[k + OFFSET_NUM] > 1 ? getClusterJSON(data, k, this.clusterProps) : this.points[data[k + OFFSET_ID]]);\n }\n }\n\n if (children.length === 0) throw new Error(errorMsg);\n\n return children;\n }\n\n getLeaves(clusterId, limit, offset) {\n limit = limit || 10;\n offset = offset || 0;\n\n const leaves = [];\n this._appendLeaves(leaves, clusterId, limit, offset, 0);\n\n return leaves;\n }\n\n getTile(z, x, y) {\n const tree = this.trees[this._limitZoom(z)];\n const z2 = Math.pow(2, z);\n const {extent, radius} = this.options;\n const p = radius / extent;\n const top = (y - p) / z2;\n const bottom = (y + 1 + p) / z2;\n\n const tile = {\n features: []\n };\n\n this._addTileFeatures(\n tree.range((x - p) / z2, top, (x + 1 + p) / z2, bottom),\n tree.data, x, y, z2, tile);\n\n if (x === 0) {\n this._addTileFeatures(\n tree.range(1 - p / z2, top, 1, bottom),\n tree.data, z2, y, z2, tile);\n }\n if (x === z2 - 1) {\n this._addTileFeatures(\n tree.range(0, top, p / z2, bottom),\n tree.data, -1, y, z2, tile);\n }\n\n return tile.features.length ? tile : null;\n }\n\n getClusterExpansionZoom(clusterId) {\n let expansionZoom = this._getOriginZoom(clusterId) - 1;\n while (expansionZoom <= this.options.maxZoom) {\n const children = this.getChildren(clusterId);\n expansionZoom++;\n if (children.length !== 1) break;\n clusterId = children[0].properties.cluster_id;\n }\n return expansionZoom;\n }\n\n _appendLeaves(result, clusterId, limit, offset, skipped) {\n const children = this.getChildren(clusterId);\n\n for (const child of children) {\n const props = child.properties;\n\n if (props && props.cluster) {\n if (skipped + props.point_count <= offset) {\n // skip the whole cluster\n skipped += props.point_count;\n } else {\n // enter the cluster\n skipped = this._appendLeaves(result, props.cluster_id, limit, offset, skipped);\n // exit the cluster\n }\n } else if (skipped < offset) {\n // skip a single point\n skipped++;\n } else {\n // add a single point\n result.push(child);\n }\n if (result.length === limit) break;\n }\n\n return skipped;\n }\n\n _createTree(data) {\n const tree = new KDBush(data.length / this.stride | 0, this.options.nodeSize, Float32Array);\n for (let i = 0; i < data.length; i += this.stride) tree.add(data[i], data[i + 1]);\n tree.finish();\n tree.data = data;\n return tree;\n }\n\n _addTileFeatures(ids, data, x, y, z2, tile) {\n for (const i of ids) {\n const k = i * this.stride;\n const isCluster = data[k + OFFSET_NUM] > 1;\n\n let tags, px, py;\n if (isCluster) {\n tags = getClusterProperties(data, k, this.clusterProps);\n px = data[k];\n py = data[k + 1];\n } else {\n const p = this.points[data[k + OFFSET_ID]];\n tags = p.properties;\n const [lng, lat] = p.geometry.coordinates;\n px = lngX(lng);\n py = latY(lat);\n }\n\n const f = {\n type: 1,\n geometry: [[\n Math.round(this.options.extent * (px * z2 - x)),\n Math.round(this.options.extent * (py * z2 - y))\n ]],\n tags\n };\n\n // assign id\n let id;\n if (isCluster || this.options.generateId) {\n // optionally generate id for points\n id = data[k + OFFSET_ID];\n } else {\n // keep id if already assigned\n id = this.points[data[k + OFFSET_ID]].id;\n }\n\n if (id !== undefined) f.id = id;\n\n tile.features.push(f);\n }\n }\n\n _limitZoom(z) {\n return Math.max(this.options.minZoom, Math.min(Math.floor(+z), this.options.maxZoom + 1));\n }\n\n _cluster(tree, zoom) {\n const {radius, extent, reduce, minPoints} = this.options;\n const r = radius / (extent * Math.pow(2, zoom));\n const data = tree.data;\n const nextData = [];\n const stride = this.stride;\n\n // loop through each point\n for (let i = 0; i < data.length; i += stride) {\n // if we've already visited the point at this zoom level, skip it\n if (data[i + OFFSET_ZOOM] <= zoom) continue;\n data[i + OFFSET_ZOOM] = zoom;\n\n // find all nearby points\n const x = data[i];\n const y = data[i + 1];\n const neighborIds = tree.within(data[i], data[i + 1], r);\n\n const numPointsOrigin = data[i + OFFSET_NUM];\n let numPoints = numPointsOrigin;\n\n // count the number of points in a potential cluster\n for (const neighborId of neighborIds) {\n const k = neighborId * stride;\n // filter out neighbors that are already processed\n if (data[k + OFFSET_ZOOM] > zoom) numPoints += data[k + OFFSET_NUM];\n }\n\n // if there were neighbors to merge, and there are enough points to form a cluster\n if (numPoints > numPointsOrigin && numPoints >= minPoints) {\n let wx = x * numPointsOrigin;\n let wy = y * numPointsOrigin;\n\n let clusterProperties;\n let clusterPropIndex = -1;\n\n // encode both zoom and point index on which the cluster originated -- offset by total length of features\n const id = ((i / stride | 0) << 5) + (zoom + 1) + this.points.length;\n\n for (const neighborId of neighborIds) {\n const k = neighborId * stride;\n\n if (data[k + OFFSET_ZOOM] <= zoom) continue;\n data[k + OFFSET_ZOOM] = zoom; // save the zoom (so it doesn't get processed twice)\n\n const numPoints2 = data[k + OFFSET_NUM];\n wx += data[k] * numPoints2; // accumulate coordinates for calculating weighted center\n wy += data[k + 1] * numPoints2;\n\n data[k + OFFSET_PARENT] = id;\n\n if (reduce) {\n if (!clusterProperties) {\n clusterProperties = this._map(data, i, true);\n clusterPropIndex = this.clusterProps.length;\n this.clusterProps.push(clusterProperties);\n }\n reduce(clusterProperties, this._map(data, k));\n }\n }\n\n data[i + OFFSET_PARENT] = id;\n nextData.push(wx / numPoints, wy / numPoints, Infinity, id, -1, numPoints);\n if (reduce) nextData.push(clusterPropIndex);\n\n } else { // left points as unclustered\n for (let j = 0; j < stride; j++) nextData.push(data[i + j]);\n\n if (numPoints > 1) {\n for (const neighborId of neighborIds) {\n const k = neighborId * stride;\n if (data[k + OFFSET_ZOOM] <= zoom) continue;\n data[k + OFFSET_ZOOM] = zoom;\n for (let j = 0; j < stride; j++) nextData.push(data[k + j]);\n }\n }\n }\n }\n\n return nextData;\n }\n\n // get index of the point from which the cluster originated\n _getOriginId(clusterId) {\n return (clusterId - this.points.length) >> 5;\n }\n\n // get zoom of the point from which the cluster originated\n _getOriginZoom(clusterId) {\n return (clusterId - this.points.length) % 32;\n }\n\n _map(data, i, clone) {\n if (data[i + OFFSET_NUM] > 1) {\n const props = this.clusterProps[data[i + OFFSET_PROP]];\n return clone ? Object.assign({}, props) : props;\n }\n const original = this.points[data[i + OFFSET_ID]].properties;\n const result = this.options.map(original);\n return clone && result === original ? Object.assign({}, result) : result;\n }\n}\n\nfunction getClusterJSON(data, i, clusterProps) {\n return {\n type: 'Feature',\n id: data[i + OFFSET_ID],\n properties: getClusterProperties(data, i, clusterProps),\n geometry: {\n type: 'Point',\n coordinates: [xLng(data[i]), yLat(data[i + 1])]\n }\n };\n}\n\nfunction getClusterProperties(data, i, clusterProps) {\n const count = data[i + OFFSET_NUM];\n const abbrev =\n count >= 10000 ? `${Math.round(count / 1000) }k` :\n count >= 1000 ? `${Math.round(count / 100) / 10 }k` : count;\n const propIndex = data[i + OFFSET_PROP];\n const properties = propIndex === -1 ? {} : Object.assign({}, clusterProps[propIndex]);\n return Object.assign(properties, {\n cluster: true,\n cluster_id: data[i + OFFSET_ID],\n point_count: count,\n point_count_abbreviated: abbrev\n });\n}\n\n// longitude/latitude to spherical mercator in [0..1] range\nfunction lngX(lng) {\n return lng / 360 + 0.5;\n}\nfunction latY(lat) {\n const sin = Math.sin(lat * Math.PI / 180);\n const y = (0.5 - 0.25 * Math.log((1 + sin) / (1 - sin)) / Math.PI);\n return y < 0 ? 0 : y > 1 ? 1 : y;\n}\n\n// spherical mercator to longitude/latitude\nfunction xLng(x) {\n return (x - 0.5) * 360;\n}\nfunction yLat(y) {\n const y2 = (180 - y * 360) * Math.PI / 180;\n return 360 * Math.atan(Math.exp(y2)) / Math.PI - 90;\n}\n","/* eslint-disable filenames/match-regex */\nimport { useEffect, useRef, useState } from 'react'\nimport invariant from 'invariant'\n\nimport { isBrowser } from './utils/isbrowser.js'\nimport { injectScript } from './utils/injectscript.js'\nimport { preventGoogleFonts } from './utils/prevent-google-fonts.js'\nimport {\n makeLoadScriptUrl,\n type LoadScriptUrlOptions,\n} from './utils/make-load-script-url.js'\n\nimport { defaultLoadScriptProps } from './LoadScript.js'\n\nexport type UseLoadScriptOptions = LoadScriptUrlOptions & {\n id?: string | undefined\n nonce?: string | undefined\n preventGoogleFontsLoading?: boolean | undefined\n}\n\nlet previouslyLoadedUrl: string\n\nexport function useLoadScript({\n id = defaultLoadScriptProps.id,\n version = defaultLoadScriptProps.version,\n nonce,\n googleMapsApiKey,\n googleMapsClientId,\n language,\n region,\n libraries,\n preventGoogleFontsLoading,\n channel,\n mapIds,\n authReferrerPolicy,\n}: UseLoadScriptOptions): {\n isLoaded: boolean\n loadError: Error | undefined\n url: string\n} {\n const isMounted = useRef(false)\n const [isLoaded, setLoaded] = useState(false)\n const [loadError, setLoadError] = useState(undefined)\n\n useEffect(function trackMountedState() {\n isMounted.current = true\n return (): void => {\n isMounted.current = false\n }\n }, [])\n\n useEffect(\n function applyPreventGoogleFonts() {\n if (isBrowser && preventGoogleFontsLoading) {\n preventGoogleFonts()\n }\n },\n [preventGoogleFontsLoading]\n )\n\n useEffect(\n function validateLoadedState() {\n if (isLoaded) {\n invariant(\n !!window.google,\n 'useLoadScript was marked as loaded, but window.google is not present. Something went wrong.'\n )\n }\n },\n [isLoaded]\n )\n\n const url = makeLoadScriptUrl({\n version,\n googleMapsApiKey,\n googleMapsClientId,\n language,\n region,\n libraries,\n channel,\n mapIds,\n authReferrerPolicy,\n })\n\n useEffect(\n function loadScriptAndModifyLoadedState() {\n if (!isBrowser) {\n return\n }\n\n function setLoadedIfMounted(): void {\n if (isMounted.current) {\n setLoaded(true)\n previouslyLoadedUrl = url\n }\n }\n\n if (window.google && window.google.maps && previouslyLoadedUrl === url) {\n setLoadedIfMounted()\n return\n }\n\n injectScript({ id, url, nonce })\n .then(setLoadedIfMounted)\n .catch(function handleInjectError(err) {\n if (isMounted.current) {\n setLoadError(err)\n }\n console.warn(`\n There has been an Error with loading Google Maps API script, please check that you provided correct google API key (${\n googleMapsApiKey || '-'\n }) or Client ID (${googleMapsClientId || '-'})\n Otherwise it is a Network issue.\n `)\n console.error(err)\n })\n },\n [id, url, nonce]\n )\n\n const prevLibraries = useRef(undefined)\n\n useEffect(\n function checkPerformance() {\n if (prevLibraries.current && libraries !== prevLibraries.current) {\n console.warn(\n 'Performance warning! LoadScript has been reloaded unintentionally! You should not pass `libraries` prop as new array. Please keep an array of libraries as static class property for Components and PureComponents, or just a const variable outside of component, or somewhere in config files or ENV variables'\n )\n }\n prevLibraries.current = libraries\n },\n [libraries]\n )\n\n return { isLoaded, loadError, url }\n}\n","function _typeof(o) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n return typeof o;\n } : function (o) {\n return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n }, _typeof(o);\n}\nexport { _typeof as default };","import toPropertyKey from \"./toPropertyKey.js\";\nfunction _defineProperty(e, r, t) {\n return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {\n value: t,\n enumerable: !0,\n configurable: !0,\n writable: !0\n }) : e[r] = t, e;\n}\nexport { _defineProperty as default };","import _typeof from \"./typeof.js\";\nimport toPrimitive from \"./toPrimitive.js\";\nfunction toPropertyKey(t) {\n var i = toPrimitive(t, \"string\");\n return \"symbol\" == _typeof(i) ? i : i + \"\";\n}\nexport { toPropertyKey as default };","import _typeof from \"./typeof.js\";\nfunction toPrimitive(t, r) {\n if (\"object\" != _typeof(t) || !t) return t;\n var e = t[Symbol.toPrimitive];\n if (void 0 !== e) {\n var i = e.call(t, r || \"default\");\n if (\"object\" != _typeof(i)) return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (\"string\" === r ? String : Number)(t);\n}\nexport { toPrimitive as default };","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\n/**\n * Use invariant() to assert state which your program assumes to be true.\n *\n * Provide sprintf-style format (only %s is supported) and arguments\n * to provide information about what broke and what you were\n * expecting.\n *\n * The invariant message will be stripped in production, but the invariant\n * will remain to ensure logic does not differ in production.\n */\n\nvar NODE_ENV = process.env.NODE_ENV;\n\nvar invariant = function(condition, format, a, b, c, d, e, f) {\n if (NODE_ENV !== 'production') {\n if (format === undefined) {\n throw new Error('invariant requires an error message argument');\n }\n }\n\n if (!condition) {\n var error;\n if (format === undefined) {\n error = new Error(\n 'Minified exception occurred; use the non-minified dev environment ' +\n 'for the full error message and additional helpful warnings.'\n );\n } else {\n var args = [a, b, c, d, e, f];\n var argIndex = 0;\n error = new Error(\n format.replace(/%s/g, function() { return args[argIndex++]; })\n );\n error.name = 'Invariant Violation';\n }\n\n error.framesToPop = 1; // we don't care about invariant's own frame\n throw error;\n }\n};\n\nmodule.exports = invariant;\n","import { useContext, createContext } from 'react'\nimport invariant from 'invariant'\n\nconst MapContext = createContext(null)\n\nexport function useGoogleMap(): google.maps.Map | null {\n invariant(!!useContext, 'useGoogleMap is React hook and requires React version 16.8+')\n\n const map = useContext(MapContext)\n\n invariant(!!map, 'useGoogleMap needs a GoogleMap available up in the tree')\n\n return map\n}\n\nexport default MapContext\n","/* global google */\n/* eslint-disable filenames/match-regex */\nimport { reduce } from './reduce.js'\nimport { forEach } from './foreach.js'\n\nexport function applyUpdaterToNextProps(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n updaterMap: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n prevProps: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n nextProps: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n instance: any\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): any {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const map: any = {}\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const iter = (fn: any, key: string): void => {\n const nextValue = nextProps[key]\n\n if (nextValue !== prevProps[key]) {\n map[key] = nextValue\n fn(instance, nextValue)\n }\n }\n\n forEach(updaterMap, iter)\n\n return map\n}\n\nexport function registerEvents(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n props: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n instance: any,\n eventMap: Record\n): google.maps.MapsEventListener[] {\n const registeredList = reduce(\n eventMap,\n function reducer(\n acc: google.maps.MapsEventListener[],\n googleEventName: string,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onEventName: any\n ): google.maps.MapsEventListener[] {\n if (typeof props[onEventName] === 'function') {\n acc.push(\n google.maps.event.addListener(\n instance,\n googleEventName,\n props[onEventName]\n )\n )\n }\n\n return acc\n },\n []\n )\n\n return registeredList\n}\n\nfunction unregisterEvent(registered: google.maps.MapsEventListener): void {\n google.maps.event.removeListener(registered)\n}\n\nexport function unregisterEvents(\n events: google.maps.MapsEventListener[] = []\n): void {\n events.forEach(unregisterEvent)\n}\n\nexport function applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps,\n instance,\n}: {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n updaterMap: any\n eventMap: Record\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n prevProps: any\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n nextProps: any\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n instance: any\n}): google.maps.MapsEventListener[] {\n const registeredEvents = registerEvents(nextProps, instance, eventMap)\n\n applyUpdaterToNextProps(updaterMap, prevProps, nextProps, instance)\n\n return registeredEvents\n}\n","// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function reduce(obj: any, fn: any, acc: any): any {\n return Object.keys(obj).reduce(function reducer(newAcc, key) {\n return fn(newAcc, obj[key], key)\n }, acc)\n}\n","// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function forEach(obj: any, fn: any): any {\n Object.keys(obj).forEach((key) => {\n return fn(obj[key], key)\n })\n}\n","function asyncGeneratorStep(n, t, e, r, o, a, c) {\n try {\n var i = n[a](c),\n u = i.value;\n } catch (n) {\n return void e(n);\n }\n i.done ? t(u) : Promise.resolve(u).then(r, o);\n}\nfunction _asyncToGenerator(n) {\n return function () {\n var t = this,\n e = arguments;\n return new Promise(function (r, o) {\n var a = n.apply(t, e);\n function _next(n) {\n asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n);\n }\n function _throw(n) {\n asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n);\n }\n _next(void 0);\n });\n };\n}\nexport { _asyncToGenerator as default };","import type { Library } from '@googlemaps/js-api-loader'\nimport invariant from 'invariant'\n\nexport type Libraries = Library[]\n\nexport type LoadScriptUrlOptions = {\n googleMapsApiKey: string | ''\n googleMapsClientId?: string | undefined\n version?: string | undefined\n language?: string | undefined\n region?: string | undefined\n libraries?: Libraries | undefined\n channel?: string | undefined\n mapIds?: string[] | undefined\n authReferrerPolicy?: 'origin' | undefined\n}\n\nexport function makeLoadScriptUrl({\n googleMapsApiKey,\n googleMapsClientId,\n version = 'weekly',\n language,\n region,\n libraries,\n channel,\n mapIds,\n authReferrerPolicy,\n}: LoadScriptUrlOptions): string {\n const params = []\n\n invariant(\n (googleMapsApiKey && googleMapsClientId) ||\n !(googleMapsApiKey && googleMapsClientId),\n 'You need to specify either googleMapsApiKey or googleMapsClientId for @react-google-maps/api load script to work. You cannot use both at the same time.'\n )\n\n if (googleMapsApiKey) {\n params.push(`key=${googleMapsApiKey}`)\n } else if (googleMapsClientId) {\n params.push(`client=${googleMapsClientId}`)\n }\n\n if (version) {\n params.push(`v=${version}`)\n }\n\n if (language) {\n params.push(`language=${language}`)\n }\n\n if (region) {\n params.push(`region=${region}`)\n }\n\n if (libraries && libraries.length) {\n params.push(`libraries=${libraries.sort().join(',')}`)\n }\n\n if (channel) {\n params.push(`channel=${channel}`)\n }\n\n if (mapIds && mapIds.length) {\n params.push(`map_ids=${mapIds.join(',')}`)\n }\n\n if (authReferrerPolicy) {\n params.push(`auth_referrer_policy=${authReferrerPolicy}`)\n }\n\n params.push('loading=async')\n params.push('callback=initMap')\n\n return `https://maps.googleapis.com/maps/api/js?${params.join('&')}`\n}\n","import {\n memo,\n useRef,\n useState,\n type JSX,\n useEffect,\n PureComponent,\n type ReactNode,\n type CSSProperties,\n} from 'react'\n\nimport MapContext from './map-context.js'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from './utils/helper.js'\n\nconst eventMap = {\n onDblClick: 'dblclick',\n onDragEnd: 'dragend',\n onDragStart: 'dragstart',\n onMapTypeIdChanged: 'maptypeid_changed',\n onMouseMove: 'mousemove',\n onMouseOut: 'mouseout',\n onMouseOver: 'mouseover',\n onMouseDown: 'mousedown',\n onMouseUp: 'mouseup',\n onRightClick: 'rightclick',\n onTilesLoaded: 'tilesloaded',\n onBoundsChanged: 'bounds_changed',\n onCenterChanged: 'center_changed',\n onClick: 'click',\n onDrag: 'drag',\n onHeadingChanged: 'heading_changed',\n onIdle: 'idle',\n onProjectionChanged: 'projection_changed',\n onResize: 'resize',\n onTiltChanged: 'tilt_changed',\n onZoomChanged: 'zoom_changed',\n}\n\nconst updaterMap = {\n extraMapTypes(map: google.maps.Map, extra: google.maps.MapType[]): void {\n extra.forEach(function forEachExtra(it, i) {\n map.mapTypes.set(String(i), it)\n })\n },\n center(\n map: google.maps.Map,\n center: google.maps.LatLng | google.maps.LatLngLiteral\n ): void {\n map.setCenter(center)\n },\n clickableIcons(map: google.maps.Map, clickable: boolean): void {\n map.setClickableIcons(clickable)\n },\n heading(map: google.maps.Map, heading: number): void {\n map.setHeading(heading)\n },\n mapTypeId(map: google.maps.Map, mapTypeId: string): void {\n map.setMapTypeId(mapTypeId)\n },\n options(map: google.maps.Map, options: google.maps.MapOptions): void {\n map.setOptions(options)\n },\n streetView(\n map: google.maps.Map,\n streetView: google.maps.StreetViewPanorama\n ): void {\n map.setStreetView(streetView)\n },\n tilt(map: google.maps.Map, tilt: number): void {\n map.setTilt(tilt)\n },\n zoom(map: google.maps.Map, zoom: number): void {\n map.setZoom(zoom)\n },\n}\n\nexport type GoogleMapState = {\n map: google.maps.Map | null\n}\n\nexport type GoogleMapProps = {\n children?: ReactNode | undefined\n id?: string | undefined\n mapContainerStyle?: CSSProperties | undefined\n mapContainerClassName?: string | undefined\n options?: google.maps.MapOptions | undefined\n /** Additional map types to overlay. Overlay map types will display on top of the base map they are attached to, in the order in which they appear in the overlayMapTypes array (overlays with higher index values are displayed in front of overlays with lower index values). */\n extraMapTypes?: google.maps.MapType[] | undefined\n /** The initial Map center. */\n center?: google.maps.LatLng | google.maps.LatLngLiteral | undefined\n /** When false, map icons are not clickable. A map icon represents a point of interest, also known as a POI. By default map icons are clickable. */\n clickableIcons?: boolean | undefined\n /** The heading for aerial imagery in degrees measured clockwise from cardinal direction North. Headings are snapped to the nearest available angle for which imagery is available. */\n heading?: number | undefined\n /** The initial Map mapTypeId. Defaults to ROADMAP. */\n mapTypeId?: string | undefined\n /** A StreetViewPanorama to display when the Street View pegman is dropped on the map. If no panorama is specified, a default StreetViewPanorama will be displayed in the map's div when the pegman is dropped. */\n streetView?: google.maps.StreetViewPanorama | undefined\n /** Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 and 45. The value 0 causes the map to always use a 0° overhead view regardless of the zoom level and viewport. The value 45 causes the tilt angle to automatically switch to 45 whenever 45° imagery is available for the current zoom level and viewport, and switch back to 0 whenever 45° imagery is not available (this is the default behavior). 45° imagery is only available for satellite and hybrid map types, within some locations, and at some zoom levels. Note: getTilt returns the current tilt angle, not the value specified by this option. Because getTilt and this option refer to different things, do not bind() the tilt property; doing so may yield unpredictable effects. */\n tilt?: number | undefined\n /** The initial Map zoom level. Required. Valid values: Integers between zero, and up to the supported maximum zoom level. */\n zoom?: number | undefined\n /** This event is fired when the user clicks on the map. An ApiMouseEvent with properties for the clicked location is returned unless a place icon was clicked, in which case an IconMouseEvent with a placeId is returned. IconMouseEvent and ApiMouseEvent are identical, except that IconMouseEvent has the placeId field. The event can always be treated as an ApiMouseEvent when the placeId is not important. The click event is not fired if a Marker or InfoWindow was clicked. */\n onClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user double-clicks on the map. Note that the click event will also fire, right before this one. */\n onDblClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is repeatedly fired while the user drags the map. */\n onDrag?: (() => void) | undefined\n /** This event is fired when the user stops dragging the map. */\n onDragEnd?: (() => void) | undefined\n /** This event is fired when the user starts dragging the map. */\n onDragStart?: (() => void) | undefined\n /** This event is fired whenever the user's mouse moves over the map container. */\n onMouseMove?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user's mouse exits the map container. */\n onMouseOut?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user's mouse enters the map container. */\n onMouseOver?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mousedown event is fired on the map container. */\n onMouseDown?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mouseup event is fired on the map container. */\n onMouseUp?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM contextmenu event is fired on the map container. */\n onRightClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the mapTypeId property changes. */\n onMapTypeIdChanged?: (() => void) | undefined\n /** This event is fired when the visible tiles have finished loading. */\n onTilesLoaded?: (() => void) | undefined\n /** This event is fired when the viewport bounds have changed. */\n onBoundsChanged?: (() => void) | undefined\n /** This event is fired when the map center property changes. */\n onCenterChanged?: (() => void) | undefined\n /** This event is fired when the map heading property changes. */\n onHeadingChanged?: (() => void) | undefined\n /** This event is fired when the map becomes idle after panning or zooming. */\n onIdle?: (() => void) | undefined\n /** This event is fired when the projection has changed. */\n onProjectionChanged?: (() => void) | undefined\n /** This event is fired when the map size has changed. */\n onResize?: (() => void) | undefined\n /** This event is fired when the map tilt property changes. */\n onTiltChanged?: (() => void) | undefined\n /** This event is fired when the map zoom property changes. */\n onZoomChanged?: (() => void) | undefined\n /** This callback is called when the map instance has loaded. It is called with the map instance. */\n onLoad?: ((map: google.maps.Map) => void | Promise) | undefined\n /** This callback is called when the component unmounts. It is called with the map instance. */\n onUnmount?: ((map: google.maps.Map) => void | Promise) | undefined\n}\n\n// TODO: unfinished!\nfunction GoogleMapFunctional({\n children,\n options,\n id,\n mapContainerStyle,\n mapContainerClassName,\n center,\n // clickableIcons,\n // extraMapTypes,\n // heading,\n // mapTypeId,\n onClick,\n onDblClick,\n onDrag,\n onDragEnd,\n onDragStart,\n onMouseMove,\n onMouseOut,\n onMouseOver,\n onMouseDown,\n onMouseUp,\n onRightClick,\n // onMapTypeIdChanged,\n // onTilesLoaded,\n // onBoundsChanged,\n onCenterChanged,\n // onHeadingChanged,\n // onIdle,\n // onProjectionChanged,\n // onResize,\n // onTiltChanged,\n // onZoomChanged,\n onLoad,\n onUnmount,\n}: GoogleMapProps): JSX.Element {\n const [map, setMap] = useState(null)\n const ref = useRef(null)\n\n // const [extraMapTypesListener, setExtraMapTypesListener] = useState(null)\n const [centerChangedListener, setCenterChangedListener] =\n useState(null)\n\n const [dblclickListener, setDblclickListener] =\n useState(null)\n const [dragendListener, setDragendListener] =\n useState(null)\n const [dragstartListener, setDragstartListener] =\n useState(null)\n const [mousedownListener, setMousedownListener] =\n useState(null)\n const [mousemoveListener, setMousemoveListener] =\n useState(null)\n const [mouseoutListener, setMouseoutListener] =\n useState(null)\n const [mouseoverListener, setMouseoverListener] =\n useState(null)\n const [mouseupListener, setMouseupListener] =\n useState(null)\n const [rightclickListener, setRightclickListener] =\n useState(null)\n const [clickListener, setClickListener] =\n useState(null)\n const [dragListener, setDragListener] =\n useState(null)\n\n // Order does matter\n useEffect(() => {\n if (options && map !== null) {\n map.setOptions(options)\n }\n }, [map, options])\n\n useEffect(() => {\n if (map !== null && typeof center !== 'undefined') {\n map.setCenter(center)\n }\n }, [map, center])\n\n useEffect(() => {\n if (map && onDblClick) {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n setDblclickListener(\n google.maps.event.addListener(map, 'dblclick', onDblClick)\n )\n }\n }, [onDblClick])\n\n useEffect(() => {\n if (map && onDragEnd) {\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n setDragendListener(\n google.maps.event.addListener(map, 'dragend', onDragEnd)\n )\n }\n }, [onDragEnd])\n\n useEffect(() => {\n if (map && onDragStart) {\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n setDragstartListener(\n google.maps.event.addListener(map, 'dragstart', onDragStart)\n )\n }\n }, [onDragStart])\n\n useEffect(() => {\n if (map && onMouseDown) {\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n setMousedownListener(\n google.maps.event.addListener(map, 'mousedown', onMouseDown)\n )\n }\n }, [onMouseDown])\n\n useEffect(() => {\n if (map && onMouseMove) {\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n setMousemoveListener(\n google.maps.event.addListener(map, 'mousemove', onMouseMove)\n )\n }\n }, [onMouseMove])\n\n useEffect(() => {\n if (map && onMouseOut) {\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n setMouseoutListener(\n google.maps.event.addListener(map, 'mouseout', onMouseOut)\n )\n }\n }, [onMouseOut])\n\n useEffect(() => {\n if (map && onMouseOver) {\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n setMouseoverListener(\n google.maps.event.addListener(map, 'mouseover', onMouseOver)\n )\n }\n }, [onMouseOver])\n\n useEffect(() => {\n if (map && onMouseUp) {\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n setMouseupListener(\n google.maps.event.addListener(map, 'mouseup', onMouseUp)\n )\n }\n }, [onMouseUp])\n\n useEffect(() => {\n if (map && onRightClick) {\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n setRightclickListener(\n google.maps.event.addListener(map, 'rightclick', onRightClick)\n )\n }\n }, [onRightClick])\n\n useEffect(() => {\n if (map && onClick) {\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n setClickListener(google.maps.event.addListener(map, 'click', onClick))\n }\n }, [onClick])\n\n useEffect(() => {\n if (map && onDrag) {\n if (dragListener !== null) {\n google.maps.event.removeListener(dragListener)\n }\n\n setDragListener(google.maps.event.addListener(map, 'drag', onDrag))\n }\n }, [onDrag])\n\n useEffect(() => {\n if (map && onCenterChanged) {\n if (centerChangedListener !== null) {\n google.maps.event.removeListener(centerChangedListener)\n }\n\n setCenterChangedListener(\n google.maps.event.addListener(map, 'center_changed', onCenterChanged)\n )\n }\n }, [onClick])\n\n useEffect(() => {\n const map =\n ref.current === null ? null : new google.maps.Map(ref.current, options)\n\n setMap(map)\n\n if (map !== null && onLoad) {\n onLoad(map)\n }\n\n return () => {\n if (map !== null) {\n if (onUnmount) {\n onUnmount(map)\n }\n }\n }\n }, [])\n\n return (\n \n \n {map !== null ? children : null}\n \n \n )\n}\n\nexport const GoogleMapF = memo(GoogleMapFunctional)\n\nexport class GoogleMap extends PureComponent {\n override state: GoogleMapState = {\n map: null,\n }\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n mapRef: HTMLDivElement | null = null\n\n getInstance = (): google.maps.Map | null => {\n if (this.mapRef === null) {\n return null\n }\n\n return new google.maps.Map(this.mapRef, this.props.options)\n }\n\n panTo = (latLng: google.maps.LatLng | google.maps.LatLngLiteral): void => {\n const map = this.getInstance()\n if (map) {\n map.panTo(latLng)\n }\n }\n\n setMapCallback = (): void => {\n if (this.state.map !== null) {\n if (this.props.onLoad) {\n this.props.onLoad(this.state.map)\n }\n }\n }\n\n override componentDidMount(): void {\n const map = this.getInstance()\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: map,\n })\n\n this.setState(function setMap() {\n return {\n map,\n }\n }, this.setMapCallback)\n }\n\n override componentDidUpdate(prevProps: GoogleMapProps): void {\n if (this.state.map !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.map,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.map !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.map)\n }\n\n unregisterEvents(this.registeredEvents)\n }\n }\n\n getRef: React.LegacyRef = (\n ref: HTMLDivElement | null\n ): void => {\n this.mapRef = ref\n }\n\n override render(): ReactNode {\n return (\n \n \n {this.state.map !== null ? this.props.children : null}\n \n \n )\n }\n}\n\nexport default GoogleMap\n","export const isBrowser: boolean = typeof document !== 'undefined'\n","import { isBrowser } from './isbrowser.js'\n\ntype WindowWithGoogleMap = Window & {\n initMap?: (() => void) | undefined\n}\n\ntype InjectScriptArg = {\n url: string\n id: string\n nonce?: string | undefined\n}\n\nexport function injectScript({\n url,\n id,\n nonce,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n}: InjectScriptArg): Promise {\n if (!isBrowser) {\n return Promise.reject(new Error('document is undefined'))\n }\n\n return new Promise(function injectScriptCallback(resolve, reject) {\n const existingScript = document.getElementById(id) as\n | HTMLScriptElement\n | undefined\n\n const windowWithGoogleMap: WindowWithGoogleMap = window\n\n if (existingScript) {\n // Same script id/url: keep same script\n const dataStateAttribute = existingScript.getAttribute('data-state')\n\n if (existingScript.src === url && dataStateAttribute !== 'error') {\n if (dataStateAttribute === 'ready') {\n return resolve(id)\n } else {\n const originalInitMap = windowWithGoogleMap.initMap\n\n const originalErrorCallback = existingScript.onerror\n\n windowWithGoogleMap.initMap = function initMap(): void {\n if (originalInitMap) {\n originalInitMap()\n }\n resolve(id)\n }\n\n existingScript.onerror = function (err): void {\n if (originalErrorCallback) {\n originalErrorCallback(err)\n }\n reject(err)\n }\n\n return\n }\n }\n // Same script id, but either\n // 1. requested URL is different\n // 2. script failed to load\n else {\n existingScript.remove()\n }\n }\n\n const script = document.createElement('script')\n\n script.type = 'text/javascript'\n script.src = url\n script.id = id\n script.async = true\n script.nonce = nonce || ''\n script.onerror = function onerror(err): void {\n script.setAttribute('data-state', 'error')\n\n reject(err)\n }\n\n windowWithGoogleMap.initMap = function onload(): void {\n script.setAttribute('data-state', 'ready')\n\n resolve(id)\n }\n\n document.head.appendChild(script)\n }).catch((err) => {\n console.error('injectScript error: ', err)\n\n throw err\n })\n}\n","function isGoogleFontStyle(element: Node): boolean {\n // 'Roboto' or 'Google Sans Text' font download\n const href = (element as HTMLLinkElement).href;\n if (\n href && (\n href.indexOf('https://fonts.googleapis.com/css?family=Roboto') === 0 ||\n href.indexOf('https://fonts.googleapis.com/css?family=Google+Sans+Text') === 0\n )\n ) {\n return true\n }\n // font style elements\n if (\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n element.tagName.toLowerCase() === 'style' &&\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n element.styleSheet &&\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n element.styleSheet.cssText &&\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n element.styleSheet.cssText.replace('\\r\\n', '').indexOf('.gm-style') === 0\n ) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n element.styleSheet.cssText = ''\n return true\n }\n // font style elements for other browsers\n if (\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n element.tagName.toLowerCase() === 'style' &&\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n element.innerHTML &&\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n element.innerHTML.replace('\\r\\n', '').indexOf('.gm-style') === 0\n ) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n element.innerHTML = ''\n return true\n }\n // when google tries to add empty style\n if (\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n element.tagName.toLowerCase() === 'style' &&\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n !element.styleSheet &&\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n !element.innerHTML\n ) {\n return true\n }\n\n return false\n}\n\n// Preventing the Google Maps library from downloading an extra font\nexport function preventGoogleFonts (): void {\n // we override these methods only for one particular head element\n // default methods for other elements are not affected\n const head = document.getElementsByTagName('head')[0]\n\n if (head) {\n const trueInsertBefore = head.insertBefore.bind(head)\n\n // TODO: adding return before reflect solves the TS issue\n\n head.insertBefore = function insertBefore(\n newElement: T,\n referenceElement: HTMLElement\n ): T {\n if (!isGoogleFontStyle(newElement)) {\n Reflect.apply(trueInsertBefore, head, [newElement, referenceElement])\n }\n\n return newElement\n }\n\n const trueAppend = head.appendChild.bind(head)\n\n // TODO: adding return before reflect solves the TS issue\n\n head.appendChild = function appendChild(textNode: T): T {\n if (!isGoogleFontStyle(textNode)) {\n Reflect.apply(trueAppend, head, [textNode])\n }\n\n return textNode\n }\n }\n\n}\n","import { type JSX, PureComponent, type ReactNode } from 'react'\nimport invariant from 'invariant'\n\nimport {\n makeLoadScriptUrl,\n type LoadScriptUrlOptions,\n} from './utils/make-load-script-url.js'\nimport { isBrowser } from './utils/isbrowser.js'\nimport { injectScript } from './utils/injectscript.js'\nimport { preventGoogleFonts } from './utils/prevent-google-fonts.js'\n\nlet cleaningUp = false\n\ntype LoadScriptState = {\n loaded: boolean\n}\n\nexport type LoadScriptProps = LoadScriptUrlOptions & {\n children?: ReactNode | undefined\n id: string\n nonce?: string | undefined\n loadingElement?: ReactNode\n onLoad?: () => void\n onError?: (error: Error) => void\n onUnmount?: () => void\n preventGoogleFontsLoading?: boolean\n}\n\nexport function DefaultLoadingElement(): JSX.Element {\n return
{`Loading...`}
\n}\n\nexport const defaultLoadScriptProps = {\n id: 'script-loader',\n version: 'weekly',\n}\n\nclass LoadScript extends PureComponent {\n public static defaultProps = defaultLoadScriptProps\n\n check: HTMLDivElement | null = null\n\n override state = {\n loaded: false,\n }\n\n cleanupCallback = (): void => {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n delete window.google.maps\n\n this.injectScript()\n }\n\n override componentDidMount(): void {\n if (isBrowser) {\n if (window.google && window.google.maps && !cleaningUp) {\n console.error('google api is already presented')\n\n return\n }\n\n this.isCleaningUp()\n .then(this.injectScript)\n .catch(function error(err) {\n console.error('Error at injecting script after cleaning up: ', err)\n })\n }\n }\n\n override componentDidUpdate(prevProps: LoadScriptProps): void {\n if (this.props.libraries !== prevProps.libraries) {\n console.warn(\n 'Performance warning! LoadScript has been reloaded unintentionally! You should not pass `libraries` prop as new array. Please keep an array of libraries as static class property for Components and PureComponents, or just a const variable outside of component, or somewhere in config files or ENV variables'\n )\n }\n\n if (isBrowser && prevProps.language !== this.props.language) {\n this.cleanup()\n // TODO: refactor to use gDSFP maybe... wait for hooks refactoring.\n this.setState(function setLoaded() {\n return {\n loaded: false,\n }\n }, this.cleanupCallback)\n }\n }\n\n override componentWillUnmount(): void {\n if (isBrowser) {\n this.cleanup()\n\n const timeoutCallback = (): void => {\n if (!this.check) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n delete window.google\n cleaningUp = false\n }\n }\n\n window.setTimeout(timeoutCallback, 1)\n\n if (this.props.onUnmount) {\n this.props.onUnmount()\n }\n }\n }\n\n isCleaningUp = async (): Promise => {\n function promiseCallback(resolve: () => void): void {\n if (!cleaningUp) {\n resolve()\n } else {\n if (isBrowser) {\n const timer = window.setInterval(function interval() {\n if (!cleaningUp) {\n window.clearInterval(timer)\n\n resolve()\n }\n }, 1)\n }\n }\n\n return\n }\n\n return new Promise(promiseCallback)\n }\n\n cleanup = (): void => {\n cleaningUp = true\n const script = document.getElementById(this.props.id)\n\n if (script && script.parentNode) {\n script.parentNode.removeChild(script)\n }\n\n Array.prototype.slice\n .call(document.getElementsByTagName('script'))\n .filter(function filter(script: HTMLScriptElement): boolean {\n return (\n typeof script.src === 'string' &&\n script.src.includes('maps.googleapis')\n )\n })\n .forEach(function forEach(script: HTMLScriptElement): void {\n if (script.parentNode) {\n script.parentNode.removeChild(script)\n }\n })\n\n Array.prototype.slice\n .call(document.getElementsByTagName('link'))\n .filter(function filter(link: HTMLLinkElement): boolean {\n return (\n link.href ===\n 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans'\n )\n })\n .forEach(function forEach(link: HTMLLinkElement) {\n if (link.parentNode) {\n link.parentNode.removeChild(link)\n }\n })\n\n Array.prototype.slice\n .call(document.getElementsByTagName('style'))\n .filter(function filter(style: HTMLStyleElement): boolean {\n return (\n style.innerText !== undefined &&\n style.innerText.length > 0 &&\n style.innerText.includes('.gm-')\n )\n })\n .forEach(function forEach(style: HTMLStyleElement) {\n if (style.parentNode) {\n style.parentNode.removeChild(style)\n }\n })\n }\n\n injectScript = (): void => {\n if (this.props.preventGoogleFontsLoading) {\n preventGoogleFonts()\n }\n\n invariant(\n !!this.props.id,\n 'LoadScript requires \"id\" prop to be a string: %s',\n this.props.id\n )\n\n const injectScriptOptions = {\n id: this.props.id,\n nonce: this.props.nonce,\n url: makeLoadScriptUrl(this.props),\n }\n\n injectScript(injectScriptOptions)\n .then(() => {\n if (this.props.onLoad) {\n this.props.onLoad()\n }\n\n this.setState(function setLoaded() {\n return {\n loaded: true,\n }\n })\n\n return\n })\n .catch((err) => {\n if (this.props.onError) {\n this.props.onError(err)\n }\n\n console.error(`\n There has been an Error with loading Google Maps API script, please check that you provided correct google API key (${\n this.props.googleMapsApiKey || '-'\n }) or Client ID (${\n this.props.googleMapsClientId || '-'\n }) to \n Otherwise it is a Network issue.\n `)\n })\n }\n\n getRef = (el: HTMLDivElement | null): void => {\n this.check = el\n }\n\n override render(): ReactNode {\n return (\n <>\n
\n\n {this.state.loaded\n ? this.props.children\n : this.props.loadingElement || }\n \n )\n }\n}\n\nexport default LoadScript\n","import { memo, type ReactElement, useEffect, type JSX } from 'react'\n\nimport { DefaultLoadingElement } from './LoadScript.js'\nimport { useLoadScript, type UseLoadScriptOptions } from './useLoadScript.js'\n\nexport type LoadScriptNextProps = UseLoadScriptOptions & {\n loadingElement?: ReactElement | undefined\n onLoad?: (() => void) | undefined\n onError?: ((error: Error) => void) | undefined\n onUnmount?: (() => void) | undefined\n children: ReactElement\n}\n\nconst defaultLoadingElement = \n\nfunction LoadScriptNext({\n loadingElement,\n onLoad,\n onError,\n onUnmount,\n children,\n ...hookOptions\n}: LoadScriptNextProps): JSX.Element {\n const { isLoaded, loadError } = useLoadScript(hookOptions)\n\n useEffect(\n function handleOnLoad() {\n if (isLoaded && typeof onLoad === 'function') {\n onLoad()\n }\n },\n [isLoaded, onLoad]\n )\n\n useEffect(\n function handleOnError() {\n if (loadError && typeof onError === 'function') {\n onError(loadError)\n }\n },\n [loadError, onError]\n )\n\n useEffect(\n function handleOnUnmount() {\n return () => {\n if (onUnmount) {\n onUnmount()\n }\n }\n },\n [onUnmount]\n )\n\n return isLoaded ? children : loadingElement || defaultLoadingElement\n}\n\nexport default memo(LoadScriptNext)\n","/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise, SuppressedError, Symbol */\r\n\r\n\r\nfunction __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\ntypeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\r\n var e = new Error(message);\r\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\r\n};\n\nfunction getDefaultExportFromCjs (x) {\n\treturn x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;\n}\n\n// do not edit .js files directly - edit src/index.jst\n\n\n\nvar fastDeepEqual = function equal(a, b) {\n if (a === b) return true;\n\n if (a && b && typeof a == 'object' && typeof b == 'object') {\n if (a.constructor !== b.constructor) return false;\n\n var length, i, keys;\n if (Array.isArray(a)) {\n length = a.length;\n if (length != b.length) return false;\n for (i = length; i-- !== 0;)\n if (!equal(a[i], b[i])) return false;\n return true;\n }\n\n\n\n if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;\n if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();\n if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();\n\n keys = Object.keys(a);\n length = keys.length;\n if (length !== Object.keys(b).length) return false;\n\n for (i = length; i-- !== 0;)\n if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;\n\n for (i = length; i-- !== 0;) {\n var key = keys[i];\n\n if (!equal(a[key], b[key])) return false;\n }\n\n return true;\n }\n\n // true if both NaN, false otherwise\n return a!==a && b!==b;\n};\n\nvar isEqual = /*@__PURE__*/getDefaultExportFromCjs(fastDeepEqual);\n\n/**\n * Copyright 2019 Google LLC. 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 */\nconst DEFAULT_ID = \"__googleMapsScriptId\";\n/**\n * The status of the [[Loader]].\n */\nvar LoaderStatus;\n(function (LoaderStatus) {\n LoaderStatus[LoaderStatus[\"INITIALIZED\"] = 0] = \"INITIALIZED\";\n LoaderStatus[LoaderStatus[\"LOADING\"] = 1] = \"LOADING\";\n LoaderStatus[LoaderStatus[\"SUCCESS\"] = 2] = \"SUCCESS\";\n LoaderStatus[LoaderStatus[\"FAILURE\"] = 3] = \"FAILURE\";\n})(LoaderStatus || (LoaderStatus = {}));\n/**\n * [[Loader]] makes it easier to add Google Maps JavaScript API to your application\n * dynamically using\n * [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).\n * It works by dynamically creating and appending a script node to the the\n * document head and wrapping the callback function so as to return a promise.\n *\n * ```\n * const loader = new Loader({\n * apiKey: \"\",\n * version: \"weekly\",\n * libraries: [\"places\"]\n * });\n *\n * loader.load().then((google) => {\n * const map = new google.maps.Map(...)\n * })\n * ```\n */\nclass Loader {\n /**\n * Creates an instance of Loader using [[LoaderOptions]]. No defaults are set\n * using this library, instead the defaults are set by the Google Maps\n * JavaScript API server.\n *\n * ```\n * const loader = Loader({apiKey, version: 'weekly', libraries: ['places']});\n * ```\n */\n constructor({ apiKey, authReferrerPolicy, channel, client, id = DEFAULT_ID, language, libraries = [], mapIds, nonce, region, retries = 3, url = \"https://maps.googleapis.com/maps/api/js\", version, }) {\n this.callbacks = [];\n this.done = false;\n this.loading = false;\n this.errors = [];\n this.apiKey = apiKey;\n this.authReferrerPolicy = authReferrerPolicy;\n this.channel = channel;\n this.client = client;\n this.id = id || DEFAULT_ID; // Do not allow empty string\n this.language = language;\n this.libraries = libraries;\n this.mapIds = mapIds;\n this.nonce = nonce;\n this.region = region;\n this.retries = retries;\n this.url = url;\n this.version = version;\n if (Loader.instance) {\n if (!isEqual(this.options, Loader.instance.options)) {\n throw new Error(`Loader must not be called again with different options. ${JSON.stringify(this.options)} !== ${JSON.stringify(Loader.instance.options)}`);\n }\n return Loader.instance;\n }\n Loader.instance = this;\n }\n get options() {\n return {\n version: this.version,\n apiKey: this.apiKey,\n channel: this.channel,\n client: this.client,\n id: this.id,\n libraries: this.libraries,\n language: this.language,\n region: this.region,\n mapIds: this.mapIds,\n nonce: this.nonce,\n url: this.url,\n authReferrerPolicy: this.authReferrerPolicy,\n };\n }\n get status() {\n if (this.errors.length) {\n return LoaderStatus.FAILURE;\n }\n if (this.done) {\n return LoaderStatus.SUCCESS;\n }\n if (this.loading) {\n return LoaderStatus.LOADING;\n }\n return LoaderStatus.INITIALIZED;\n }\n get failed() {\n return this.done && !this.loading && this.errors.length >= this.retries + 1;\n }\n /**\n * CreateUrl returns the Google Maps JavaScript API script url given the [[LoaderOptions]].\n *\n * @ignore\n * @deprecated\n */\n createUrl() {\n let url = this.url;\n url += `?callback=__googleMapsCallback&loading=async`;\n if (this.apiKey) {\n url += `&key=${this.apiKey}`;\n }\n if (this.channel) {\n url += `&channel=${this.channel}`;\n }\n if (this.client) {\n url += `&client=${this.client}`;\n }\n if (this.libraries.length > 0) {\n url += `&libraries=${this.libraries.join(\",\")}`;\n }\n if (this.language) {\n url += `&language=${this.language}`;\n }\n if (this.region) {\n url += `®ion=${this.region}`;\n }\n if (this.version) {\n url += `&v=${this.version}`;\n }\n if (this.mapIds) {\n url += `&map_ids=${this.mapIds.join(\",\")}`;\n }\n if (this.authReferrerPolicy) {\n url += `&auth_referrer_policy=${this.authReferrerPolicy}`;\n }\n return url;\n }\n deleteScript() {\n const script = document.getElementById(this.id);\n if (script) {\n script.remove();\n }\n }\n /**\n * Load the Google Maps JavaScript API script and return a Promise.\n * @deprecated, use importLibrary() instead.\n */\n load() {\n return this.loadPromise();\n }\n /**\n * Load the Google Maps JavaScript API script and return a Promise.\n *\n * @ignore\n * @deprecated, use importLibrary() instead.\n */\n loadPromise() {\n return new Promise((resolve, reject) => {\n this.loadCallback((err) => {\n if (!err) {\n resolve(window.google);\n }\n else {\n reject(err.error);\n }\n });\n });\n }\n importLibrary(name) {\n this.execute();\n return google.maps.importLibrary(name);\n }\n /**\n * Load the Google Maps JavaScript API script with a callback.\n * @deprecated, use importLibrary() instead.\n */\n loadCallback(fn) {\n this.callbacks.push(fn);\n this.execute();\n }\n /**\n * Set the script on document.\n */\n setScript() {\n var _a, _b;\n if (document.getElementById(this.id)) {\n // TODO wrap onerror callback for cases where the script was loaded elsewhere\n this.callback();\n return;\n }\n const params = {\n key: this.apiKey,\n channel: this.channel,\n client: this.client,\n libraries: this.libraries.length && this.libraries,\n v: this.version,\n mapIds: this.mapIds,\n language: this.language,\n region: this.region,\n authReferrerPolicy: this.authReferrerPolicy,\n };\n // keep the URL minimal:\n Object.keys(params).forEach(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (key) => !params[key] && delete params[key]);\n if (!((_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.importLibrary)) {\n // tweaked copy of https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import\n // which also sets the base url, the id, and the nonce\n /* eslint-disable */\n ((g) => {\n // @ts-ignore\n let h, a, k, p = \"The Google Maps JavaScript API\", c = \"google\", l = \"importLibrary\", q = \"__ib__\", m = document, b = window;\n // @ts-ignore\n b = b[c] || (b[c] = {});\n // @ts-ignore\n const d = b.maps || (b.maps = {}), r = new Set(), e = new URLSearchParams(), u = () => \n // @ts-ignore\n h || (h = new Promise((f, n) => __awaiter(this, void 0, void 0, function* () {\n var _a;\n yield (a = m.createElement(\"script\"));\n a.id = this.id;\n e.set(\"libraries\", [...r] + \"\");\n // @ts-ignore\n for (k in g)\n e.set(k.replace(/[A-Z]/g, (t) => \"_\" + t[0].toLowerCase()), g[k]);\n e.set(\"callback\", c + \".maps.\" + q);\n a.src = this.url + `?` + e;\n d[q] = f;\n a.onerror = () => (h = n(Error(p + \" could not load.\")));\n // @ts-ignore\n a.nonce = this.nonce || ((_a = m.querySelector(\"script[nonce]\")) === null || _a === void 0 ? void 0 : _a.nonce) || \"\";\n m.head.append(a);\n })));\n // @ts-ignore\n d[l] ? console.warn(p + \" only loads once. Ignoring:\", g) : (d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)));\n })(params);\n /* eslint-enable */\n }\n // While most libraries populate the global namespace when loaded via bootstrap params,\n // this is not the case for \"marker\" when used with the inline bootstrap loader\n // (and maybe others in the future). So ensure there is an importLibrary for each:\n const libraryPromises = this.libraries.map((library) => this.importLibrary(library));\n // ensure at least one library, to kick off loading...\n if (!libraryPromises.length) {\n libraryPromises.push(this.importLibrary(\"core\"));\n }\n Promise.all(libraryPromises).then(() => this.callback(), (error) => {\n const event = new ErrorEvent(\"error\", { error }); // for backwards compat\n this.loadErrorCallback(event);\n });\n }\n /**\n * Reset the loader state.\n */\n reset() {\n this.deleteScript();\n this.done = false;\n this.loading = false;\n this.errors = [];\n this.onerrorEvent = null;\n }\n resetIfRetryingFailed() {\n if (this.failed) {\n this.reset();\n }\n }\n loadErrorCallback(e) {\n this.errors.push(e);\n if (this.errors.length <= this.retries) {\n const delay = this.errors.length * Math.pow(2, this.errors.length);\n console.error(`Failed to load Google Maps script, retrying in ${delay} ms.`);\n setTimeout(() => {\n this.deleteScript();\n this.setScript();\n }, delay);\n }\n else {\n this.onerrorEvent = e;\n this.callback();\n }\n }\n callback() {\n this.done = true;\n this.loading = false;\n this.callbacks.forEach((cb) => {\n cb(this.onerrorEvent);\n });\n this.callbacks = [];\n }\n execute() {\n this.resetIfRetryingFailed();\n if (this.loading) {\n // do nothing but wait\n return;\n }\n if (this.done) {\n this.callback();\n }\n else {\n // short circuit and warn if google.maps is already loaded\n if (window.google && window.google.maps && window.google.maps.version) {\n console.warn(\"Google Maps already loaded outside @googlemaps/js-api-loader. \" +\n \"This may result in undesirable behavior as options and script parameters may not match.\");\n this.callback();\n return;\n }\n this.loading = true;\n this.setScript();\n }\n }\n}\n\nexport { DEFAULT_ID, Loader, LoaderStatus };\n//# sourceMappingURL=index.mjs.map\n","import {\n memo,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ContextType,\n} from 'react'\n\nimport {\n applyUpdatersToPropsAndRegisterEvents,\n unregisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {}\n\nconst updaterMap = {\n options(\n instance: google.maps.TrafficLayer,\n options: google.maps.TrafficLayerOptions\n ): void {\n instance.setOptions(options)\n },\n}\n\ntype TrafficLayerState = {\n trafficLayer: google.maps.TrafficLayer | null\n}\n\nexport type TrafficLayerProps = {\n options?: google.maps.TrafficLayerOptions | undefined\n /** This callback is called when the trafficLayer instance has loaded. It is called with the trafficLayer instance. */\n onLoad?: ((trafficLayer: google.maps.TrafficLayer) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the trafficLayer instance. */\n onUnmount?: ((trafficLayer: google.maps.TrafficLayer) => void) | undefined\n}\n\nfunction TrafficLayerFunctional({\n options,\n onLoad,\n onUnmount,\n}: TrafficLayerProps): null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(\n null\n )\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n if (options && instance !== null) {\n instance.setOptions(options)\n }\n }, [instance, options])\n\n useEffect(() => {\n const trafficLayer = new google.maps.TrafficLayer({\n ...options,\n map,\n })\n\n setInstance(trafficLayer)\n\n if (onLoad) {\n onLoad(trafficLayer)\n }\n\n return () => {\n if (instance !== null) {\n if (onUnmount) {\n onUnmount(instance)\n }\n\n instance.setMap(null)\n }\n }\n }, [])\n\n return null\n}\n\nexport const TrafficLayerF = memo(TrafficLayerFunctional)\n\nexport class TrafficLayer extends PureComponent<\n TrafficLayerProps,\n TrafficLayerState\n> {\n static override contextType = MapContext\n declare context: ContextType\n\n override state: TrafficLayerState = {\n trafficLayer: null,\n }\n\n setTrafficLayerCallback = () => {\n if (this.state.trafficLayer !== null && this.props.onLoad) {\n this.props.onLoad(this.state.trafficLayer)\n }\n }\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n override componentDidMount(): void {\n const trafficLayer = new google.maps.TrafficLayer({\n ...this.props.options,\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: trafficLayer,\n })\n\n this.setState(function setTrafficLayer() {\n return {\n trafficLayer,\n }\n }, this.setTrafficLayerCallback)\n }\n\n override componentDidUpdate(prevProps: TrafficLayerProps): void {\n if (this.state.trafficLayer !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.trafficLayer,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.trafficLayer !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.trafficLayer)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.trafficLayer.setMap(null)\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default TrafficLayer\n","import {\n memo,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ContextType,\n} from 'react'\n\nimport MapContext from '../../map-context.js'\n\ntype BicyclingLayerState = {\n bicyclingLayer: google.maps.BicyclingLayer | null\n}\n\nexport type BicyclingLayerProps = {\n /** This callback is called when the bicyclingLayer instance has loaded. It is called with the bicyclingLayer instance. */\n onLoad?: ((bicyclingLayer: google.maps.BicyclingLayer) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the bicyclingLayer instance. */\n onUnmount?: ((bicyclingLayer: google.maps.BicyclingLayer) => void) | undefined\n}\n\nfunction BicyclingLayerFunctional({\n onLoad,\n onUnmount,\n}: BicyclingLayerProps): null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(\n null\n )\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n const bicyclingLayer = new google.maps.BicyclingLayer()\n\n setInstance(bicyclingLayer)\n\n bicyclingLayer.setMap(map)\n\n if (onLoad) {\n onLoad(bicyclingLayer)\n }\n\n return () => {\n if (bicyclingLayer !== null) {\n if (onUnmount) {\n onUnmount(bicyclingLayer)\n }\n\n bicyclingLayer.setMap(null)\n }\n }\n }, [])\n\n return null\n}\n\nexport const BicyclingLayerF = memo(BicyclingLayerFunctional)\n\nexport class BicyclingLayer extends PureComponent<\n BicyclingLayerProps,\n BicyclingLayerState\n> {\n static override contextType = MapContext\n declare context: ContextType\n\n override state: BicyclingLayerState = {\n bicyclingLayer: null,\n }\n\n override componentDidMount(): void {\n const bicyclingLayer = new google.maps.BicyclingLayer()\n\n this.setState(() => {\n return {\n bicyclingLayer,\n }\n }, this.setBicyclingLayerCallback)\n }\n\n override componentWillUnmount(): void {\n if (this.state.bicyclingLayer !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.bicyclingLayer)\n }\n\n this.state.bicyclingLayer.setMap(null)\n }\n }\n\n setBicyclingLayerCallback = (): void => {\n if (this.state.bicyclingLayer !== null) {\n this.state.bicyclingLayer.setMap(this.context)\n\n if (this.props.onLoad) {\n this.props.onLoad(this.state.bicyclingLayer)\n }\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default BicyclingLayer\n","import {\n memo,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ContextType,\n} from 'react'\n\nimport MapContext from '../../map-context.js'\n\ntype TransitLayerState = {\n transitLayer: google.maps.TransitLayer | null\n}\n\nexport type TransitLayerProps = {\n /** This callback is called when the transitLayer instance has loaded. It is called with the transitLayer instance. */\n onLoad?: ((transitLayer: google.maps.TransitLayer) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the transitLayer instance. */\n onUnmount?: ((transitLayer: google.maps.TransitLayer) => void) | undefined\n}\n\nfunction TransitLayerFunctional({\n onLoad,\n onUnmount,\n}: TransitLayerProps): null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(\n null\n )\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n const transitLayer = new google.maps.TransitLayer()\n\n setInstance(transitLayer)\n\n transitLayer.setMap(map)\n\n if (onLoad) {\n onLoad(transitLayer)\n }\n\n return () => {\n if (instance !== null) {\n if (onUnmount) {\n onUnmount(instance)\n }\n\n instance.setMap(null)\n }\n }\n }, [])\n\n return null\n}\n\nexport const TransitLayerF = memo(TransitLayerFunctional)\n\nexport class TransitLayer extends PureComponent<\n TransitLayerProps,\n TransitLayerState\n> {\n static override contextType = MapContext\n declare context: ContextType\n\n override state: TransitLayerState = {\n transitLayer: null,\n }\n\n setTransitLayerCallback = (): void => {\n if (this.state.transitLayer !== null) {\n this.state.transitLayer.setMap(this.context)\n\n if (this.props.onLoad) {\n this.props.onLoad(this.state.transitLayer)\n }\n }\n }\n\n override componentDidMount(): void {\n const transitLayer = new google.maps.TransitLayer()\n\n this.setState(function setTransitLayer() {\n return {\n transitLayer,\n }\n }, this.setTransitLayerCallback)\n }\n\n override componentWillUnmount(): void {\n if (this.state.transitLayer !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.transitLayer)\n }\n\n this.state.transitLayer.setMap(null)\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default TransitLayer\n","/* globals google */\nimport {\n memo,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ContextType,\n} from 'react'\n\nimport invariant from 'invariant'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onCircleComplete: 'circlecomplete',\n onMarkerComplete: 'markercomplete',\n onOverlayComplete: 'overlaycomplete',\n onPolygonComplete: 'polygoncomplete',\n onPolylineComplete: 'polylinecomplete',\n onRectangleComplete: 'rectanglecomplete',\n}\n\nconst updaterMap = {\n drawingMode(\n instance: google.maps.drawing.DrawingManager,\n drawingMode: google.maps.drawing.OverlayType | null\n ): void {\n instance.setDrawingMode(drawingMode)\n },\n options(\n instance: google.maps.drawing.DrawingManager,\n options: google.maps.drawing.DrawingManagerOptions\n ): void {\n instance.setOptions(options)\n },\n}\n\ntype DrawingManagerState = {\n drawingManager: google.maps.drawing.DrawingManager | null\n}\n\nexport type DrawingManagerProps = {\n options?: google.maps.drawing.DrawingManagerOptions | undefined\n /** Changes the DrawingManager's drawing mode, which defines the type of overlay to be added on the map. Accepted values are 'marker', 'polygon', 'polyline', 'rectangle', 'circle', or null. A drawing mode of null means that the user can interact with the map as normal, and clicks do not draw anything. */\n drawingMode?: google.maps.drawing.OverlayType | null | undefined\n /** This event is fired when the user has finished drawing a circle. */\n onCircleComplete?: ((circle: google.maps.Circle) => void) | undefined\n /** This event is fired when the user has finished drawing a marker. */\n onMarkerComplete?: ((marker: google.maps.Marker) => void) | undefined\n /** This event is fired when the user has finished drawing an overlay of any type. */\n onOverlayComplete?:\n | ((e: google.maps.drawing.OverlayCompleteEvent) => void)\n | undefined\n /** This event is fired when the user has finished drawing a polygon. */\n onPolygonComplete?: ((polygon: google.maps.Polygon) => void) | undefined\n /** This event is fired when the user has finished drawing a polyline. */\n onPolylineComplete?: ((polyline: google.maps.Polyline) => void) | undefined\n /** This event is fired when the user has finished drawing a rectangle. */\n onRectangleComplete?: ((rectangle: google.maps.Rectangle) => void) | undefined\n /** This callback is called when the drawingManager instance has loaded. It is called with the drawingManager instance. */\n onLoad?:\n | ((drawingManager: google.maps.drawing.DrawingManager) => void)\n | undefined\n /** This callback is called when the component unmounts. It is called with the drawingManager instance. */\n onUnmount?:\n | ((drawingManager: google.maps.drawing.DrawingManager) => void)\n | undefined\n}\n\nfunction DrawingManagerFunctional({\n options,\n drawingMode,\n onCircleComplete,\n onMarkerComplete,\n onOverlayComplete,\n onPolygonComplete,\n onPolylineComplete,\n onRectangleComplete,\n onLoad,\n onUnmount,\n}: DrawingManagerProps): null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] =\n useState(null)\n\n const [circlecompleteListener, setCircleCompleteListener] =\n useState(null)\n const [markercompleteListener, setMarkerCompleteListener] =\n useState(null)\n const [overlaycompleteListener, setOverlayCompleteListener] =\n useState(null)\n const [polygoncompleteListener, setPolygonCompleteListener] =\n useState(null)\n const [polylinecompleteListener, setPolylineCompleteListener] =\n useState(null)\n const [rectanglecompleteListener, setRectangleCompleteListener] =\n useState(null)\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n if (options && instance !== null) {\n instance.setOptions(options)\n }\n }, [instance, options])\n\n useEffect(() => {\n if (instance !== null) {\n instance.setDrawingMode(drawingMode ?? null)\n }\n }, [instance, drawingMode])\n\n useEffect(() => {\n if (instance && onCircleComplete) {\n if (circlecompleteListener !== null) {\n google.maps.event.removeListener(circlecompleteListener)\n }\n\n setCircleCompleteListener(\n google.maps.event.addListener(\n instance,\n 'circlecomplete',\n onCircleComplete\n )\n )\n }\n }, [instance, onCircleComplete])\n\n useEffect(() => {\n if (instance && onMarkerComplete) {\n if (markercompleteListener !== null) {\n google.maps.event.removeListener(markercompleteListener)\n }\n\n setMarkerCompleteListener(\n google.maps.event.addListener(\n instance,\n 'markercomplete',\n onMarkerComplete\n )\n )\n }\n }, [instance, onMarkerComplete])\n\n useEffect(() => {\n if (instance && onOverlayComplete) {\n if (overlaycompleteListener !== null) {\n google.maps.event.removeListener(overlaycompleteListener)\n }\n\n setOverlayCompleteListener(\n google.maps.event.addListener(\n instance,\n 'overlaycomplete',\n onOverlayComplete\n )\n )\n }\n }, [instance, onOverlayComplete])\n\n useEffect(() => {\n if (instance && onPolygonComplete) {\n if (polygoncompleteListener !== null) {\n google.maps.event.removeListener(polygoncompleteListener)\n }\n\n setPolygonCompleteListener(\n google.maps.event.addListener(\n instance,\n 'polygoncomplete',\n onPolygonComplete\n )\n )\n }\n }, [instance, onPolygonComplete])\n\n useEffect(() => {\n if (instance && onPolylineComplete) {\n if (polylinecompleteListener !== null) {\n google.maps.event.removeListener(polylinecompleteListener)\n }\n\n setPolylineCompleteListener(\n google.maps.event.addListener(\n instance,\n 'polylinecomplete',\n onPolylineComplete\n )\n )\n }\n }, [instance, onPolylineComplete])\n\n useEffect(() => {\n if (instance && onRectangleComplete) {\n if (rectanglecompleteListener !== null) {\n google.maps.event.removeListener(rectanglecompleteListener)\n }\n\n setRectangleCompleteListener(\n google.maps.event.addListener(\n instance,\n 'rectanglecomplete',\n onRectangleComplete\n )\n )\n }\n }, [instance, onRectangleComplete])\n\n useEffect(() => {\n invariant(\n !!google.maps.drawing,\n `Did you include prop libraries={['drawing']} in the URL? %s`,\n google.maps.drawing\n )\n\n const drawingManager = new google.maps.drawing.DrawingManager({\n ...options,\n map,\n })\n\n if (drawingMode) {\n drawingManager.setDrawingMode(drawingMode)\n }\n\n if (onCircleComplete) {\n setCircleCompleteListener(\n google.maps.event.addListener(\n drawingManager,\n 'circlecomplete',\n onCircleComplete\n )\n )\n }\n\n if (onMarkerComplete) {\n setMarkerCompleteListener(\n google.maps.event.addListener(\n drawingManager,\n 'markercomplete',\n onMarkerComplete\n )\n )\n }\n\n if (onOverlayComplete) {\n setOverlayCompleteListener(\n google.maps.event.addListener(\n drawingManager,\n 'overlaycomplete',\n onOverlayComplete\n )\n )\n }\n\n if (onPolygonComplete) {\n setPolygonCompleteListener(\n google.maps.event.addListener(\n drawingManager,\n 'polygoncomplete',\n onPolygonComplete\n )\n )\n }\n\n if (onPolylineComplete) {\n setPolylineCompleteListener(\n google.maps.event.addListener(\n drawingManager,\n 'polylinecomplete',\n onPolylineComplete\n )\n )\n }\n\n if (onRectangleComplete) {\n setRectangleCompleteListener(\n google.maps.event.addListener(\n drawingManager,\n 'rectanglecomplete',\n onRectangleComplete\n )\n )\n }\n\n setInstance(drawingManager)\n\n if (onLoad) {\n onLoad(drawingManager)\n }\n\n return () => {\n if (instance !== null) {\n if (circlecompleteListener) {\n google.maps.event.removeListener(circlecompleteListener)\n }\n\n if (markercompleteListener) {\n google.maps.event.removeListener(markercompleteListener)\n }\n\n if (overlaycompleteListener) {\n google.maps.event.removeListener(overlaycompleteListener)\n }\n\n if (polygoncompleteListener) {\n google.maps.event.removeListener(polygoncompleteListener)\n }\n\n if (polylinecompleteListener) {\n google.maps.event.removeListener(polylinecompleteListener)\n }\n\n if (rectanglecompleteListener) {\n google.maps.event.removeListener(rectanglecompleteListener)\n }\n\n if (onUnmount) {\n onUnmount(instance)\n }\n\n instance.setMap(null)\n }\n }\n }, [])\n\n return null\n}\n\nexport const DrawingManagerF = memo(DrawingManagerFunctional)\n\nexport class DrawingManager extends PureComponent<\n DrawingManagerProps,\n DrawingManagerState\n> {\n static override contextType = MapContext\n\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n override state: DrawingManagerState = {\n drawingManager: null,\n }\n\n constructor(props: DrawingManagerProps) {\n super(props)\n\n invariant(\n !!google.maps.drawing,\n `Did you include prop libraries={['drawing']} in the URL? %s`,\n google.maps.drawing\n )\n }\n\n setDrawingManagerCallback = (): void => {\n if (this.state.drawingManager !== null && this.props.onLoad) {\n this.props.onLoad(this.state.drawingManager)\n }\n }\n\n override componentDidMount(): void {\n const drawingManager = new google.maps.drawing.DrawingManager({\n ...this.props.options,\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: drawingManager,\n })\n\n this.setState(function setDrawingManager() {\n return {\n drawingManager,\n }\n }, this.setDrawingManagerCallback)\n }\n\n override componentDidUpdate(prevProps: DrawingManagerProps): void {\n if (this.state.drawingManager !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.drawingManager,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.drawingManager !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.drawingManager)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.drawingManager.setMap(null)\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default DrawingManager\n","import {\n memo,\n useMemo,\n Children,\n useState,\n type JSX,\n useEffect,\n useContext,\n cloneElement,\n PureComponent,\n isValidElement,\n type ReactNode,\n type ContextType,\n type ReactElement,\n} from 'react'\nimport type { Clusterer } from '@react-google-maps/marker-clusterer'\nimport type { MarkerClusterer as GoogleClusterer } from '@googlemaps/markerclusterer'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\nimport type { HasMarkerAnchor } from '../../types.js'\n\nconst eventMap = {\n onAnimationChanged: 'animation_changed',\n onClick: 'click',\n onClickableChanged: 'clickable_changed',\n onCursorChanged: 'cursor_changed',\n onDblClick: 'dblclick',\n onDrag: 'drag',\n onDragEnd: 'dragend',\n onDraggableChanged: 'draggable_changed',\n onDragStart: 'dragstart',\n onFlatChanged: 'flat_changed',\n onIconChanged: 'icon_changed',\n onMouseDown: 'mousedown',\n onMouseOut: 'mouseout',\n onMouseOver: 'mouseover',\n onMouseUp: 'mouseup',\n onPositionChanged: 'position_changed',\n onRightClick: 'rightclick',\n onShapeChanged: 'shape_changed',\n onTitleChanged: 'title_changed',\n onVisibleChanged: 'visible_changed',\n onZindexChanged: 'zindex_changed',\n}\n\nconst updaterMap = {\n animation(\n instance: google.maps.Marker,\n animation: google.maps.Animation\n ): void {\n instance.setAnimation(animation)\n },\n clickable(instance: google.maps.Marker, clickable: boolean): void {\n instance.setClickable(clickable)\n },\n cursor(instance: google.maps.Marker, cursor: string): void {\n instance.setCursor(cursor)\n },\n draggable(instance: google.maps.Marker, draggable: boolean): void {\n instance.setDraggable(draggable)\n },\n icon(\n instance: google.maps.Marker,\n icon: string | google.maps.Icon | google.maps.Symbol\n ): void {\n instance.setIcon(icon)\n },\n label(\n instance: google.maps.Marker,\n label: string | google.maps.MarkerLabel\n ): void {\n instance.setLabel(label)\n },\n map(instance: google.maps.Marker, map: google.maps.Map): void {\n instance.setMap(map)\n },\n opacity(instance: google.maps.Marker, opacity: number): void {\n instance.setOpacity(opacity)\n },\n options(\n instance: google.maps.Marker,\n options: google.maps.MarkerOptions\n ): void {\n instance.setOptions(options)\n },\n position(\n instance: google.maps.Marker,\n position: google.maps.LatLng | google.maps.LatLngLiteral\n ): void {\n instance.setPosition(position)\n },\n shape(instance: google.maps.Marker, shape: google.maps.MarkerShape): void {\n instance.setShape(shape)\n },\n title(instance: google.maps.Marker, title: string): void {\n instance.setTitle(title)\n },\n visible(instance: google.maps.Marker, visible: boolean): void {\n instance.setVisible(visible)\n },\n zIndex(instance: google.maps.Marker, zIndex: number): void {\n instance.setZIndex(zIndex)\n },\n}\n\nexport type MarkerProps = {\n // required\n /** Marker position. */\n position: google.maps.LatLng | google.maps.LatLngLiteral\n\n children?: ReactNode | undefined\n options?: google.maps.MarkerOptions | undefined\n /** Start an animation. Any ongoing animation will be cancelled. Currently supported animations are: BOUNCE, DROP. Passing in null will cause any animation to stop. */\n animation?: google.maps.Animation | undefined\n /** If true, the marker receives mouse and touch events. Default value is true. */\n clickable?: boolean | undefined\n /** Mouse cursor to show on hover */\n cursor?: string | undefined\n /** If true, the marker can be dragged. Default value is false. */\n draggable?: boolean | undefined\n /** Icon for the foreground. If a string is provided, it is treated as though it were an Icon with the string as url. */\n icon?: string | google.maps.Icon | google.maps.Symbol | undefined\n /** Adds a label to the marker. The label can either be a string, or a MarkerLabel object. */\n label?: string | google.maps.MarkerLabel | undefined\n /** The marker's opacity between 0.0 and 1.0. */\n opacity?: number | undefined\n\n /** Image map region definition used for drag/click. */\n shape?: google.maps.MarkerShape | undefined\n /** Rollover text */\n title?: string | undefined\n /** If true, the marker is visible */\n visible?: boolean | undefined\n /** All markers are displayed on the map in order of their zIndex, with higher values displaying in front of markers with lower values. By default, markers are displayed according to their vertical position on screen, with lower markers appearing in front of markers further up the screen. */\n zIndex?: number | undefined\n /** Render prop that handles clustering markers */\n clusterer?: Clusterer | GoogleClusterer | undefined\n /** Clusters are redrawn when a Marker is added unless noClustererRedraw? is set to true. */\n noClustererRedraw?: boolean | undefined\n /** This event is fired when the marker icon was clicked. */\n onClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the marker's clickable property changes. */\n onClickableChanged?: (() => void) | undefined\n /** This event is fired when the marker's cursor property changes. */\n onCursorChanged?: (() => void) | undefined\n /** This event is fired when the marker's animation property changes. */\n onAnimationChanged?: (() => void) | undefined\n /** This event is fired when the marker icon was double clicked. */\n onDblClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is repeatedly fired while the user drags the marker. */\n onDrag?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user stops dragging the marker. */\n onDragEnd?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the marker's draggable property changes. */\n onDraggableChanged?: (() => void) | undefined\n /** This event is fired when the user starts dragging the marker. */\n onDragStart?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the marker's flat property changes. */\n onFlatChanged?: (() => void) | undefined\n /** This event is fired when the marker icon property changes. */\n onIconChanged?: (() => void) | undefined\n /** This event is fired for a mousedown on the marker. */\n onMouseDown?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the mouse leaves the area of the marker icon. */\n onMouseOut?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the mouse enters the area of the marker icon. */\n onMouseOver?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired for a mouseup on the marker. */\n onMouseUp?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the marker position property changes. */\n onPositionChanged?: (() => void) | undefined\n /** This event is fired for a rightclick on the marker. */\n onRightClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the marker's shape property changes. */\n onShapeChanged?: (() => void) | undefined\n /** This event is fired when the marker title property changes. */\n onTitleChanged?: (() => void) | undefined\n /** This event is fired when the marker's visible property changes. */\n onVisibleChanged?: (() => void) | undefined\n /** This event is fired when the marker's zIndex property changes. */\n onZindexChanged?: (() => void) | undefined\n /** This callback is called when the marker instance has loaded. It is called with the marker instance. */\n onLoad?: ((marker: google.maps.Marker) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the marker instance. */\n onUnmount?: ((marker: google.maps.Marker) => void) | undefined\n}\n\nconst defaultOptions = {}\n\nfunction MarkerFunctional({\n position,\n options,\n clusterer,\n noClustererRedraw,\n\n children,\n\n draggable,\n visible,\n animation,\n clickable,\n cursor,\n icon,\n label,\n opacity,\n shape,\n title,\n zIndex,\n onClick,\n onDblClick,\n onDrag,\n onDragEnd,\n onDragStart,\n onMouseOut,\n onMouseOver,\n onMouseUp,\n onMouseDown,\n onRightClick,\n onClickableChanged,\n onCursorChanged,\n onAnimationChanged,\n onDraggableChanged,\n onFlatChanged,\n onIconChanged,\n onPositionChanged,\n onShapeChanged,\n onTitleChanged,\n onVisibleChanged,\n onZindexChanged,\n onLoad,\n onUnmount,\n}: MarkerProps): JSX.Element | null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(null)\n\n const [dblclickListener, setDblclickListener] =\n useState(null)\n const [dragendListener, setDragendListener] =\n useState(null)\n const [dragstartListener, setDragstartListener] =\n useState(null)\n const [mousedownListener, setMousedownListener] =\n useState(null)\n const [mouseoutListener, setMouseoutListener] =\n useState(null)\n const [mouseoverListener, setMouseoverListener] =\n useState(null)\n const [mouseupListener, setMouseupListener] =\n useState(null)\n const [rightclickListener, setRightclickListener] =\n useState(null)\n const [clickListener, setClickListener] =\n useState(null)\n const [dragListener, setDragListener] =\n useState(null)\n\n const [clickableChangedListener, setClickableChangedListener] =\n useState(null)\n const [cursorChangedListener, setCursorChangedListener] =\n useState(null)\n const [animationChangedListener, setAnimationChangedListener] =\n useState(null)\n const [draggableChangedListener, setDraggableChangedListener] =\n useState(null)\n const [flatChangedListener, setFlatChangedListener] =\n useState(null)\n const [iconChangedListener, setIconChangedListener] =\n useState(null)\n const [positionChangedListener, setPositionChangedListener] =\n useState(null)\n const [shapeChangedListener, setShapeChangedListener] =\n useState(null)\n const [titleChangedListener, setTitleChangedListener] =\n useState(null)\n const [visibleChangedListener, setVisibleChangedListener] =\n useState(null)\n const [zIndexChangedListener, setZindexChangedListener] =\n useState(null)\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n if (typeof options !== 'undefined' && instance !== null) {\n instance.setOptions(options)\n }\n }, [instance, options])\n\n useEffect(() => {\n if (typeof draggable !== 'undefined' && instance !== null) {\n instance.setDraggable(draggable)\n }\n }, [instance, draggable])\n\n useEffect(() => {\n if (position && instance !== null) {\n instance.setPosition(position)\n }\n }, [instance, position])\n\n useEffect(() => {\n if (typeof visible !== 'undefined' && instance !== null) {\n instance.setVisible(visible)\n }\n }, [instance, visible])\n\n useEffect(() => {\n instance?.setAnimation(animation)\n }, [instance, animation])\n\n useEffect(() => {\n if (instance && clickable !== undefined) {\n instance.setClickable(clickable)\n }\n }, [instance, clickable])\n\n useEffect(() => {\n if (instance && cursor !== undefined) {\n instance.setCursor(cursor)\n }\n }, [instance, cursor])\n\n useEffect(() => {\n if (instance && icon !== undefined) {\n instance.setIcon(icon)\n }\n }, [instance, icon])\n\n useEffect(() => {\n if (instance && label !== undefined) {\n instance.setLabel(label)\n }\n }, [instance, label])\n\n useEffect(() => {\n if (instance && opacity !== undefined) {\n instance.setOpacity(opacity)\n }\n }, [instance, opacity])\n\n useEffect(() => {\n if (instance && shape !== undefined) {\n instance.setShape(shape)\n }\n }, [instance, shape])\n\n useEffect(() => {\n if (instance && title !== undefined) {\n instance.setTitle(title)\n }\n }, [instance, title])\n\n useEffect(() => {\n if (instance && zIndex !== undefined) {\n instance.setZIndex(zIndex)\n }\n }, [instance, zIndex])\n\n useEffect(() => {\n if (instance && onDblClick) {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n setDblclickListener(\n google.maps.event.addListener(instance, 'dblclick', onDblClick)\n )\n }\n }, [onDblClick])\n\n useEffect(() => {\n if (instance && onDragEnd) {\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n setDragendListener(\n google.maps.event.addListener(instance, 'dragend', onDragEnd)\n )\n }\n }, [onDragEnd])\n\n useEffect(() => {\n if (instance && onDragStart) {\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n setDragstartListener(\n google.maps.event.addListener(instance, 'dragstart', onDragStart)\n )\n }\n }, [onDragStart])\n\n useEffect(() => {\n if (instance && onMouseDown) {\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n setMousedownListener(\n google.maps.event.addListener(instance, 'mousedown', onMouseDown)\n )\n }\n }, [onMouseDown])\n\n useEffect(() => {\n if (instance && onMouseOut) {\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n setMouseoutListener(\n google.maps.event.addListener(instance, 'mouseout', onMouseOut)\n )\n }\n }, [onMouseOut])\n\n useEffect(() => {\n if (instance && onMouseOver) {\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n setMouseoverListener(\n google.maps.event.addListener(instance, 'mouseover', onMouseOver)\n )\n }\n }, [onMouseOver])\n\n useEffect(() => {\n if (instance && onMouseUp) {\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n setMouseupListener(\n google.maps.event.addListener(instance, 'mouseup', onMouseUp)\n )\n }\n }, [onMouseUp])\n\n useEffect(() => {\n if (instance && onRightClick) {\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n setRightclickListener(\n google.maps.event.addListener(instance, 'rightclick', onRightClick)\n )\n }\n }, [onRightClick])\n\n useEffect(() => {\n if (instance && onClick) {\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n setClickListener(\n google.maps.event.addListener(instance, 'click', onClick)\n )\n }\n }, [onClick])\n\n useEffect(() => {\n if (instance && onDrag) {\n if (dragListener !== null) {\n google.maps.event.removeListener(dragListener)\n }\n\n setDragListener(google.maps.event.addListener(instance, 'drag', onDrag))\n }\n }, [onDrag])\n\n useEffect(() => {\n if (instance && onClickableChanged) {\n if (clickableChangedListener !== null) {\n google.maps.event.removeListener(clickableChangedListener)\n }\n\n setClickableChangedListener(\n google.maps.event.addListener(\n instance,\n 'clickable_changed',\n onClickableChanged\n )\n )\n }\n }, [onClickableChanged])\n\n useEffect(() => {\n if (instance && onCursorChanged) {\n if (cursorChangedListener !== null) {\n google.maps.event.removeListener(cursorChangedListener)\n }\n\n setCursorChangedListener(\n google.maps.event.addListener(\n instance,\n 'cursor_changed',\n onCursorChanged\n )\n )\n }\n }, [onCursorChanged])\n\n useEffect(() => {\n if (instance && onAnimationChanged) {\n if (animationChangedListener !== null) {\n google.maps.event.removeListener(animationChangedListener)\n }\n\n setAnimationChangedListener(\n google.maps.event.addListener(\n instance,\n 'animation_changed',\n onAnimationChanged\n )\n )\n }\n }, [onAnimationChanged])\n\n useEffect(() => {\n if (instance && onDraggableChanged) {\n if (draggableChangedListener !== null) {\n google.maps.event.removeListener(draggableChangedListener)\n }\n\n setDraggableChangedListener(\n google.maps.event.addListener(\n instance,\n 'draggable_changed',\n onDraggableChanged\n )\n )\n }\n }, [onDraggableChanged])\n\n useEffect(() => {\n if (instance && onFlatChanged) {\n if (flatChangedListener !== null) {\n google.maps.event.removeListener(flatChangedListener)\n }\n\n setFlatChangedListener(\n google.maps.event.addListener(instance, 'flat_changed', onFlatChanged)\n )\n }\n }, [onFlatChanged])\n\n useEffect(() => {\n if (instance && onIconChanged) {\n if (iconChangedListener !== null) {\n google.maps.event.removeListener(iconChangedListener)\n }\n\n setIconChangedListener(\n google.maps.event.addListener(instance, 'icon_changed', onIconChanged)\n )\n }\n }, [onIconChanged])\n\n useEffect(() => {\n if (instance && onPositionChanged) {\n if (positionChangedListener !== null) {\n google.maps.event.removeListener(positionChangedListener)\n }\n\n setPositionChangedListener(\n google.maps.event.addListener(\n instance,\n 'position_changed',\n onPositionChanged\n )\n )\n }\n }, [onPositionChanged])\n\n useEffect(() => {\n if (instance && onShapeChanged) {\n if (shapeChangedListener !== null) {\n google.maps.event.removeListener(shapeChangedListener)\n }\n\n setShapeChangedListener(\n google.maps.event.addListener(instance, 'shape_changed', onShapeChanged)\n )\n }\n }, [onShapeChanged])\n\n useEffect(() => {\n if (instance && onTitleChanged) {\n if (titleChangedListener !== null) {\n google.maps.event.removeListener(titleChangedListener)\n }\n\n setTitleChangedListener(\n google.maps.event.addListener(instance, 'title_changed', onTitleChanged)\n )\n }\n }, [onTitleChanged])\n\n useEffect(() => {\n if (instance && onVisibleChanged) {\n if (visibleChangedListener !== null) {\n google.maps.event.removeListener(visibleChangedListener)\n }\n\n setVisibleChangedListener(\n google.maps.event.addListener(\n instance,\n 'visible_changed',\n onVisibleChanged\n )\n )\n }\n }, [onVisibleChanged])\n\n useEffect(() => {\n if (instance && onZindexChanged) {\n if (zIndexChangedListener !== null) {\n google.maps.event.removeListener(zIndexChangedListener)\n }\n\n setZindexChangedListener(\n google.maps.event.addListener(\n instance,\n 'zindex_changed',\n onZindexChanged\n )\n )\n }\n }, [onZindexChanged])\n\n useEffect(() => {\n const markerOptions = {\n ...(options || defaultOptions),\n ...(clusterer ? defaultOptions : { map }),\n position,\n }\n\n const marker = new google.maps.Marker(markerOptions)\n\n if (clusterer) {\n clusterer.addMarker(marker, !!noClustererRedraw)\n } else {\n marker.setMap(map)\n }\n\n if (position) {\n marker.setPosition(position)\n }\n\n if (typeof visible !== 'undefined') {\n marker.setVisible(visible)\n }\n\n if (typeof draggable !== 'undefined') {\n marker.setDraggable(draggable)\n }\n\n if (typeof clickable !== 'undefined') {\n marker.setClickable(clickable)\n }\n\n if (typeof cursor === 'string') {\n marker.setCursor(cursor)\n }\n\n if (icon) {\n marker.setIcon(icon)\n }\n\n if (typeof label !== 'undefined') {\n marker.setLabel(label)\n }\n\n if (typeof opacity !== 'undefined') {\n marker.setOpacity(opacity)\n }\n\n if (shape) {\n marker.setShape(shape)\n }\n\n if (typeof title === 'string') {\n marker.setTitle(title)\n }\n\n if (typeof zIndex === 'number') {\n marker.setZIndex(zIndex)\n }\n\n if (onDblClick) {\n setDblclickListener(\n google.maps.event.addListener(marker, 'dblclick', onDblClick)\n )\n }\n\n if (onDragEnd) {\n setDragendListener(\n google.maps.event.addListener(marker, 'dragend', onDragEnd)\n )\n }\n\n if (onDragStart) {\n setDragstartListener(\n google.maps.event.addListener(marker, 'dragstart', onDragStart)\n )\n }\n\n if (onMouseDown) {\n setMousedownListener(\n google.maps.event.addListener(marker, 'mousedown', onMouseDown)\n )\n }\n\n if (onMouseOut) {\n setMouseoutListener(\n google.maps.event.addListener(marker, 'mouseout', onMouseOut)\n )\n }\n\n if (onMouseOver) {\n setMouseoverListener(\n google.maps.event.addListener(marker, 'mouseover', onMouseOver)\n )\n }\n\n if (onMouseUp) {\n setMouseupListener(\n google.maps.event.addListener(marker, 'mouseup', onMouseUp)\n )\n }\n\n if (onRightClick) {\n setRightclickListener(\n google.maps.event.addListener(marker, 'rightclick', onRightClick)\n )\n }\n\n if (onClick) {\n setClickListener(google.maps.event.addListener(marker, 'click', onClick))\n }\n\n if (onDrag) {\n setDragListener(google.maps.event.addListener(marker, 'drag', onDrag))\n }\n\n if (onClickableChanged) {\n setClickableChangedListener(\n google.maps.event.addListener(\n marker,\n 'clickable_changed',\n onClickableChanged\n )\n )\n }\n\n if (onCursorChanged) {\n setCursorChangedListener(\n google.maps.event.addListener(marker, 'cursor_changed', onCursorChanged)\n )\n }\n\n if (onAnimationChanged) {\n setAnimationChangedListener(\n google.maps.event.addListener(\n marker,\n 'animation_changed',\n onAnimationChanged\n )\n )\n }\n\n if (onDraggableChanged) {\n setDraggableChangedListener(\n google.maps.event.addListener(\n marker,\n 'draggable_changed',\n onDraggableChanged\n )\n )\n }\n\n if (onFlatChanged) {\n setFlatChangedListener(\n google.maps.event.addListener(marker, 'flat_changed', onFlatChanged)\n )\n }\n\n if (onIconChanged) {\n setIconChangedListener(\n google.maps.event.addListener(marker, 'icon_changed', onIconChanged)\n )\n }\n\n if (onPositionChanged) {\n setPositionChangedListener(\n google.maps.event.addListener(\n marker,\n 'position_changed',\n onPositionChanged\n )\n )\n }\n\n if (onShapeChanged) {\n setShapeChangedListener(\n google.maps.event.addListener(marker, 'shape_changed', onShapeChanged)\n )\n }\n\n if (onTitleChanged) {\n setTitleChangedListener(\n google.maps.event.addListener(marker, 'title_changed', onTitleChanged)\n )\n }\n\n if (onVisibleChanged) {\n setVisibleChangedListener(\n google.maps.event.addListener(\n marker,\n 'visible_changed',\n onVisibleChanged\n )\n )\n }\n\n if (onZindexChanged) {\n setZindexChangedListener(\n google.maps.event.addListener(marker, 'zindex_changed', onZindexChanged)\n )\n }\n\n setInstance(marker)\n\n if (onLoad) {\n onLoad(marker)\n }\n\n return () => {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n if (clickableChangedListener !== null) {\n google.maps.event.removeListener(clickableChangedListener)\n }\n\n if (cursorChangedListener !== null) {\n google.maps.event.removeListener(cursorChangedListener)\n }\n\n if (animationChangedListener !== null) {\n google.maps.event.removeListener(animationChangedListener)\n }\n\n if (draggableChangedListener !== null) {\n google.maps.event.removeListener(draggableChangedListener)\n }\n\n if (flatChangedListener !== null) {\n google.maps.event.removeListener(flatChangedListener)\n }\n\n if (iconChangedListener !== null) {\n google.maps.event.removeListener(iconChangedListener)\n }\n\n if (positionChangedListener !== null) {\n google.maps.event.removeListener(positionChangedListener)\n }\n\n if (titleChangedListener !== null) {\n google.maps.event.removeListener(titleChangedListener)\n }\n\n if (visibleChangedListener !== null) {\n google.maps.event.removeListener(visibleChangedListener)\n }\n\n if (zIndexChangedListener !== null) {\n google.maps.event.removeListener(zIndexChangedListener)\n }\n\n if (onUnmount) {\n onUnmount(marker)\n }\n\n if (clusterer) {\n clusterer.removeMarker(marker, !!noClustererRedraw)\n } else if (marker) {\n marker.setMap(null)\n }\n }\n }, [])\n\n const chx = useMemo(() => {\n return children\n ? Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return child\n }\n\n const elementChild: ReactElement = child\n\n return cloneElement(elementChild, { anchor: instance })\n })\n : null\n }, [children, instance])\n\n return <>{chx} || null\n}\n\nexport const MarkerF = memo(MarkerFunctional)\n\nexport class Marker extends PureComponent {\n static override contextType = MapContext\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n marker: google.maps.Marker | undefined\n\n override async componentDidMount(): Promise {\n const markerOptions = {\n ...(this.props.options || defaultOptions),\n ...(this.props.clusterer ? defaultOptions : { map: this.context }),\n position: this.props.position,\n }\n\n // Unfortunately we can't just do this in the contstructor, because the\n // `MapContext` might not be filled in yet.\n this.marker = new google.maps.Marker(markerOptions)\n\n if (this.props.clusterer) {\n this.props.clusterer.addMarker(\n this.marker,\n !!this.props.noClustererRedraw\n )\n } else {\n this.marker.setMap(this.context)\n }\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: this.marker,\n })\n\n if (this.props.onLoad) {\n this.props.onLoad(this.marker)\n }\n }\n\n override componentDidUpdate(prevProps: MarkerProps): void {\n if (this.marker) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.marker,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (!this.marker) {\n return\n }\n\n if (this.props.onUnmount) {\n this.props.onUnmount(this.marker)\n }\n\n unregisterEvents(this.registeredEvents)\n\n if (this.props.clusterer) {\n this.props.clusterer.removeMarker(\n this.marker,\n !!this.props.noClustererRedraw\n )\n } else if (this.marker) {\n this.marker.setMap(null)\n }\n }\n\n override render(): ReactNode {\n const children: ReactNode | null = this.props.children\n ? Children.map(this.props.children, (child) => {\n if (!isValidElement(child)) {\n return child\n }\n\n const elementChild: ReactElement = child\n\n return cloneElement(elementChild, { anchor: this.marker })\n })\n : null\n\n return children || null\n }\n}\n\nexport default Marker\n","var ClusterIcon = /** @class */ (function () {\n function ClusterIcon(cluster, styles) {\n cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView);\n this.cluster = cluster;\n this.clusterClassName = this.cluster.getClusterer().getClusterClass();\n this.className = this.clusterClassName;\n this.styles = styles;\n this.center = undefined;\n this.div = null;\n this.sums = null;\n this.visible = false;\n this.boundsChangedListener = null;\n this.url = '';\n this.height = 0;\n this.width = 0;\n this.anchorText = [0, 0];\n this.anchorIcon = [0, 0];\n this.textColor = 'black';\n this.textSize = 11;\n this.textDecoration = 'none';\n this.fontWeight = 'bold';\n this.fontStyle = 'normal';\n this.fontFamily = 'Arial,sans-serif';\n this.backgroundPosition = '0 0';\n this.cMouseDownInCluster = null;\n this.cDraggingMapByCluster = null;\n this.timeOut = null;\n this.setMap(cluster.getMap()); // Note: this causes onAdd to be called\n this.onBoundsChanged = this.onBoundsChanged.bind(this);\n this.onMouseDown = this.onMouseDown.bind(this);\n this.onClick = this.onClick.bind(this);\n this.onMouseOver = this.onMouseOver.bind(this);\n this.onMouseOut = this.onMouseOut.bind(this);\n this.onAdd = this.onAdd.bind(this);\n this.onRemove = this.onRemove.bind(this);\n this.draw = this.draw.bind(this);\n this.hide = this.hide.bind(this);\n this.show = this.show.bind(this);\n this.useStyle = this.useStyle.bind(this);\n this.setCenter = this.setCenter.bind(this);\n this.getPosFromLatLng = this.getPosFromLatLng.bind(this);\n }\n ClusterIcon.prototype.onBoundsChanged = function () {\n this.cDraggingMapByCluster = this.cMouseDownInCluster;\n };\n ClusterIcon.prototype.onMouseDown = function () {\n this.cMouseDownInCluster = true;\n this.cDraggingMapByCluster = false;\n };\n ClusterIcon.prototype.onClick = function (event) {\n this.cMouseDownInCluster = false;\n if (!this.cDraggingMapByCluster) {\n var markerClusterer_1 = this.cluster.getClusterer();\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(markerClusterer_1, 'click', this.cluster);\n google.maps.event.trigger(markerClusterer_1, 'clusterclick', this.cluster); // deprecated name\n // The default click handler follows. Disable it by setting\n // the zoomOnClick property to false.\n if (markerClusterer_1.getZoomOnClick()) {\n // Zoom into the cluster.\n var maxZoom_1 = markerClusterer_1.getMaxZoom();\n var bounds_1 = this.cluster.getBounds();\n var map = markerClusterer_1.getMap();\n if (map !== null && 'fitBounds' in map) {\n map.fitBounds(bounds_1);\n }\n // There is a fix for Issue 170 here:\n this.timeOut = window.setTimeout(function () {\n var map = markerClusterer_1.getMap();\n if (map !== null) {\n if ('fitBounds' in map) {\n map.fitBounds(bounds_1);\n }\n var zoom = map.getZoom() || 0;\n // Don't zoom beyond the max zoom level\n if (maxZoom_1 !== null &&\n zoom > maxZoom_1) {\n map.setZoom(maxZoom_1 + 1);\n }\n }\n }, 100);\n }\n // Prevent event propagation to the map:\n event.cancelBubble = true;\n if (event.stopPropagation) {\n event.stopPropagation();\n }\n }\n };\n ClusterIcon.prototype.onMouseOver = function () {\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(this.cluster.getClusterer(), 'mouseover', this.cluster);\n };\n ClusterIcon.prototype.onMouseOut = function () {\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(this.cluster.getClusterer(), 'mouseout', this.cluster);\n };\n ClusterIcon.prototype.onAdd = function () {\n var _a;\n this.div = document.createElement('div');\n this.div.className = this.className;\n if (this.visible) {\n this.show();\n }\n (_a = this.getPanes()) === null || _a === void 0 ? void 0 : _a.overlayMouseTarget.appendChild(this.div);\n var map = this.getMap();\n if (map !== null) {\n // Fix for Issue 157\n this.boundsChangedListener = google.maps.event.addListener(map, 'bounds_changed', this.onBoundsChanged);\n this.div.addEventListener('mousedown', this.onMouseDown);\n this.div.addEventListener('click', this.onClick);\n this.div.addEventListener('mouseover', this.onMouseOver);\n this.div.addEventListener('mouseout', this.onMouseOut);\n }\n };\n ClusterIcon.prototype.onRemove = function () {\n if (this.div && this.div.parentNode) {\n this.hide();\n if (this.boundsChangedListener !== null) {\n google.maps.event.removeListener(this.boundsChangedListener);\n }\n this.div.removeEventListener('mousedown', this.onMouseDown);\n this.div.removeEventListener('click', this.onClick);\n this.div.removeEventListener('mouseover', this.onMouseOver);\n this.div.removeEventListener('mouseout', this.onMouseOut);\n this.div.parentNode.removeChild(this.div);\n if (this.timeOut !== null) {\n window.clearTimeout(this.timeOut);\n this.timeOut = null;\n }\n this.div = null;\n }\n };\n ClusterIcon.prototype.draw = function () {\n if (this.visible && this.div !== null && this.center) {\n var pos = this.getPosFromLatLng(this.center);\n this.div.style.top = pos !== null ? \"\".concat(pos.y, \"px\") : '0';\n this.div.style.left = pos !== null ? \"\".concat(pos.x, \"px\") : '0';\n }\n };\n ClusterIcon.prototype.hide = function () {\n if (this.div) {\n this.div.style.display = 'none';\n }\n this.visible = false;\n };\n ClusterIcon.prototype.show = function () {\n var _a, _b, _c, _d, _e, _f;\n if (this.div && this.center) {\n var divTitle = this.sums === null ||\n typeof this.sums.title === 'undefined' ||\n this.sums.title === '' ? this.cluster.getClusterer().getTitle() : this.sums.title;\n // NOTE: values must be specified in px units\n var bp = this.backgroundPosition.split(' ');\n var spriteH = parseInt(((_a = bp[0]) === null || _a === void 0 ? void 0 : _a.replace(/^\\s+|\\s+$/g, '')) || '0', 10);\n var spriteV = parseInt(((_b = bp[1]) === null || _b === void 0 ? void 0 : _b.replace(/^\\s+|\\s+$/g, '')) || '0', 10);\n var pos = this.getPosFromLatLng(this.center);\n this.div.className = this.className;\n this.div.setAttribute('style', \"cursor: pointer; position: absolute; top: \".concat(pos !== null ? \"\".concat(pos.y, \"px\") : '0', \"; left: \").concat(pos !== null ? \"\".concat(pos.x, \"px\") : '0', \"; width: \").concat(this.width, \"px; height: \").concat(this.height, \"px; \"));\n var img = document.createElement('img');\n img.alt = divTitle;\n img.src = this.url;\n img.width = this.width;\n img.height = this.height;\n img.setAttribute('style', \"position: absolute; top: \".concat(spriteV, \"px; left: \").concat(spriteH, \"px\"));\n if (!this.cluster.getClusterer().enableRetinaIcons) {\n img.style.clip = \"rect(-\".concat(spriteV, \"px, -\").concat(spriteH + this.width, \"px, -\").concat(spriteV + this.height, \", -\").concat(spriteH, \")\");\n }\n var textElm = document.createElement('div');\n textElm.setAttribute('style', \"position: absolute; top: \".concat(this.anchorText[0], \"px; left: \").concat(this.anchorText[1], \"px; color: \").concat(this.textColor, \"; font-size: \").concat(this.textSize, \"px; font-family: \").concat(this.fontFamily, \"; font-weight: \").concat(this.fontWeight, \"; fontStyle: \").concat(this.fontStyle, \"; text-decoration: \").concat(this.textDecoration, \"; text-align: center; width: \").concat(this.width, \"px; line-height: \").concat(this.height, \"px\"));\n if ((_c = this.sums) === null || _c === void 0 ? void 0 : _c.text)\n textElm.innerText = \"\".concat((_d = this.sums) === null || _d === void 0 ? void 0 : _d.text);\n if ((_e = this.sums) === null || _e === void 0 ? void 0 : _e.html)\n textElm.innerHTML = \"\".concat((_f = this.sums) === null || _f === void 0 ? void 0 : _f.html);\n this.div.innerHTML = '';\n this.div.appendChild(img);\n this.div.appendChild(textElm);\n this.div.title = divTitle;\n this.div.style.display = '';\n }\n this.visible = true;\n };\n ClusterIcon.prototype.useStyle = function (sums) {\n this.sums = sums;\n var styles = this.cluster.getClusterer().getStyles();\n var style = styles[Math.min(styles.length - 1, Math.max(0, sums.index - 1))];\n if (style) {\n this.url = style.url;\n this.height = style.height;\n this.width = style.width;\n if (style.className) {\n this.className = \"\".concat(this.clusterClassName, \" \").concat(style.className);\n }\n this.anchorText = style.anchorText || [0, 0];\n this.anchorIcon = style.anchorIcon || [this.height / 2, this.width / 2];\n this.textColor = style.textColor || 'black';\n this.textSize = style.textSize || 11;\n this.textDecoration = style.textDecoration || 'none';\n this.fontWeight = style.fontWeight || 'bold';\n this.fontStyle = style.fontStyle || 'normal';\n this.fontFamily = style.fontFamily || 'Arial,sans-serif';\n this.backgroundPosition = style.backgroundPosition || '0 0';\n }\n };\n ClusterIcon.prototype.setCenter = function (center) {\n this.center = center;\n };\n ClusterIcon.prototype.getPosFromLatLng = function (latlng) {\n var pos = this.getProjection().fromLatLngToDivPixel(latlng);\n if (pos !== null) {\n pos.x -= this.anchorIcon[1];\n pos.y -= this.anchorIcon[0];\n }\n return pos;\n };\n return ClusterIcon;\n}());\n\n/* global google */\nvar Cluster = /** @class */ (function () {\n function Cluster(markerClusterer) {\n this.markerClusterer = markerClusterer;\n this.map = this.markerClusterer.getMap();\n this.gridSize = this.markerClusterer.getGridSize();\n this.minClusterSize = this.markerClusterer.getMinimumClusterSize();\n this.averageCenter = this.markerClusterer.getAverageCenter();\n this.markers = [];\n this.center = undefined;\n this.bounds = null;\n this.clusterIcon = new ClusterIcon(this, this.markerClusterer.getStyles());\n this.getSize = this.getSize.bind(this);\n this.getMarkers = this.getMarkers.bind(this);\n this.getCenter = this.getCenter.bind(this);\n this.getMap = this.getMap.bind(this);\n this.getClusterer = this.getClusterer.bind(this);\n this.getBounds = this.getBounds.bind(this);\n this.remove = this.remove.bind(this);\n this.addMarker = this.addMarker.bind(this);\n this.isMarkerInClusterBounds = this.isMarkerInClusterBounds.bind(this);\n this.calculateBounds = this.calculateBounds.bind(this);\n this.updateIcon = this.updateIcon.bind(this);\n this.isMarkerAlreadyAdded = this.isMarkerAlreadyAdded.bind(this);\n }\n Cluster.prototype.getSize = function () {\n return this.markers.length;\n };\n Cluster.prototype.getMarkers = function () {\n return this.markers;\n };\n Cluster.prototype.getCenter = function () {\n return this.center;\n };\n Cluster.prototype.getMap = function () {\n return this.map;\n };\n Cluster.prototype.getClusterer = function () {\n return this.markerClusterer;\n };\n Cluster.prototype.getBounds = function () {\n var bounds = new google.maps.LatLngBounds(this.center, this.center);\n var markers = this.getMarkers();\n for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {\n var marker = markers_1[_i];\n var position = marker.getPosition();\n if (position) {\n bounds.extend(position);\n }\n }\n return bounds;\n };\n Cluster.prototype.remove = function () {\n this.clusterIcon.setMap(null);\n this.markers = [];\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n delete this.markers;\n };\n Cluster.prototype.addMarker = function (marker) {\n var _a;\n if (this.isMarkerAlreadyAdded(marker)) {\n return false;\n }\n if (!this.center) {\n var position = marker.getPosition();\n if (position) {\n this.center = position;\n this.calculateBounds();\n }\n }\n else {\n if (this.averageCenter) {\n var position = marker.getPosition();\n if (position) {\n var length_1 = this.markers.length + 1;\n this.center = new google.maps.LatLng((this.center.lat() * (length_1 - 1) + position.lat()) / length_1, (this.center.lng() * (length_1 - 1) + position.lng()) / length_1);\n this.calculateBounds();\n }\n }\n }\n marker.isAdded = true;\n this.markers.push(marker);\n var mCount = this.markers.length;\n var maxZoom = this.markerClusterer.getMaxZoom();\n var zoom = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom();\n if (maxZoom !== null && typeof zoom !== 'undefined' && zoom > maxZoom) {\n // Zoomed in past max zoom, so show the marker.\n if (marker.getMap() !== this.map) {\n marker.setMap(this.map);\n }\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 }\n else if (mCount === this.minClusterSize) {\n // Hide the markers that were showing.\n for (var _i = 0, _b = this.markers; _i < _b.length; _i++) {\n var markerElement = _b[_i];\n markerElement.setMap(null);\n }\n }\n else {\n marker.setMap(null);\n }\n return true;\n };\n Cluster.prototype.isMarkerInClusterBounds = function (marker) {\n if (this.bounds !== null) {\n var position = marker.getPosition();\n if (position) {\n return this.bounds.contains(position);\n }\n }\n return false;\n };\n Cluster.prototype.calculateBounds = function () {\n this.bounds = this.markerClusterer.getExtendedBounds(new google.maps.LatLngBounds(this.center, this.center));\n };\n Cluster.prototype.updateIcon = function () {\n var _a;\n var mCount = this.markers.length;\n var maxZoom = this.markerClusterer.getMaxZoom();\n var zoom = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom();\n if (maxZoom !== null && typeof zoom !== 'undefined' && zoom > maxZoom) {\n this.clusterIcon.hide();\n return;\n }\n if (mCount < this.minClusterSize) {\n // Min cluster size not yet reached.\n this.clusterIcon.hide();\n return;\n }\n if (this.center) {\n this.clusterIcon.setCenter(this.center);\n }\n this.clusterIcon.useStyle(this.markerClusterer.getCalculator()(this.markers, this.markerClusterer.getStyles().length));\n this.clusterIcon.show();\n };\n Cluster.prototype.isMarkerAlreadyAdded = function (marker) {\n if (this.markers.includes) {\n return this.markers.includes(marker);\n }\n for (var i = 0; i < this.markers.length; i++) {\n if (marker === this.markers[i]) {\n return true;\n }\n }\n return false;\n };\n return Cluster;\n}());\n\n/* global google */\n/* eslint-disable filenames/match-regex */\n/**\n * Supports up to 9007199254740991 (Number.MAX_SAFE_INTEGER) markers\n * which is not a problem as max array length is 4294967296 (2**32)\n */\nfunction CALCULATOR(markers, numStyles) {\n var count = markers.length;\n var numberOfDigits = count.toString().length;\n var index = Math.min(numberOfDigits, numStyles);\n return {\n text: count.toString(),\n index: index,\n title: '',\n };\n}\nvar BATCH_SIZE = 2000;\nvar BATCH_SIZE_IE = 500;\nvar IMAGE_PATH = 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';\nvar IMAGE_EXTENSION = 'png';\nvar IMAGE_SIZES = [53, 56, 66, 78, 90];\nvar CLUSTERER_CLASS = 'cluster';\nvar Clusterer = /** @class */ (function () {\n function Clusterer(map, optMarkers, optOptions) {\n if (optMarkers === void 0) { optMarkers = []; }\n if (optOptions === void 0) { optOptions = {}; }\n this.getMinimumClusterSize = this.getMinimumClusterSize.bind(this);\n this.setMinimumClusterSize = this.setMinimumClusterSize.bind(this);\n this.getEnableRetinaIcons = this.getEnableRetinaIcons.bind(this);\n this.setEnableRetinaIcons = this.setEnableRetinaIcons.bind(this);\n this.addToClosestCluster = this.addToClosestCluster.bind(this);\n this.getImageExtension = this.getImageExtension.bind(this);\n this.setImageExtension = this.setImageExtension.bind(this);\n this.getExtendedBounds = this.getExtendedBounds.bind(this);\n this.getAverageCenter = this.getAverageCenter.bind(this);\n this.setAverageCenter = this.setAverageCenter.bind(this);\n this.getTotalClusters = this.getTotalClusters.bind(this);\n this.fitMapToMarkers = this.fitMapToMarkers.bind(this);\n this.getIgnoreHidden = this.getIgnoreHidden.bind(this);\n this.setIgnoreHidden = this.setIgnoreHidden.bind(this);\n this.getClusterClass = this.getClusterClass.bind(this);\n this.setClusterClass = this.setClusterClass.bind(this);\n this.getTotalMarkers = this.getTotalMarkers.bind(this);\n this.getZoomOnClick = this.getZoomOnClick.bind(this);\n this.setZoomOnClick = this.setZoomOnClick.bind(this);\n this.getBatchSizeIE = this.getBatchSizeIE.bind(this);\n this.setBatchSizeIE = this.setBatchSizeIE.bind(this);\n this.createClusters = this.createClusters.bind(this);\n this.onZoomChanged = this.onZoomChanged.bind(this);\n this.getImageSizes = this.getImageSizes.bind(this);\n this.setImageSizes = this.setImageSizes.bind(this);\n this.getCalculator = this.getCalculator.bind(this);\n this.setCalculator = this.setCalculator.bind(this);\n this.removeMarkers = this.removeMarkers.bind(this);\n this.resetViewport = this.resetViewport.bind(this);\n this.getImagePath = this.getImagePath.bind(this);\n this.setImagePath = this.setImagePath.bind(this);\n this.pushMarkerTo = this.pushMarkerTo.bind(this);\n this.removeMarker = this.removeMarker.bind(this);\n this.clearMarkers = this.clearMarkers.bind(this);\n this.setupStyles = this.setupStyles.bind(this);\n this.getGridSize = this.getGridSize.bind(this);\n this.setGridSize = this.setGridSize.bind(this);\n this.getClusters = this.getClusters.bind(this);\n this.getMaxZoom = this.getMaxZoom.bind(this);\n this.setMaxZoom = this.setMaxZoom.bind(this);\n this.getMarkers = this.getMarkers.bind(this);\n this.addMarkers = this.addMarkers.bind(this);\n this.getStyles = this.getStyles.bind(this);\n this.setStyles = this.setStyles.bind(this);\n this.addMarker = this.addMarker.bind(this);\n this.onRemove = this.onRemove.bind(this);\n this.getTitle = this.getTitle.bind(this);\n this.setTitle = this.setTitle.bind(this);\n this.repaint = this.repaint.bind(this);\n this.onIdle = this.onIdle.bind(this);\n this.redraw = this.redraw.bind(this);\n this.onAdd = this.onAdd.bind(this);\n this.draw = this.draw.bind(this);\n this.extend = this.extend.bind(this);\n this.extend(Clusterer, google.maps.OverlayView);\n this.markers = [];\n this.clusters = [];\n this.listeners = [];\n this.activeMap = null;\n this.ready = false;\n this.gridSize = optOptions.gridSize || 60;\n this.minClusterSize = optOptions.minimumClusterSize || 2;\n this.maxZoom = optOptions.maxZoom || null;\n this.styles = optOptions.styles || [];\n this.title = optOptions.title || '';\n this.zoomOnClick = true;\n if (optOptions.zoomOnClick !== undefined) {\n this.zoomOnClick = optOptions.zoomOnClick;\n }\n this.averageCenter = false;\n if (optOptions.averageCenter !== undefined) {\n this.averageCenter = optOptions.averageCenter;\n }\n this.ignoreHidden = false;\n if (optOptions.ignoreHidden !== undefined) {\n this.ignoreHidden = optOptions.ignoreHidden;\n }\n this.enableRetinaIcons = false;\n if (optOptions.enableRetinaIcons !== undefined) {\n this.enableRetinaIcons = optOptions.enableRetinaIcons;\n }\n this.imagePath = optOptions.imagePath || IMAGE_PATH;\n this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;\n this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;\n this.calculator = optOptions.calculator || CALCULATOR;\n this.batchSize = optOptions.batchSize || BATCH_SIZE;\n this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;\n this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;\n if (navigator.userAgent.toLowerCase().indexOf('msie') !== -1) {\n // Try to avoid IE timeout when processing a huge number of markers:\n this.batchSize = this.batchSizeIE;\n }\n this.timerRefStatic = null;\n this.setupStyles();\n this.addMarkers(optMarkers, true);\n this.setMap(map); // Note: this causes onAdd to be called\n }\n Clusterer.prototype.onZoomChanged = function () {\n var _a, _b;\n this.resetViewport(false);\n // Workaround for this Google bug: when map is at level 0 and \"-\" of\n // zoom slider is clicked, a \"zoom_changed\" event is fired even though\n // the map doesn't zoom out any further. In this situation, no \"idle\"\n // event is triggered so the cluster markers that have been removed\n // do not get redrawn. Same goes for a zoom in at maxZoom.\n if (((_a = this.getMap()) === null || _a === void 0 ? void 0 : _a.getZoom()) === (this.get('minZoom') || 0) ||\n ((_b = this.getMap()) === null || _b === void 0 ? void 0 : _b.getZoom()) === this.get('maxZoom')) {\n google.maps.event.trigger(this, 'idle');\n }\n };\n Clusterer.prototype.onIdle = function () {\n this.redraw();\n };\n Clusterer.prototype.onAdd = function () {\n var map = this.getMap();\n this.activeMap = map;\n this.ready = true;\n this.repaint();\n if (map !== null) {\n // Add the map event listeners\n this.listeners = [\n google.maps.event.addListener(map, 'zoom_changed', this.onZoomChanged),\n google.maps.event.addListener(map, 'idle', this.onIdle),\n ];\n }\n };\n Clusterer.prototype.onRemove = function () {\n // Put all the managed markers back on the map:\n for (var _i = 0, _a = this.markers; _i < _a.length; _i++) {\n var marker = _a[_i];\n if (marker.getMap() !== this.activeMap) {\n marker.setMap(this.activeMap);\n }\n }\n // Remove all clusters:\n for (var _b = 0, _c = this.clusters; _b < _c.length; _b++) {\n var cluster = _c[_b];\n cluster.remove();\n }\n this.clusters = [];\n // Remove map event listeners:\n for (var _d = 0, _e = this.listeners; _d < _e.length; _d++) {\n var listener = _e[_d];\n google.maps.event.removeListener(listener);\n }\n this.listeners = [];\n this.activeMap = null;\n this.ready = false;\n };\n Clusterer.prototype.draw = function () { return; };\n Clusterer.prototype.getMap = function () { return null; };\n Clusterer.prototype.getPanes = function () { return null; };\n Clusterer.prototype.getProjection = function () {\n return {\n fromContainerPixelToLatLng: function () { return null; },\n fromDivPixelToLatLng: function () { return null; },\n fromLatLngToContainerPixel: function () { return null; },\n fromLatLngToDivPixel: function () { return null; },\n getVisibleRegion: function () { return null; },\n getWorldWidth: function () { return 0; }\n };\n };\n Clusterer.prototype.setMap = function () { return; };\n Clusterer.prototype.addListener = function () {\n return {\n remove: function () { return; }\n };\n };\n Clusterer.prototype.bindTo = function () { return; };\n Clusterer.prototype.get = function () { return; };\n Clusterer.prototype.notify = function () { return; };\n Clusterer.prototype.set = function () { return; };\n Clusterer.prototype.setValues = function () { return; };\n Clusterer.prototype.unbind = function () { return; };\n Clusterer.prototype.unbindAll = function () { return; };\n Clusterer.prototype.setupStyles = function () {\n if (this.styles.length > 0) {\n return;\n }\n for (var i = 0; i < this.imageSizes.length; i++) {\n this.styles.push({\n url: \"\".concat(this.imagePath + (i + 1), \".\").concat(this.imageExtension),\n height: this.imageSizes[i] || 0,\n width: this.imageSizes[i] || 0,\n });\n }\n };\n Clusterer.prototype.fitMapToMarkers = function () {\n var markers = this.getMarkers();\n var bounds = new google.maps.LatLngBounds();\n for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {\n var marker = markers_1[_i];\n var position = marker.getPosition();\n if (position) {\n bounds.extend(position);\n }\n }\n var map = this.getMap();\n if (map !== null && 'fitBounds' in map) {\n map.fitBounds(bounds);\n }\n };\n Clusterer.prototype.getGridSize = function () {\n return this.gridSize;\n };\n Clusterer.prototype.setGridSize = function (gridSize) {\n this.gridSize = gridSize;\n };\n Clusterer.prototype.getMinimumClusterSize = function () {\n return this.minClusterSize;\n };\n Clusterer.prototype.setMinimumClusterSize = function (minimumClusterSize) {\n this.minClusterSize = minimumClusterSize;\n };\n Clusterer.prototype.getMaxZoom = function () {\n return this.maxZoom;\n };\n Clusterer.prototype.setMaxZoom = function (maxZoom) {\n this.maxZoom = maxZoom;\n };\n Clusterer.prototype.getStyles = function () {\n return this.styles;\n };\n Clusterer.prototype.setStyles = function (styles) {\n this.styles = styles;\n };\n Clusterer.prototype.getTitle = function () {\n return this.title;\n };\n Clusterer.prototype.setTitle = function (title) {\n this.title = title;\n };\n Clusterer.prototype.getZoomOnClick = function () {\n return this.zoomOnClick;\n };\n Clusterer.prototype.setZoomOnClick = function (zoomOnClick) {\n this.zoomOnClick = zoomOnClick;\n };\n Clusterer.prototype.getAverageCenter = function () {\n return this.averageCenter;\n };\n Clusterer.prototype.setAverageCenter = function (averageCenter) {\n this.averageCenter = averageCenter;\n };\n Clusterer.prototype.getIgnoreHidden = function () {\n return this.ignoreHidden;\n };\n Clusterer.prototype.setIgnoreHidden = function (ignoreHidden) {\n this.ignoreHidden = ignoreHidden;\n };\n Clusterer.prototype.getEnableRetinaIcons = function () {\n return this.enableRetinaIcons;\n };\n Clusterer.prototype.setEnableRetinaIcons = function (enableRetinaIcons) {\n this.enableRetinaIcons = enableRetinaIcons;\n };\n Clusterer.prototype.getImageExtension = function () {\n return this.imageExtension;\n };\n Clusterer.prototype.setImageExtension = function (imageExtension) {\n this.imageExtension = imageExtension;\n };\n Clusterer.prototype.getImagePath = function () {\n return this.imagePath;\n };\n Clusterer.prototype.setImagePath = function (imagePath) {\n this.imagePath = imagePath;\n };\n Clusterer.prototype.getImageSizes = function () {\n return this.imageSizes;\n };\n Clusterer.prototype.setImageSizes = function (imageSizes) {\n this.imageSizes = imageSizes;\n };\n Clusterer.prototype.getCalculator = function () {\n return this.calculator;\n };\n Clusterer.prototype.setCalculator = function (calculator) {\n this.calculator = calculator;\n };\n Clusterer.prototype.getBatchSizeIE = function () {\n return this.batchSizeIE;\n };\n Clusterer.prototype.setBatchSizeIE = function (batchSizeIE) {\n this.batchSizeIE = batchSizeIE;\n };\n Clusterer.prototype.getClusterClass = function () {\n return this.clusterClass;\n };\n Clusterer.prototype.setClusterClass = function (clusterClass) {\n this.clusterClass = clusterClass;\n };\n Clusterer.prototype.getMarkers = function () {\n return this.markers;\n };\n Clusterer.prototype.getTotalMarkers = function () {\n return this.markers.length;\n };\n Clusterer.prototype.getClusters = function () {\n return this.clusters;\n };\n Clusterer.prototype.getTotalClusters = function () {\n return this.clusters.length;\n };\n Clusterer.prototype.addMarker = function (marker, optNoDraw) {\n this.pushMarkerTo(marker);\n if (!optNoDraw) {\n this.redraw();\n }\n };\n Clusterer.prototype.addMarkers = function (markers, optNoDraw) {\n for (var key in markers) {\n if (Object.prototype.hasOwnProperty.call(markers, key)) {\n var marker = markers[key];\n if (marker) {\n this.pushMarkerTo(marker);\n }\n }\n }\n if (!optNoDraw) {\n this.redraw();\n }\n };\n Clusterer.prototype.pushMarkerTo = function (marker) {\n var _this = this;\n // If the marker is draggable add a listener so we can update the clusters on the dragend:\n if (marker.getDraggable()) {\n google.maps.event.addListener(marker, 'dragend', function () {\n if (_this.ready) {\n marker.isAdded = false;\n _this.repaint();\n }\n });\n }\n marker.isAdded = false;\n this.markers.push(marker);\n };\n Clusterer.prototype.removeMarker_ = function (marker) {\n var index = -1;\n if (this.markers.indexOf) {\n index = this.markers.indexOf(marker);\n }\n else {\n for (var i = 0; i < this.markers.length; i++) {\n if (marker === this.markers[i]) {\n index = i;\n break;\n }\n }\n }\n if (index === -1) {\n // Marker is not in our list of markers, so do nothing:\n return false;\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 Clusterer.prototype.removeMarker = function (marker, optNoDraw) {\n var removed = this.removeMarker_(marker);\n if (!optNoDraw && removed) {\n this.repaint();\n }\n return removed;\n };\n Clusterer.prototype.removeMarkers = function (markers, optNoDraw) {\n var removed = false;\n for (var _i = 0, markers_2 = markers; _i < markers_2.length; _i++) {\n var marker = markers_2[_i];\n removed = removed || this.removeMarker_(marker);\n }\n if (!optNoDraw && removed) {\n this.repaint();\n }\n return removed;\n };\n Clusterer.prototype.clearMarkers = function () {\n this.resetViewport(true);\n this.markers = [];\n };\n Clusterer.prototype.repaint = function () {\n var oldClusters = this.clusters.slice();\n this.clusters = [];\n this.resetViewport(false);\n this.redraw();\n // Remove the old clusters.\n // Do it in a timeout to prevent blinking effect.\n setTimeout(function timeout() {\n for (var _i = 0, oldClusters_1 = oldClusters; _i < oldClusters_1.length; _i++) {\n var oldCluster = oldClusters_1[_i];\n oldCluster.remove();\n }\n }, 0);\n };\n Clusterer.prototype.getExtendedBounds = function (bounds) {\n var projection = this.getProjection();\n // Convert the points to pixels and the extend out by the grid size.\n var trPix = projection.fromLatLngToDivPixel(\n // Turn the bounds into latlng.\n new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()));\n if (trPix !== null) {\n trPix.x += this.gridSize;\n trPix.y -= this.gridSize;\n }\n var blPix = projection.fromLatLngToDivPixel(\n // Turn the bounds into latlng.\n new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng()));\n if (blPix !== null) {\n blPix.x -= this.gridSize;\n blPix.y += this.gridSize;\n }\n // Extend the bounds to contain the new bounds.\n if (trPix !== null) {\n // Convert the pixel points back to LatLng nw\n var point1 = projection.fromDivPixelToLatLng(trPix);\n if (point1 !== null) {\n bounds.extend(point1);\n }\n }\n if (blPix !== null) {\n // Convert the pixel points back to LatLng sw\n var point2 = projection.fromDivPixelToLatLng(blPix);\n if (point2 !== null) {\n bounds.extend(point2);\n }\n }\n return bounds;\n };\n Clusterer.prototype.redraw = function () {\n // Redraws all the clusters.\n this.createClusters(0);\n };\n Clusterer.prototype.resetViewport = function (optHide) {\n // Remove all the clusters\n for (var _i = 0, _a = this.clusters; _i < _a.length; _i++) {\n var cluster = _a[_i];\n cluster.remove();\n }\n this.clusters = [];\n // Reset the markers to not be added and to be removed from the map.\n for (var _b = 0, _c = this.markers; _b < _c.length; _b++) {\n var marker = _c[_b];\n marker.isAdded = false;\n if (optHide) {\n marker.setMap(null);\n }\n }\n };\n Clusterer.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) *\n Math.cos((p2.lat() * Math.PI) / 180) *\n Math.sin(dLon / 2) *\n Math.sin(dLon / 2);\n return R * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)));\n };\n Clusterer.prototype.isMarkerInBounds = function (marker, bounds) {\n var position = marker.getPosition();\n if (position) {\n return bounds.contains(position);\n }\n return false;\n };\n Clusterer.prototype.addToClosestCluster = function (marker) {\n var cluster;\n var distance = 40000; // Some large number\n var clusterToAddTo = null;\n for (var _i = 0, _a = this.clusters; _i < _a.length; _i++) {\n var clusterElement = _a[_i];\n cluster = clusterElement;\n var center = cluster.getCenter();\n var position = marker.getPosition();\n if (center && position) {\n var d = this.distanceBetweenPoints(center, position);\n if (d < distance) {\n distance = d;\n clusterToAddTo = cluster;\n }\n }\n }\n if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)) {\n clusterToAddTo.addMarker(marker);\n }\n else {\n cluster = new Cluster(this);\n cluster.addMarker(marker);\n this.clusters.push(cluster);\n }\n };\n Clusterer.prototype.createClusters = function (iFirst) {\n var _this = this;\n if (!this.ready) {\n return;\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 Clusterer begins\n * clustering markers.\n * @name Clusterer#clusteringbegin\n * @param {Clusterer} mc The Clusterer whose markers are being clustered.\n * @event\n */\n google.maps.event.trigger(this, 'clusteringbegin', this);\n if (this.timerRefStatic !== null) {\n window.clearTimeout(this.timerRefStatic);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n delete this.timerRefStatic;\n }\n }\n var map = this.getMap();\n var bounds = map !== null && 'getBounds' in map ? map.getBounds() : null;\n var zoom = (map === null || map === void 0 ? void 0 : map.getZoom()) || 0;\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 var mapBounds = zoom > 3\n ? new google.maps.LatLngBounds(bounds === null || bounds === void 0 ? void 0 : bounds.getSouthWest(), bounds === null || bounds === void 0 ? void 0 : bounds.getNorthEast())\n : new google.maps.LatLngBounds(new google.maps.LatLng(85.02070771743472, -178.48388434375), new google.maps.LatLng(-85.08136444384544, 178.00048865625));\n var extendedMapBounds = this.getExtendedBounds(mapBounds);\n var iLast = Math.min(iFirst + this.batchSize, this.markers.length);\n for (var i = iFirst; i < iLast; i++) {\n var marker = this.markers[i];\n if (marker && !marker.isAdded && this.isMarkerInBounds(marker, extendedMapBounds) && (!this.ignoreHidden || (this.ignoreHidden && marker.getVisible()))) {\n this.addToClosestCluster(marker);\n }\n }\n if (iLast < this.markers.length) {\n this.timerRefStatic = window.setTimeout(function () {\n _this.createClusters(iLast);\n }, 0);\n }\n else {\n this.timerRefStatic = null;\n /**\n * This event is fired when the Clusterer stops\n * clustering markers.\n * @name Clusterer#clusteringend\n * @param {Clusterer} mc The Clusterer whose markers are being clustered.\n * @event\n */\n google.maps.event.trigger(this, 'clusteringend', this);\n for (var _i = 0, _a = this.clusters; _i < _a.length; _i++) {\n var cluster = _a[_i];\n cluster.updateIcon();\n }\n }\n };\n Clusterer.prototype.extend = function (obj1, obj2) {\n return function applyExtend(object) {\n for (var property in object.prototype) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n var prop = property;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.prototype[prop] = object.prototype[prop];\n }\n return this;\n }.apply(obj1, [obj2]);\n };\n return Clusterer;\n}());\n\nexport { Cluster, ClusterIcon, Clusterer };\n//# sourceMappingURL=esm.js.map\n","import {\n memo,\n useState,\n type JSX,\n useEffect,\n useContext,\n PureComponent,\n type ContextType,\n} from 'react'\nimport {\n Cluster,\n Clusterer,\n type TCalculator,\n type ClusterIconStyle,\n type ClustererOptions,\n} from '@react-google-maps/marker-clusterer'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onClick: 'click',\n onClusteringBegin: 'clusteringbegin',\n onClusteringEnd: 'clusteringend',\n onMouseOut: 'mouseout',\n onMouseOver: 'mouseover',\n}\n\nconst updaterMap = {\n averageCenter(instance: Clusterer, averageCenter: boolean): void {\n instance.setAverageCenter(averageCenter)\n },\n\n batchSizeIE(instance: Clusterer, batchSizeIE: number): void {\n instance.setBatchSizeIE(batchSizeIE)\n },\n\n calculator(instance: Clusterer, calculator: TCalculator): void {\n instance.setCalculator(calculator)\n },\n\n clusterClass(instance: Clusterer, clusterClass: string): void {\n instance.setClusterClass(clusterClass)\n },\n\n enableRetinaIcons(instance: Clusterer, enableRetinaIcons: boolean): void {\n instance.setEnableRetinaIcons(enableRetinaIcons)\n },\n\n gridSize(instance: Clusterer, gridSize: number): void {\n instance.setGridSize(gridSize)\n },\n\n ignoreHidden(instance: Clusterer, ignoreHidden: boolean): void {\n instance.setIgnoreHidden(ignoreHidden)\n },\n\n imageExtension(instance: Clusterer, imageExtension: string): void {\n instance.setImageExtension(imageExtension)\n },\n\n imagePath(instance: Clusterer, imagePath: string): void {\n instance.setImagePath(imagePath)\n },\n\n imageSizes(instance: Clusterer, imageSizes: number[]): void {\n instance.setImageSizes(imageSizes)\n },\n\n maxZoom(instance: Clusterer, maxZoom: number): void {\n instance.setMaxZoom(maxZoom)\n },\n\n minimumClusterSize(instance: Clusterer, minimumClusterSize: number): void {\n instance.setMinimumClusterSize(minimumClusterSize)\n },\n\n styles(instance: Clusterer, styles: ClusterIconStyle[]): void {\n instance.setStyles(styles)\n },\n\n title(instance: Clusterer, title: string): void {\n instance.setTitle(title)\n },\n\n zoomOnClick(instance: Clusterer, zoomOnClick: boolean): void {\n instance.setZoomOnClick(zoomOnClick)\n },\n}\n\ntype ClustererState = {\n markerClusterer: Clusterer | null\n}\n\nconst defaultOptions = {}\n\nexport type MarkerClustererProps = {\n // required\n children: (markerClusterer: Clusterer) => JSX.Element\n\n options?: ClustererOptions | undefined\n /** Whether the position of a cluster marker should be the average position of all markers in the cluster. If set to false, the cluster marker is positioned at the location of the first marker added to the cluster. The default value is false. */\n averageCenter?: boolean | undefined\n /** When Internet Explorer is being used, markers are processed in several batches with a small delay inserted between each batch in an attempt to avoid Javascript timeout errors. Set this property to the number of markers to be processed in a single batch; select as high a number as you can without causing a timeout error in the browser. This number might need to be as low as 100 if 15,000 markers are being managed, for example. The default value is MarkerClusterer.BATCH_SIZE_IE. */\n batchSizeIE?: number | undefined\n /** The function used to determine the text to be displayed on a cluster marker and the index indicating which style to use for the cluster marker. The input parameters for the function are (1) the array of markers represented by a cluster marker and (2) the number of cluster icon styles. It returns a ClusterIconInfo object. The default calculator returns a text property which is the number of markers in the cluster and an index property which is one higher than the lowest integer such that 10^i exceeds the number of markers in the cluster, or the size of the styles array, whichever is less. The styles array element used has an index of index minus 1. For example, the default calculator returns a text value of \"125\" and an index of 3 for a cluster icon representing 125 markers so the element used in the styles array is 2. A calculator may also return a title property that contains the text of the tooltip to be used for the cluster marker. If title is not defined, the tooltip is set to the value of the title property for the MarkerClusterer. The default value is MarkerClusterer.CALCULATOR. */\n calculator?: TCalculator | undefined\n /** The name of the CSS class defining general styles for the cluster markers. Use this class to define CSS styles that are not set up by the code that processes the styles array. The default value is \"cluster\". */\n clusterClass?: string | undefined\n /** Whether to allow the use of cluster icons that have sizes that are some multiple (typically double) of their actual display size. Icons such as these look better when viewed on high-resolution monitors such as Apple's Retina displays. Note: if this property is true, sprites cannot be used as cluster icons. The default value is false. */\n enableRetinaIcons?: boolean | undefined\n /** The grid size of a cluster in pixels. The grid is a square. The default value is 60. */\n gridSize?: number | undefined\n /** Whether to ignore hidden markers in clusters. You may want to set this to true to ensure that hidden markers are not included in the marker count that appears on a cluster marker (this count is the value of the text property of the result returned by the default calculator). If set to true and you change the visibility of a marker being clustered, be sure to also call MarkerClusterer.repaint(). The default value is false. */\n ignoreHidden?: boolean | undefined\n /** The extension name for the cluster icon image files (e.g., \"png\" or \"jpg\"). The default value is MarkerClusterer.IMAGE_EXTENSION. */\n imageExtension?: string | undefined\n /** The full URL of the root name of the group of image files to use for cluster icons. The complete file name is of the form imagePath.imageExtension where n is the image file number (1, 2, etc.). The default value is MarkerClusterer.IMAGE_PATH. */\n imagePath?: string | undefined\n /** An array of numbers containing the widths of the group of imagePath.imageExtension image files. (The images are assumed to be square.) The default value is MarkerClusterer.IMAGE_SIZES. */\n imageSizes?: number[] | undefined\n /** The maximum zoom level at which clustering is enabled or null if clustering is to be enabled at all zoom levels. The default value is null. */\n maxZoom?: number | undefined\n /** The minimum number of markers needed in a cluster before the markers are hidden and a cluster marker appears. The default value is 2. */\n minimumClusterSize?: number | undefined\n /** An array of ClusterIconStyle elements defining the styles of the cluster markers to be used. The element to be used to style a given cluster marker is determined by the function defined by the calculator property. The default is an array of ClusterIconStyle elements whose properties are derived from the values for imagePath, imageExtension, and imageSizes. */\n styles?: ClusterIconStyle[] | undefined\n /** The tooltip to display when the mouse moves over a cluster marker. (Alternatively, you can use a custom calculator function to specify a different tooltip for each cluster marker.) The default value is \"\". */\n title?: string | undefined\n /** Whether to zoom the map when a cluster marker is clicked. You may want to set this to false if you have installed a handler for the click event and it deals with zooming on its own. The default value is true. */\n zoomOnClick?: boolean | undefined\n /** This event is fired when a cluster marker is clicked. */\n onClick?: ((cluster: Cluster) => void) | undefined\n /** This event is fired when the MarkerClusterer begins clustering markers. */\n onClusteringBegin?: ((markerClusterer: Clusterer) => void) | undefined\n /** This event is fired when the MarkerClusterer stops clustering markers. */\n onClusteringEnd?: ((markerClusterer: Clusterer) => void) | undefined\n /** \tThis event is fired when the mouse moves over a cluster marker. */\n onMouseOver?: (cluster: Cluster) => void | undefined\n /** This event is fired when the mouse moves out of a cluster marker. */\n onMouseOut?: (cluster: Cluster) => void | undefined\n /** This callback is called when the markerClusterer instance has loaded. It is called with the markerClusterer instance. */\n onLoad?: ((markerClusterer: Clusterer) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the markerClusterer instance. */\n onUnmount?: ((markerClusterer: Clusterer) => void) | undefined\n}\n\nfunction MarkerClustererFunctional(\n props: MarkerClustererProps\n): JSX.Element | null {\n const {\n children,\n options,\n averageCenter,\n batchSizeIE,\n calculator,\n clusterClass,\n enableRetinaIcons,\n gridSize,\n ignoreHidden,\n imageExtension,\n imagePath,\n imageSizes,\n maxZoom,\n minimumClusterSize,\n styles,\n title,\n zoomOnClick,\n onClick,\n onClusteringBegin,\n onClusteringEnd,\n onMouseOver,\n onMouseOut,\n onLoad,\n onUnmount,\n } = props\n const [instance, setInstance] = useState(null)\n const map = useContext(MapContext)\n\n const [clickListener, setClickListener] =\n useState(null)\n const [clusteringBeginListener, setClusteringBeginListener] =\n useState(null)\n const [clusteringEndListener, setClusteringEndListener] =\n useState(null)\n const [mouseoutListener, setMouseoutListener] =\n useState(null)\n const [mouseoverListener, setMouseoverListener] =\n useState(null)\n\n useEffect(() => {\n if (instance && onMouseOut) {\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n setMouseoutListener(\n google.maps.event.addListener(instance, eventMap.onMouseOut, onMouseOut)\n )\n }\n }, [onMouseOut])\n\n useEffect(() => {\n if (instance && onMouseOver) {\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n setMouseoverListener(\n google.maps.event.addListener(\n instance,\n eventMap.onMouseOver,\n onMouseOver\n )\n )\n }\n }, [onMouseOver])\n\n useEffect(() => {\n if (instance && onClick) {\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n setClickListener(\n google.maps.event.addListener(instance, eventMap.onClick, onClick)\n )\n }\n }, [onClick])\n\n useEffect(() => {\n if (instance && onClusteringBegin) {\n if (clusteringBeginListener !== null) {\n google.maps.event.removeListener(clusteringBeginListener)\n }\n\n setClusteringBeginListener(\n google.maps.event.addListener(\n instance,\n eventMap.onClusteringBegin,\n onClusteringBegin\n )\n )\n }\n }, [onClusteringBegin])\n\n useEffect(() => {\n if (instance && onClusteringEnd) {\n if (clusteringEndListener !== null) {\n google.maps.event.removeListener(clusteringEndListener)\n }\n\n setClusteringBeginListener(\n google.maps.event.addListener(\n instance,\n eventMap.onClusteringEnd,\n onClusteringEnd\n )\n )\n }\n }, [onClusteringEnd])\n\n useEffect(() => {\n if (typeof averageCenter !== 'undefined' && instance !== null) {\n updaterMap.averageCenter(instance, averageCenter)\n }\n }, [instance, averageCenter])\n\n useEffect(() => {\n if (typeof batchSizeIE !== 'undefined' && instance !== null) {\n updaterMap.batchSizeIE(instance, batchSizeIE)\n }\n }, [instance, batchSizeIE])\n\n useEffect(() => {\n if (typeof calculator !== 'undefined' && instance !== null) {\n updaterMap.calculator(instance, calculator)\n }\n }, [instance, calculator])\n\n useEffect(() => {\n if (typeof clusterClass !== 'undefined' && instance !== null) {\n updaterMap.clusterClass(instance, clusterClass)\n }\n }, [instance, clusterClass])\n\n useEffect(() => {\n if (typeof enableRetinaIcons !== 'undefined' && instance !== null) {\n updaterMap.enableRetinaIcons(instance, enableRetinaIcons)\n }\n }, [instance, enableRetinaIcons])\n\n useEffect(() => {\n if (typeof gridSize !== 'undefined' && instance !== null) {\n updaterMap.gridSize(instance, gridSize)\n }\n }, [instance, gridSize])\n\n useEffect(() => {\n if (typeof ignoreHidden !== 'undefined' && instance !== null) {\n updaterMap.ignoreHidden(instance, ignoreHidden)\n }\n }, [instance, ignoreHidden])\n\n useEffect(() => {\n if (typeof imageExtension !== 'undefined' && instance !== null) {\n updaterMap.imageExtension(instance, imageExtension)\n }\n }, [instance, imageExtension])\n\n useEffect(() => {\n if (typeof imagePath !== 'undefined' && instance !== null) {\n updaterMap.imagePath(instance, imagePath)\n }\n }, [instance, imagePath])\n\n useEffect(() => {\n if (typeof imageSizes !== 'undefined' && instance !== null) {\n updaterMap.imageSizes(instance, imageSizes)\n }\n }, [instance, imageSizes])\n\n useEffect(() => {\n if (typeof maxZoom !== 'undefined' && instance !== null) {\n updaterMap.maxZoom(instance, maxZoom)\n }\n }, [instance, maxZoom])\n\n useEffect(() => {\n if (typeof minimumClusterSize !== 'undefined' && instance !== null) {\n updaterMap.minimumClusterSize(instance, minimumClusterSize)\n }\n }, [instance, minimumClusterSize])\n\n useEffect(() => {\n if (typeof styles !== 'undefined' && instance !== null) {\n updaterMap.styles(instance, styles)\n }\n }, [instance, styles])\n\n useEffect(() => {\n if (typeof title !== 'undefined' && instance !== null) {\n updaterMap.title(instance, title)\n }\n }, [instance, title])\n\n useEffect(() => {\n if (typeof zoomOnClick !== 'undefined' && instance !== null) {\n updaterMap.zoomOnClick(instance, zoomOnClick)\n }\n }, [instance, zoomOnClick])\n\n useEffect(() => {\n if (!map) return\n\n const clustererOptions = {\n ...(options || defaultOptions),\n }\n\n const clusterer = new Clusterer(map, [], clustererOptions)\n\n if (averageCenter) {\n updaterMap.averageCenter(clusterer, averageCenter)\n }\n\n if (batchSizeIE) {\n updaterMap.batchSizeIE(clusterer, batchSizeIE)\n }\n\n if (calculator) {\n updaterMap.calculator(clusterer, calculator)\n }\n\n if (clusterClass) {\n updaterMap.clusterClass(clusterer, clusterClass)\n }\n\n if (enableRetinaIcons) {\n updaterMap.enableRetinaIcons(clusterer, enableRetinaIcons)\n }\n\n if (gridSize) {\n updaterMap.gridSize(clusterer, gridSize)\n }\n\n if (ignoreHidden) {\n updaterMap.ignoreHidden(clusterer, ignoreHidden)\n }\n\n if (imageExtension) {\n updaterMap.imageExtension(clusterer, imageExtension)\n }\n\n if (imagePath) {\n updaterMap.imagePath(clusterer, imagePath)\n }\n\n if (imageSizes) {\n updaterMap.imageSizes(clusterer, imageSizes)\n }\n\n if (maxZoom) {\n updaterMap.maxZoom(clusterer, maxZoom)\n }\n\n if (minimumClusterSize) {\n updaterMap.minimumClusterSize(clusterer, minimumClusterSize)\n }\n\n if (styles) {\n updaterMap.styles(clusterer, styles)\n }\n\n if (title) {\n updaterMap.title(clusterer, title)\n }\n\n if (zoomOnClick) {\n updaterMap.zoomOnClick(clusterer, zoomOnClick)\n }\n\n if (onMouseOut) {\n setMouseoutListener(\n google.maps.event.addListener(\n clusterer,\n eventMap.onMouseOut,\n onMouseOut\n )\n )\n }\n\n if (onMouseOver) {\n setMouseoverListener(\n google.maps.event.addListener(\n clusterer,\n eventMap.onMouseOver,\n onMouseOver\n )\n )\n }\n\n if (onClick) {\n setClickListener(\n google.maps.event.addListener(clusterer, eventMap.onClick, onClick)\n )\n }\n\n if (onClusteringBegin) {\n setClusteringBeginListener(\n google.maps.event.addListener(\n clusterer,\n eventMap.onClusteringBegin,\n onClusteringBegin\n )\n )\n }\n\n if (onClusteringEnd) {\n setClusteringEndListener(\n google.maps.event.addListener(\n clusterer,\n eventMap.onClusteringEnd,\n onClusteringEnd\n )\n )\n }\n\n setInstance(clusterer)\n\n if (onLoad) {\n onLoad(clusterer)\n }\n\n return () => {\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n if (clusteringBeginListener !== null) {\n google.maps.event.removeListener(clusteringBeginListener)\n }\n\n if (clusteringEndListener !== null) {\n google.maps.event.removeListener(clusteringEndListener)\n }\n\n if (onUnmount) {\n onUnmount(clusterer)\n }\n }\n }, [])\n\n return instance !== null ? children(instance) || null : null\n}\n\nexport const MarkerClustererF = memo(MarkerClustererFunctional)\n\nexport class ClustererComponent extends PureComponent<\n MarkerClustererProps,\n ClustererState\n> {\n static override contextType = MapContext\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n override state: ClustererState = {\n markerClusterer: null,\n }\n\n setClustererCallback = (): void => {\n if (this.state.markerClusterer !== null && this.props.onLoad) {\n this.props.onLoad(this.state.markerClusterer)\n }\n }\n\n override componentDidMount(): void {\n if (this.context) {\n const markerClusterer = new Clusterer(\n this.context,\n [],\n this.props.options\n )\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: markerClusterer,\n })\n\n this.setState((): ClustererState => {\n return {\n markerClusterer,\n }\n }, this.setClustererCallback)\n }\n }\n\n override componentDidUpdate(prevProps: MarkerClustererProps): void {\n if (this.state.markerClusterer) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.markerClusterer,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.markerClusterer !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.markerClusterer)\n }\n\n unregisterEvents(this.registeredEvents)\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.state.markerClusterer.setMap(null)\n }\n }\n\n override render(): JSX.Element | null {\n return this.state.markerClusterer !== null\n ? this.props.children(this.state.markerClusterer)\n : null\n }\n}\n\nexport default ClustererComponent\n","// This handler prevents an event in the InfoBox from being passed on to the map.\nfunction cancelHandler(event) {\n event.cancelBubble = true;\n if (event.stopPropagation) {\n event.stopPropagation();\n }\n}\nvar InfoBox = /** @class */ (function () {\n function InfoBox(options) {\n if (options === void 0) { options = {}; }\n this.getCloseClickHandler = this.getCloseClickHandler.bind(this);\n this.closeClickHandler = this.closeClickHandler.bind(this);\n this.createInfoBoxDiv = this.createInfoBoxDiv.bind(this);\n this.addClickHandler = this.addClickHandler.bind(this);\n this.getCloseBoxImg = this.getCloseBoxImg.bind(this);\n this.getBoxWidths = this.getBoxWidths.bind(this);\n this.setBoxStyle = this.setBoxStyle.bind(this);\n this.setPosition = this.setPosition.bind(this);\n this.getPosition = this.getPosition.bind(this);\n this.setOptions = this.setOptions.bind(this);\n this.setContent = this.setContent.bind(this);\n this.setVisible = this.setVisible.bind(this);\n this.getContent = this.getContent.bind(this);\n this.getVisible = this.getVisible.bind(this);\n this.setZIndex = this.setZIndex.bind(this);\n this.getZIndex = this.getZIndex.bind(this);\n this.onRemove = this.onRemove.bind(this);\n this.panBox = this.panBox.bind(this);\n this.extend = this.extend.bind(this);\n this.close = this.close.bind(this);\n this.draw = this.draw.bind(this);\n this.show = this.show.bind(this);\n this.hide = this.hide.bind(this);\n this.open = this.open.bind(this);\n this.extend(InfoBox, google.maps.OverlayView);\n // Standard options (in common with google.maps.InfoWindow):\n this.content = options.content || '';\n this.disableAutoPan = options.disableAutoPan || false;\n this.maxWidth = options.maxWidth || 0;\n this.pixelOffset = options.pixelOffset || new google.maps.Size(0, 0);\n this.position = options.position || new google.maps.LatLng(0, 0);\n this.zIndex = options.zIndex || null;\n // Additional options (unique to InfoBox):\n this.boxClass = options.boxClass || 'infoBox';\n this.boxStyle = options.boxStyle || {};\n this.closeBoxMargin = options.closeBoxMargin || '2px';\n this.closeBoxURL = options.closeBoxURL || 'http://www.google.com/intl/en_us/mapfiles/close.gif';\n if (options.closeBoxURL === '') {\n this.closeBoxURL = '';\n }\n this.infoBoxClearance = options.infoBoxClearance || new google.maps.Size(1, 1);\n if (typeof options.visible === 'undefined') {\n if (typeof options.isHidden === 'undefined') {\n options.visible = true;\n }\n else {\n options.visible = !options.isHidden;\n }\n }\n this.isHidden = !options.visible;\n this.alignBottom = options.alignBottom || false;\n this.pane = options.pane || 'floatPane';\n this.enableEventPropagation = options.enableEventPropagation || false;\n this.div = null;\n this.closeListener = null;\n this.moveListener = null;\n this.mapListener = null;\n this.contextListener = null;\n this.eventListeners = null;\n this.fixedWidthSet = null;\n }\n InfoBox.prototype.createInfoBoxDiv = function () {\n var _this = this;\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 var ignoreHandler = function (event) {\n event.returnValue = false;\n if (event.preventDefault) {\n event.preventDefault();\n }\n if (!_this.enableEventPropagation) {\n cancelHandler(event);\n }\n };\n if (!this.div) {\n this.div = document.createElement('div');\n this.setBoxStyle();\n if (typeof this.content === 'string') {\n this.div.innerHTML = this.getCloseBoxImg() + this.content;\n }\n else {\n this.div.innerHTML = this.getCloseBoxImg();\n this.div.appendChild(this.content);\n }\n var panes = this.getPanes();\n if (panes !== null) {\n panes[this.pane].appendChild(this.div); // Add the InfoBox div to the DOM\n }\n this.addClickHandler();\n if (this.div.style.width) {\n this.fixedWidthSet = true;\n }\n else {\n if (this.maxWidth !== 0 && this.div.offsetWidth > this.maxWidth) {\n this.div.style.width = this.maxWidth + 'px';\n this.fixedWidthSet = true;\n }\n else {\n // The following code is needed to overcome problems with MSIE\n var bw = this.getBoxWidths();\n this.div.style.width = this.div.offsetWidth - bw.left - bw.right + 'px';\n this.fixedWidthSet = false;\n }\n }\n this.panBox(this.disableAutoPan);\n if (!this.enableEventPropagation) {\n this.eventListeners = [];\n // Cancel event propagation.\n // Note: mousemove not included (to resolve Issue 152)\n var events = [\n 'mousedown',\n 'mouseover',\n 'mouseout',\n 'mouseup',\n 'click',\n 'dblclick',\n 'touchstart',\n 'touchend',\n 'touchmove',\n ];\n for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {\n var event_1 = events_1[_i];\n this.eventListeners.push(google.maps.event.addListener(this.div, event_1, cancelHandler));\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.addListener(this.div, 'mouseover', function () {\n if (_this.div) {\n _this.div.style.cursor = 'default';\n }\n }));\n }\n this.contextListener = google.maps.event.addListener(this.div, 'contextmenu', ignoreHandler);\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 InfoBox.prototype.getCloseBoxImg = function () {\n var img = '';\n if (this.closeBoxURL !== '') {\n img = '\"\"';\n\";\n }\n return img;\n };\n InfoBox.prototype.addClickHandler = function () {\n this.closeListener = this.div && this.div.firstChild && this.closeBoxURL !== ''\n ? google.maps.event.addListener(this.div.firstChild, 'click', this.getCloseClickHandler())\n : null;\n };\n InfoBox.prototype.closeClickHandler = function (event) {\n // 1.0.3 fix: Always prevent propagation of a close box click to the map:\n event.cancelBubble = true;\n if (event.stopPropagation) {\n event.stopPropagation();\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(this, 'closeclick');\n this.close();\n };\n InfoBox.prototype.getCloseClickHandler = function () {\n return this.closeClickHandler;\n };\n InfoBox.prototype.panBox = function (disablePan) {\n if (this.div && !disablePan) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n var map = this.getMap();\n // Only pan if attached to map, not panorama\n if (map instanceof google.maps.Map) {\n var xOffset = 0;\n var yOffset = 0;\n var bounds = map.getBounds();\n if (bounds && !bounds.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 var mapDiv = map.getDiv();\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n var mapWidth = mapDiv.offsetWidth;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\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 // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n var projection = this.getProjection();\n var pixPosition = projection.fromLatLngToContainerPixel(this.position);\n if (pixPosition !== null) {\n if (pixPosition.x < -iwOffsetX + padX) {\n xOffset = pixPosition.x + iwOffsetX - padX;\n }\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 }\n else if (pixPosition.y + iwOffsetY + padY > mapHeight) {\n yOffset = pixPosition.y + iwOffsetY + padY - mapHeight;\n }\n }\n else {\n if (pixPosition.y < -iwOffsetY + padY) {\n yOffset = pixPosition.y + iwOffsetY - padY;\n }\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 // Move the map to the shifted center.\n map.panBy(xOffset, yOffset);\n }\n }\n }\n };\n InfoBox.prototype.setBoxStyle = function () {\n if (this.div) {\n // Apply style values from the style sheet defined in the boxClass parameter:\n this.div.className = this.boxClass;\n // Clear existing inline style values:\n this.div.style.cssText = '';\n // Apply style values defined in the boxStyle parameter:\n var boxStyle = this.boxStyle;\n for (var i in boxStyle) {\n if (Object.prototype.hasOwnProperty.call(boxStyle, i)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.div.style[i] = boxStyle[i];\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 // Fix up opacity style for benefit of MSIE\n if (typeof this.div.style.opacity !== 'undefined' && this.div.style.opacity !== '') {\n // See http://www.quirksmode.org/css/opacity.html\n var opacity = parseFloat(this.div.style.opacity || '');\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.div.style.msFilter =\n '\"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')\"';\n this.div.style.filter = 'alpha(opacity=' + opacity * 100 + ')';\n }\n // Apply required styles\n this.div.style.position = 'absolute';\n this.div.style.visibility = 'hidden';\n if (this.zIndex !== null) {\n this.div.style.zIndex = this.zIndex + '';\n }\n if (!this.div.style.overflow) {\n this.div.style.overflow = 'auto';\n }\n }\n };\n InfoBox.prototype.getBoxWidths = function () {\n var bw = { top: 0, bottom: 0, left: 0, right: 0 };\n if (!this.div) {\n return bw;\n }\n if (document.defaultView) {\n var ownerDocument = this.div.ownerDocument;\n var computedStyle = ownerDocument && ownerDocument.defaultView\n ? ownerDocument.defaultView.getComputedStyle(this.div, '')\n : null;\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 }\n }\n else if (\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n document.documentElement.currentStyle // MSIE\n ) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n var currentStyle = this.div.currentStyle;\n if (currentStyle) {\n // The current styles may not be in pixel units, but assume they are (bad!)\n bw.top = parseInt(currentStyle.borderTopWidth || '', 10) || 0;\n bw.bottom = parseInt(currentStyle.borderBottomWidth || '', 10) || 0;\n bw.left = parseInt(currentStyle.borderLeftWidth || '', 10) || 0;\n bw.right = parseInt(currentStyle.borderRightWidth || '', 10) || 0;\n }\n }\n return bw;\n };\n InfoBox.prototype.onRemove = function () {\n if (this.div && this.div.parentNode) {\n this.div.parentNode.removeChild(this.div);\n this.div = null;\n }\n };\n InfoBox.prototype.draw = function () {\n this.createInfoBoxDiv();\n if (this.div) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n var projection = this.getProjection();\n var pixPosition = projection.fromLatLngToDivPixel(this.position);\n if (pixPosition !== null) {\n this.div.style.left = pixPosition.x + this.pixelOffset.width + 'px';\n if (this.alignBottom) {\n this.div.style.bottom = -(pixPosition.y + this.pixelOffset.height) + 'px';\n }\n else {\n this.div.style.top = pixPosition.y + this.pixelOffset.height + 'px';\n }\n }\n if (this.isHidden) {\n this.div.style.visibility = 'hidden';\n }\n else {\n this.div.style.visibility = 'visible';\n }\n }\n };\n InfoBox.prototype.setOptions = function (options) {\n if (options === void 0) { options = {}; }\n if (typeof options.boxClass !== 'undefined') {\n // Must be first\n this.boxClass = options.boxClass;\n this.setBoxStyle();\n }\n if (typeof options.boxStyle !== 'undefined') {\n // Must be second\n this.boxStyle = options.boxStyle;\n this.setBoxStyle();\n }\n if (typeof options.content !== 'undefined') {\n this.setContent(options.content);\n }\n if (typeof options.disableAutoPan !== 'undefined') {\n this.disableAutoPan = options.disableAutoPan;\n }\n if (typeof options.maxWidth !== 'undefined') {\n this.maxWidth = options.maxWidth;\n }\n if (typeof options.pixelOffset !== 'undefined') {\n this.pixelOffset = options.pixelOffset;\n }\n if (typeof options.alignBottom !== 'undefined') {\n this.alignBottom = options.alignBottom;\n }\n if (typeof options.position !== 'undefined') {\n this.setPosition(options.position);\n }\n if (typeof options.zIndex !== 'undefined') {\n this.setZIndex(options.zIndex);\n }\n if (typeof options.closeBoxMargin !== 'undefined') {\n this.closeBoxMargin = options.closeBoxMargin;\n }\n if (typeof options.closeBoxURL !== 'undefined') {\n this.closeBoxURL = options.closeBoxURL;\n }\n if (typeof options.infoBoxClearance !== 'undefined') {\n this.infoBoxClearance = options.infoBoxClearance;\n }\n if (typeof options.isHidden !== 'undefined') {\n this.isHidden = options.isHidden;\n }\n if (typeof options.visible !== 'undefined') {\n this.isHidden = !options.visible;\n }\n if (typeof options.enableEventPropagation !== 'undefined') {\n this.enableEventPropagation = options.enableEventPropagation;\n }\n if (this.div) {\n this.draw();\n }\n };\n InfoBox.prototype.setContent = function (content) {\n this.content = content;\n if (this.div) {\n if (this.closeListener) {\n google.maps.event.removeListener(this.closeListener);\n this.closeListener = null;\n }\n // Odd code required to make things work with MSIE.\n if (!this.fixedWidthSet) {\n this.div.style.width = '';\n }\n if (typeof content === 'string') {\n this.div.innerHTML = this.getCloseBoxImg() + content;\n }\n else {\n this.div.innerHTML = this.getCloseBoxImg();\n this.div.appendChild(content);\n }\n // Perverse code required to make things work with MSIE.\n // (Ensures the close box does, in fact, float to the right.)\n if (!this.fixedWidthSet) {\n this.div.style.width = this.div.offsetWidth + 'px';\n if (typeof content === 'string') {\n this.div.innerHTML = this.getCloseBoxImg() + content;\n }\n else {\n this.div.innerHTML = this.getCloseBoxImg();\n this.div.appendChild(content);\n }\n }\n this.addClickHandler();\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 InfoBox.prototype.setPosition = function (latLng) {\n this.position = latLng;\n if (this.div) {\n this.draw();\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 InfoBox.prototype.setVisible = function (isVisible) {\n this.isHidden = !isVisible;\n if (this.div) {\n this.div.style.visibility = this.isHidden ? 'hidden' : 'visible';\n }\n };\n InfoBox.prototype.setZIndex = function (index) {\n this.zIndex = index;\n if (this.div) {\n this.div.style.zIndex = index + '';\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 InfoBox.prototype.getContent = function () {\n return this.content;\n };\n InfoBox.prototype.getPosition = function () {\n return this.position;\n };\n InfoBox.prototype.getZIndex = function () {\n return this.zIndex;\n };\n InfoBox.prototype.getVisible = function () {\n var map = this.getMap();\n return typeof map === 'undefined' || map === null ? false : !this.isHidden;\n };\n InfoBox.prototype.show = function () {\n this.isHidden = false;\n if (this.div) {\n this.div.style.visibility = 'visible';\n }\n };\n InfoBox.prototype.hide = function () {\n this.isHidden = true;\n if (this.div) {\n this.div.style.visibility = 'hidden';\n }\n };\n InfoBox.prototype.open = function (map, anchor) {\n var _this = this;\n if (anchor) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.position = anchor.getPosition();\n this.moveListener = google.maps.event.addListener(anchor, 'position_changed', function () {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n var position = anchor.getPosition();\n _this.setPosition(position);\n });\n this.mapListener = google.maps.event.addListener(anchor, 'map_changed', function () {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n _this.setMap(anchor.map);\n });\n }\n this.setMap(map);\n if (this.div) {\n this.panBox();\n }\n };\n InfoBox.prototype.close = function () {\n if (this.closeListener) {\n google.maps.event.removeListener(this.closeListener);\n this.closeListener = null;\n }\n if (this.eventListeners) {\n for (var _i = 0, _a = this.eventListeners; _i < _a.length; _i++) {\n var eventListener = _a[_i];\n google.maps.event.removeListener(eventListener);\n }\n this.eventListeners = null;\n }\n if (this.moveListener) {\n google.maps.event.removeListener(this.moveListener);\n this.moveListener = null;\n }\n if (this.mapListener) {\n google.maps.event.removeListener(this.mapListener);\n this.mapListener = null;\n }\n if (this.contextListener) {\n google.maps.event.removeListener(this.contextListener);\n this.contextListener = null;\n }\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.setMap(null);\n };\n InfoBox.prototype.extend = function (obj1, obj2) {\n return function applyExtend(object) {\n for (var property in object.prototype) {\n if (!Object.prototype.hasOwnProperty.call(this, property)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.prototype[property] = object.prototype[property];\n }\n }\n return this;\n }.apply(obj1, [obj2]);\n };\n return InfoBox;\n}());\n\nexport { InfoBox };\n//# sourceMappingURL=esm.js.map\n","/* global google */\nimport {\n memo,\n useRef,\n Children,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ReactNode,\n type ReactPortal,\n type ContextType,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport invariant from 'invariant'\nimport {\n InfoBox as GoogleMapsInfoBox,\n type InfoBoxOptions,\n} from '@react-google-maps/infobox'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onCloseClick: 'closeclick',\n onContentChanged: 'content_changed',\n onDomReady: 'domready',\n onPositionChanged: 'position_changed',\n onZindexChanged: 'zindex_changed',\n}\n\nconst updaterMap = {\n options(instance: GoogleMapsInfoBox, options: InfoBoxOptions): void {\n instance.setOptions(options)\n },\n position(\n instance: GoogleMapsInfoBox,\n position: google.maps.LatLng | google.maps.LatLngLiteral\n ): void {\n if (position instanceof google.maps.LatLng) {\n instance.setPosition(position)\n } else {\n instance.setPosition(new google.maps.LatLng(position.lat, position.lng))\n }\n },\n visible(instance: GoogleMapsInfoBox, visible: boolean): void {\n instance.setVisible(visible)\n },\n zIndex(instance: GoogleMapsInfoBox, zIndex: number): void {\n instance.setZIndex(zIndex)\n },\n}\n\ntype InfoBoxState = {\n infoBox: GoogleMapsInfoBox | null\n}\n\nexport type InfoBoxProps = {\n children?: ReactNode | undefined\n /** Can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset. The anchorPoint is the offset from the anchor's position to the tip of the InfoBox. */\n anchor?: google.maps.MVCObject | undefined\n options?: InfoBoxOptions | undefined\n /** The LatLng at which to display this InfoBox. If the InfoBox is opened with an anchor, the anchor's position will be used instead. */\n position?: google.maps.LatLng | undefined\n /** All InfoBoxes are displayed on the map in order of their zIndex, with higher values displaying in front of InfoBoxes with lower values. By default, InfoBoxes are displayed according to their latitude, with InfoBoxes of lower latitudes appearing in front of InfoBoxes at higher latitudes. InfoBoxes are always displayed in front of markers. */\n zIndex?: number | undefined\n /** This event is fired when the close button was clicked. */\n onCloseClick?: (() => void) | undefined\n /** This event is fired when the
containing the InfoBox's content is attached to the DOM. You may wish to monitor this event if you are building out your info window content dynamically. */\n onDomReady?: (() => void) | undefined\n /** This event is fired when the content property changes. */\n onContentChanged?: (() => void) | undefined\n /** This event is fired when the position property changes. */\n onPositionChanged?: (() => void) | undefined\n /** This event is fired when the InfoBox's zIndex changes. */\n onZindexChanged?: (() => void) | undefined\n /** This callback is called when the infoBox instance has loaded. It is called with the infoBox instance. */\n onLoad?: ((infoBox: GoogleMapsInfoBox) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the infoBox instance. */\n onUnmount?: ((infoBox: GoogleMapsInfoBox) => void) | undefined\n}\n\nconst defaultOptions: InfoBoxOptions = {}\n\nfunction InfoBoxFunctional({\n children,\n anchor,\n options,\n position,\n zIndex,\n onCloseClick,\n onDomReady,\n onContentChanged,\n onPositionChanged,\n onZindexChanged,\n onLoad,\n onUnmount,\n}: InfoBoxProps): ReactPortal | null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(null)\n\n const [closeClickListener, setCloseClickListener] =\n useState(null)\n const [domReadyClickListener, setDomReadyClickListener] =\n useState(null)\n const [contentChangedClickListener, setContentChangedClickListener] =\n useState(null)\n const [positionChangedClickListener, setPositionChangedClickListener] =\n useState(null)\n const [zIndexChangedClickListener, setZindexChangedClickListener] =\n useState(null)\n\n const containerElementRef = useRef(null)\n\n // Order does matter\n useEffect(() => {\n if (map && instance !== null) {\n instance.close()\n\n if (anchor) {\n instance.open(map, anchor)\n } else if (instance.getPosition()) {\n instance.open(map)\n }\n }\n }, [map, instance, anchor])\n\n useEffect(() => {\n if (options && instance !== null) {\n instance.setOptions(options)\n }\n }, [instance, options])\n\n useEffect(() => {\n if (position && instance !== null) {\n const positionLatLng =\n position instanceof google.maps.LatLng\n ? position\n : // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n new google.maps.LatLng(position.lat, position.lng)\n\n instance.setPosition(positionLatLng)\n }\n }, [position])\n\n useEffect(() => {\n if (typeof zIndex === 'number' && instance !== null) {\n instance.setZIndex(zIndex)\n }\n }, [zIndex])\n\n useEffect(() => {\n if (instance && onCloseClick) {\n if (closeClickListener !== null) {\n google.maps.event.removeListener(closeClickListener)\n }\n\n setCloseClickListener(\n google.maps.event.addListener(instance, 'closeclick', onCloseClick)\n )\n }\n }, [onCloseClick])\n\n useEffect(() => {\n if (instance && onDomReady) {\n if (domReadyClickListener !== null) {\n google.maps.event.removeListener(domReadyClickListener)\n }\n\n setDomReadyClickListener(\n google.maps.event.addListener(instance, 'domready', onDomReady)\n )\n }\n }, [onDomReady])\n\n useEffect(() => {\n if (instance && onContentChanged) {\n if (contentChangedClickListener !== null) {\n google.maps.event.removeListener(contentChangedClickListener)\n }\n\n setContentChangedClickListener(\n google.maps.event.addListener(\n instance,\n 'content_changed',\n onContentChanged\n )\n )\n }\n }, [onContentChanged])\n\n useEffect(() => {\n if (instance && onPositionChanged) {\n if (positionChangedClickListener !== null) {\n google.maps.event.removeListener(positionChangedClickListener)\n }\n\n setPositionChangedClickListener(\n google.maps.event.addListener(\n instance,\n 'position_changed',\n onPositionChanged\n )\n )\n }\n }, [onPositionChanged])\n\n useEffect(() => {\n if (instance && onZindexChanged) {\n if (zIndexChangedClickListener !== null) {\n google.maps.event.removeListener(zIndexChangedClickListener)\n }\n\n setZindexChangedClickListener(\n google.maps.event.addListener(\n instance,\n 'zindex_changed',\n onZindexChanged\n )\n )\n }\n }, [onZindexChanged])\n\n useEffect(() => {\n if (map) {\n const { position, ...infoBoxOptions }: InfoBoxOptions =\n options || defaultOptions\n\n let positionLatLng: google.maps.LatLng | undefined\n\n if (position && !(position instanceof google.maps.LatLng)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n positionLatLng = new google.maps.LatLng(position.lat, position.lng)\n }\n\n const infoBox = new GoogleMapsInfoBox({\n ...infoBoxOptions,\n ...(positionLatLng ? { position: positionLatLng } : {}),\n })\n\n containerElementRef.current = document.createElement('div')\n\n setInstance(infoBox)\n\n if (onCloseClick) {\n setCloseClickListener(\n google.maps.event.addListener(infoBox, 'closeclick', onCloseClick)\n )\n }\n\n if (onDomReady) {\n setDomReadyClickListener(\n google.maps.event.addListener(infoBox, 'domready', onDomReady)\n )\n }\n\n if (onContentChanged) {\n setContentChangedClickListener(\n google.maps.event.addListener(\n infoBox,\n 'content_changed',\n onContentChanged\n )\n )\n }\n\n if (onPositionChanged) {\n setPositionChangedClickListener(\n google.maps.event.addListener(\n infoBox,\n 'position_changed',\n onPositionChanged\n )\n )\n }\n\n if (onZindexChanged) {\n setZindexChangedClickListener(\n google.maps.event.addListener(\n infoBox,\n 'zindex_changed',\n onZindexChanged\n )\n )\n }\n\n infoBox.setContent(containerElementRef.current)\n\n if (anchor) {\n infoBox.open(map, anchor)\n } else if (infoBox.getPosition()) {\n infoBox.open(map)\n } else {\n invariant(\n false,\n 'You must provide either an anchor or a position prop for .'\n )\n }\n\n if (onLoad) {\n onLoad(infoBox)\n }\n }\n\n return () => {\n if (instance !== null) {\n if (closeClickListener) {\n google.maps.event.removeListener(closeClickListener)\n }\n\n if (contentChangedClickListener) {\n google.maps.event.removeListener(contentChangedClickListener)\n }\n\n if (domReadyClickListener) {\n google.maps.event.removeListener(domReadyClickListener)\n }\n\n if (positionChangedClickListener) {\n google.maps.event.removeListener(positionChangedClickListener)\n }\n\n if (zIndexChangedClickListener) {\n google.maps.event.removeListener(zIndexChangedClickListener)\n }\n\n if (onUnmount) {\n onUnmount(instance)\n }\n\n instance.close()\n }\n }\n }, [])\n\n return containerElementRef.current\n ? createPortal(Children.only(children), containerElementRef.current)\n : null\n}\n\nexport const InfoBoxF = memo(InfoBoxFunctional)\n\nexport class InfoBoxComponent extends PureComponent<\n InfoBoxProps,\n InfoBoxState\n> {\n static override contextType = MapContext\n\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n containerElement: HTMLElement | null = null\n\n override state: InfoBoxState = {\n infoBox: null,\n }\n\n open = (infoBox: GoogleMapsInfoBox, anchor?: google.maps.MVCObject): void => {\n if (anchor) {\n if (this.context !== null) {\n infoBox.open(this.context, anchor)\n }\n } else if (infoBox.getPosition()) {\n if (this.context !== null) {\n infoBox.open(this.context)\n }\n } else {\n invariant(\n false,\n 'You must provide either an anchor or a position prop for .'\n )\n }\n }\n\n setInfoBoxCallback = (): void => {\n if (this.state.infoBox !== null && this.containerElement !== null) {\n this.state.infoBox.setContent(this.containerElement)\n\n this.open(this.state.infoBox, this.props.anchor)\n\n if (this.props.onLoad) {\n this.props.onLoad(this.state.infoBox)\n }\n }\n }\n\n override componentDidMount(): void {\n const { position, ...infoBoxOptions }: InfoBoxOptions =\n this.props.options || {}\n\n let positionLatLng: google.maps.LatLng | undefined\n\n if (position && !(position instanceof google.maps.LatLng)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n positionLatLng = new google.maps.LatLng(position.lat, position.lng)\n }\n\n const infoBox = new GoogleMapsInfoBox({\n ...infoBoxOptions,\n ...(positionLatLng ? { position: positionLatLng } : {}),\n })\n\n this.containerElement = document.createElement('div')\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: infoBox,\n })\n\n this.setState({ infoBox }, this.setInfoBoxCallback)\n }\n\n override componentDidUpdate(prevProps: InfoBoxProps): void {\n const { infoBox } = this.state\n\n if (infoBox !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: infoBox,\n })\n }\n }\n\n override componentWillUnmount(): void {\n const { onUnmount } = this.props\n const { infoBox } = this.state\n\n if (infoBox !== null) {\n if (onUnmount) {\n onUnmount(infoBox)\n }\n\n unregisterEvents(this.registeredEvents)\n infoBox.close()\n }\n }\n\n override render(): ReactPortal | null {\n return this.containerElement\n ? createPortal(Children.only(this.props.children), this.containerElement)\n : null\n }\n}\n\nexport default InfoBoxComponent\n","import objectWithoutPropertiesLoose from \"./objectWithoutPropertiesLoose.js\";\nfunction _objectWithoutProperties(e, t) {\n if (null == e) return {};\n var o,\n r,\n i = objectWithoutPropertiesLoose(e, t);\n if (Object.getOwnPropertySymbols) {\n var s = Object.getOwnPropertySymbols(e);\n for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);\n }\n return i;\n}\nexport { _objectWithoutProperties as default };","function _objectWithoutPropertiesLoose(r, e) {\n if (null == r) return {};\n var t = {};\n for (var n in r) if ({}.hasOwnProperty.call(r, n)) {\n if (e.includes(n)) continue;\n t[n] = r[n];\n }\n return t;\n}\nexport { _objectWithoutPropertiesLoose as default };","\nconst ARRAY_TYPES = [\n Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array,\n Int32Array, Uint32Array, Float32Array, Float64Array\n];\n\n/** @typedef {Int8ArrayConstructor | Uint8ArrayConstructor | Uint8ClampedArrayConstructor | Int16ArrayConstructor | Uint16ArrayConstructor | Int32ArrayConstructor | Uint32ArrayConstructor | Float32ArrayConstructor | Float64ArrayConstructor} TypedArrayConstructor */\n\nconst VERSION = 1; // serialized format version\nconst HEADER_SIZE = 8;\n\nexport default class KDBush {\n\n /**\n * Creates an index from raw `ArrayBuffer` data.\n * @param {ArrayBuffer} data\n */\n static from(data) {\n if (!(data instanceof ArrayBuffer)) {\n throw new Error('Data must be an instance of ArrayBuffer.');\n }\n const [magic, versionAndType] = new Uint8Array(data, 0, 2);\n if (magic !== 0xdb) {\n throw new Error('Data does not appear to be in a KDBush format.');\n }\n const version = versionAndType >> 4;\n if (version !== VERSION) {\n throw new Error(`Got v${version} data when expected v${VERSION}.`);\n }\n const ArrayType = ARRAY_TYPES[versionAndType & 0x0f];\n if (!ArrayType) {\n throw new Error('Unrecognized array type.');\n }\n const [nodeSize] = new Uint16Array(data, 2, 1);\n const [numItems] = new Uint32Array(data, 4, 1);\n\n return new KDBush(numItems, nodeSize, ArrayType, data);\n }\n\n /**\n * Creates an index that will hold a given number of items.\n * @param {number} numItems\n * @param {number} [nodeSize=64] Size of the KD-tree node (64 by default).\n * @param {TypedArrayConstructor} [ArrayType=Float64Array] The array type used for coordinates storage (`Float64Array` by default).\n * @param {ArrayBuffer} [data] (For internal use only)\n */\n constructor(numItems, nodeSize = 64, ArrayType = Float64Array, data) {\n if (isNaN(numItems) || numItems < 0) throw new Error(`Unpexpected numItems value: ${numItems}.`);\n\n this.numItems = +numItems;\n this.nodeSize = Math.min(Math.max(+nodeSize, 2), 65535);\n this.ArrayType = ArrayType;\n this.IndexArrayType = numItems < 65536 ? Uint16Array : Uint32Array;\n\n const arrayTypeIndex = ARRAY_TYPES.indexOf(this.ArrayType);\n const coordsByteSize = numItems * 2 * this.ArrayType.BYTES_PER_ELEMENT;\n const idsByteSize = numItems * this.IndexArrayType.BYTES_PER_ELEMENT;\n const padCoords = (8 - idsByteSize % 8) % 8;\n\n if (arrayTypeIndex < 0) {\n throw new Error(`Unexpected typed array class: ${ArrayType}.`);\n }\n\n if (data && (data instanceof ArrayBuffer)) { // reconstruct an index from a buffer\n this.data = data;\n this.ids = new this.IndexArrayType(this.data, HEADER_SIZE, numItems);\n this.coords = new this.ArrayType(this.data, HEADER_SIZE + idsByteSize + padCoords, numItems * 2);\n this._pos = numItems * 2;\n this._finished = true;\n } else { // initialize a new index\n this.data = new ArrayBuffer(HEADER_SIZE + coordsByteSize + idsByteSize + padCoords);\n this.ids = new this.IndexArrayType(this.data, HEADER_SIZE, numItems);\n this.coords = new this.ArrayType(this.data, HEADER_SIZE + idsByteSize + padCoords, numItems * 2);\n this._pos = 0;\n this._finished = false;\n\n // set header\n new Uint8Array(this.data, 0, 2).set([0xdb, (VERSION << 4) + arrayTypeIndex]);\n new Uint16Array(this.data, 2, 1)[0] = nodeSize;\n new Uint32Array(this.data, 4, 1)[0] = numItems;\n }\n }\n\n /**\n * Add a point to the index.\n * @param {number} x\n * @param {number} y\n * @returns {number} An incremental index associated with the added item (starting from `0`).\n */\n add(x, y) {\n const index = this._pos >> 1;\n this.ids[index] = index;\n this.coords[this._pos++] = x;\n this.coords[this._pos++] = y;\n return index;\n }\n\n /**\n * Perform indexing of the added points.\n */\n finish() {\n const numAdded = this._pos >> 1;\n if (numAdded !== this.numItems) {\n throw new Error(`Added ${numAdded} items when expected ${this.numItems}.`);\n }\n // kd-sort both arrays for efficient search\n sort(this.ids, this.coords, this.nodeSize, 0, this.numItems - 1, 0);\n\n this._finished = true;\n return this;\n }\n\n /**\n * Search the index for items within a given bounding box.\n * @param {number} minX\n * @param {number} minY\n * @param {number} maxX\n * @param {number} maxY\n * @returns {number[]} An array of indices correponding to the found items.\n */\n range(minX, minY, maxX, maxY) {\n if (!this._finished) throw new Error('Data not yet indexed - call index.finish().');\n\n const {ids, coords, nodeSize} = this;\n const stack = [0, ids.length - 1, 0];\n const result = [];\n\n // recursively search for items in range in the kd-sorted arrays\n while (stack.length) {\n const axis = stack.pop() || 0;\n const right = stack.pop() || 0;\n const left = stack.pop() || 0;\n\n // if we reached \"tree node\", search linearly\n if (right - left <= nodeSize) {\n for (let i = left; i <= right; i++) {\n const x = coords[2 * i];\n const y = coords[2 * i + 1];\n if (x >= minX && x <= maxX && y >= minY && y <= maxY) result.push(ids[i]);\n }\n continue;\n }\n\n // otherwise find the middle index\n const m = (left + right) >> 1;\n\n // include the middle item if it's in range\n const x = coords[2 * m];\n const y = coords[2 * m + 1];\n if (x >= minX && x <= maxX && y >= minY && y <= maxY) result.push(ids[m]);\n\n // queue search in halves that intersect the query\n if (axis === 0 ? minX <= x : minY <= y) {\n stack.push(left);\n stack.push(m - 1);\n stack.push(1 - axis);\n }\n if (axis === 0 ? maxX >= x : maxY >= y) {\n stack.push(m + 1);\n stack.push(right);\n stack.push(1 - axis);\n }\n }\n\n return result;\n }\n\n /**\n * Search the index for items within a given radius.\n * @param {number} qx\n * @param {number} qy\n * @param {number} r Query radius.\n * @returns {number[]} An array of indices correponding to the found items.\n */\n within(qx, qy, r) {\n if (!this._finished) throw new Error('Data not yet indexed - call index.finish().');\n\n const {ids, coords, nodeSize} = this;\n const stack = [0, ids.length - 1, 0];\n const result = [];\n const r2 = r * r;\n\n // recursively search for items within radius in the kd-sorted arrays\n while (stack.length) {\n const axis = stack.pop() || 0;\n const right = stack.pop() || 0;\n const left = stack.pop() || 0;\n\n // if we reached \"tree node\", search linearly\n if (right - left <= nodeSize) {\n for (let i = left; i <= right; i++) {\n if (sqDist(coords[2 * i], coords[2 * i + 1], qx, qy) <= r2) result.push(ids[i]);\n }\n continue;\n }\n\n // otherwise find the middle index\n const m = (left + right) >> 1;\n\n // include the middle item if it's in range\n const x = coords[2 * m];\n const y = coords[2 * m + 1];\n if (sqDist(x, y, qx, qy) <= r2) result.push(ids[m]);\n\n // queue search in halves that intersect the query\n if (axis === 0 ? qx - r <= x : qy - r <= y) {\n stack.push(left);\n stack.push(m - 1);\n stack.push(1 - axis);\n }\n if (axis === 0 ? qx + r >= x : qy + r >= y) {\n stack.push(m + 1);\n stack.push(right);\n stack.push(1 - axis);\n }\n }\n\n return result;\n }\n}\n\n/**\n * @param {Uint16Array | Uint32Array} ids\n * @param {InstanceType} coords\n * @param {number} nodeSize\n * @param {number} left\n * @param {number} right\n * @param {number} axis\n */\nfunction sort(ids, coords, nodeSize, left, right, axis) {\n if (right - left <= nodeSize) return;\n\n const m = (left + right) >> 1; // middle index\n\n // sort ids and coords around the middle index so that the halves lie\n // either left/right or top/bottom correspondingly (taking turns)\n select(ids, coords, m, left, right, axis);\n\n // recursively kd-sort first half and second half on the opposite axis\n sort(ids, coords, nodeSize, left, m - 1, 1 - axis);\n sort(ids, coords, nodeSize, m + 1, right, 1 - axis);\n}\n\n/**\n * Custom Floyd-Rivest selection algorithm: sort ids and coords so that\n * [left..k-1] items are smaller than k-th item (on either x or y axis)\n * @param {Uint16Array | Uint32Array} ids\n * @param {InstanceType} coords\n * @param {number} k\n * @param {number} left\n * @param {number} right\n * @param {number} axis\n */\nfunction select(ids, coords, k, left, right, axis) {\n\n while (right > left) {\n if (right - left > 600) {\n const n = right - left + 1;\n const m = k - left + 1;\n const z = Math.log(n);\n const s = 0.5 * Math.exp(2 * z / 3);\n const sd = 0.5 * Math.sqrt(z * s * (n - s) / n) * (m - n / 2 < 0 ? -1 : 1);\n const newLeft = Math.max(left, Math.floor(k - m * s / n + sd));\n const newRight = Math.min(right, Math.floor(k + (n - m) * s / n + sd));\n select(ids, coords, k, newLeft, newRight, axis);\n }\n\n const t = coords[2 * k + axis];\n let i = left;\n let j = right;\n\n swapItem(ids, coords, left, k);\n if (coords[2 * right + axis] > t) swapItem(ids, coords, left, right);\n\n while (i < j) {\n swapItem(ids, coords, i, j);\n i++;\n j--;\n while (coords[2 * i + axis] < t) i++;\n while (coords[2 * j + axis] > t) j--;\n }\n\n if (coords[2 * left + axis] === t) swapItem(ids, coords, left, j);\n else {\n j++;\n swapItem(ids, coords, j, right);\n }\n\n if (j <= k) left = j + 1;\n if (k <= j) right = j - 1;\n }\n}\n\n/**\n * @param {Uint16Array | Uint32Array} ids\n * @param {InstanceType} coords\n * @param {number} i\n * @param {number} j\n */\nfunction swapItem(ids, coords, i, j) {\n swap(ids, i, j);\n swap(coords, 2 * i, 2 * j);\n swap(coords, 2 * i + 1, 2 * j + 1);\n}\n\n/**\n * @param {InstanceType} arr\n * @param {number} i\n * @param {number} j\n */\nfunction swap(arr, i, j) {\n const tmp = arr[i];\n arr[i] = arr[j];\n arr[j] = tmp;\n}\n\n/**\n * @param {number} ax\n * @param {number} ay\n * @param {number} bx\n * @param {number} by\n */\nfunction sqDist(ax, ay, bx, by) {\n const dx = ax - bx;\n const dy = ay - by;\n return dx * dx + dy * dy;\n}\n","/* global google */\nimport {\n memo,\n useRef,\n Children,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ReactNode,\n type ReactPortal,\n type ContextType,\n} from 'react'\nimport invariant from 'invariant'\nimport { createPortal } from 'react-dom'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onCloseClick: 'closeclick',\n onContentChanged: 'content_changed',\n onDomReady: 'domready',\n onPositionChanged: 'position_changed',\n onZindexChanged: 'zindex_changed',\n}\n\nconst updaterMap = {\n options(\n instance: google.maps.InfoWindow,\n options: google.maps.InfoWindowOptions\n ): void {\n instance.setOptions(options)\n },\n position(\n instance: google.maps.InfoWindow,\n position: google.maps.LatLng | google.maps.LatLngLiteral\n ): void {\n instance.setPosition(position)\n },\n zIndex(instance: google.maps.InfoWindow, zIndex: number): void {\n instance.setZIndex(zIndex)\n },\n}\n\ntype InfoWindowState = {\n infoWindow: google.maps.InfoWindow | null\n}\n\nexport type InfoWindowProps = {\n children?: ReactNode | undefined\n /** Can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset. The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow. */\n anchor?: google.maps.MVCObject | undefined\n options?: google.maps.InfoWindowOptions | undefined\n /** The LatLng at which to display this InfoWindow. If the InfoWindow is opened with an anchor, the anchor's position will be used instead. */\n position?: google.maps.LatLng | google.maps.LatLngLiteral | undefined\n /** All InfoWindows are displayed on the map in order of their zIndex, with higher values displaying in front of InfoWindows with lower values. By default, InfoWindows are displayed according to their latitude, with InfoWindows of lower latitudes appearing in front of InfoWindows at higher latitudes. InfoWindows are always displayed in front of markers. */\n zIndex?: number | undefined\n /** This event is fired when the close button was clicked. */\n onCloseClick?: (() => void) | undefined\n /** This event is fired when the
containing the InfoWindow's content is attached to the DOM. You may wish to monitor this event if you are building out your info window content dynamically. */\n onDomReady?: (() => void) | undefined\n /** This event is fired when the content property changes. */\n onContentChanged?: (() => void) | undefined\n /** This event is fired when the position property changes. */\n onPositionChanged?: (() => void) | undefined\n /** This event is fired when the InfoWindow's zIndex changes. */\n onZindexChanged?: (() => void) | undefined\n /** This callback is called when the infoWindow instance has loaded. It is called with the infoWindow instance. */\n onLoad?: ((infoWindow: google.maps.InfoWindow) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the infoWindow instance. */\n onUnmount?: ((infoWindow: google.maps.InfoWindow) => void) | undefined\n}\n\nfunction InfoWindowFunctional({\n children,\n anchor,\n options,\n position,\n zIndex,\n onCloseClick,\n onDomReady,\n onContentChanged,\n onPositionChanged,\n onZindexChanged,\n onLoad,\n onUnmount,\n}: InfoWindowProps): ReactPortal | null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(null)\n\n const [closeclickListener, setCloseClickListener] =\n useState(null)\n const [domreadyclickListener, setDomReadyClickListener] =\n useState(null)\n const [contentchangedclickListener, setContentChangedClickListener] =\n useState(null)\n const [positionchangedclickListener, setPositionChangedClickListener] =\n useState(null)\n const [zindexchangedclickListener, setZindexChangedClickListener] =\n useState(null)\n\n const containerElementRef = useRef(null)\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.close()\n\n if (anchor) {\n instance.open(map, anchor)\n } else if (instance.getPosition()) {\n instance.open(map)\n }\n }\n }, [map, instance, anchor])\n\n useEffect(() => {\n if (options && instance !== null) {\n instance.setOptions(options)\n }\n }, [instance, options])\n\n useEffect(() => {\n if (position && instance !== null) {\n instance.setPosition(position)\n }\n }, [position])\n\n useEffect(() => {\n if (typeof zIndex === 'number' && instance !== null) {\n instance.setZIndex(zIndex)\n }\n }, [zIndex])\n\n useEffect(() => {\n if (instance && onCloseClick) {\n if (closeclickListener !== null) {\n google.maps.event.removeListener(closeclickListener)\n }\n\n setCloseClickListener(\n google.maps.event.addListener(instance, 'closeclick', onCloseClick)\n )\n }\n }, [onCloseClick])\n\n useEffect(() => {\n if (instance && onDomReady) {\n if (domreadyclickListener !== null) {\n google.maps.event.removeListener(domreadyclickListener)\n }\n\n setDomReadyClickListener(\n google.maps.event.addListener(instance, 'domready', onDomReady)\n )\n }\n }, [onDomReady])\n\n useEffect(() => {\n if (instance && onContentChanged) {\n if (contentchangedclickListener !== null) {\n google.maps.event.removeListener(contentchangedclickListener)\n }\n\n setContentChangedClickListener(\n google.maps.event.addListener(\n instance,\n 'content_changed',\n onContentChanged\n )\n )\n }\n }, [onContentChanged])\n\n useEffect(() => {\n if (instance && onPositionChanged) {\n if (positionchangedclickListener !== null) {\n google.maps.event.removeListener(positionchangedclickListener)\n }\n\n setPositionChangedClickListener(\n google.maps.event.addListener(\n instance,\n 'position_changed',\n onPositionChanged\n )\n )\n }\n }, [onPositionChanged])\n\n useEffect(() => {\n if (instance && onZindexChanged) {\n if (zindexchangedclickListener !== null) {\n google.maps.event.removeListener(zindexchangedclickListener)\n }\n\n setZindexChangedClickListener(\n google.maps.event.addListener(\n instance,\n 'zindex_changed',\n onZindexChanged\n )\n )\n }\n }, [onZindexChanged])\n\n useEffect(() => {\n const infoWindow = new google.maps.InfoWindow(options)\n\n setInstance(infoWindow)\n\n containerElementRef.current = document.createElement('div')\n\n if (onCloseClick) {\n setCloseClickListener(\n google.maps.event.addListener(infoWindow, 'closeclick', onCloseClick)\n )\n }\n\n if (onDomReady) {\n setDomReadyClickListener(\n google.maps.event.addListener(infoWindow, 'domready', onDomReady)\n )\n }\n\n if (onContentChanged) {\n setContentChangedClickListener(\n google.maps.event.addListener(\n infoWindow,\n 'content_changed',\n onContentChanged\n )\n )\n }\n\n if (onPositionChanged) {\n setPositionChangedClickListener(\n google.maps.event.addListener(\n infoWindow,\n 'position_changed',\n onPositionChanged\n )\n )\n }\n\n if (onZindexChanged) {\n setZindexChangedClickListener(\n google.maps.event.addListener(\n infoWindow,\n 'zindex_changed',\n onZindexChanged\n )\n )\n }\n\n infoWindow.setContent(containerElementRef.current)\n\n if (position) {\n infoWindow.setPosition(position)\n }\n\n if (zIndex) {\n infoWindow.setZIndex(zIndex)\n }\n\n if (anchor) {\n infoWindow.open(map, anchor)\n } else if (infoWindow.getPosition()) {\n infoWindow.open(map)\n } else {\n invariant(\n false,\n `You must provide either an anchor (typically render it inside a ) or a position props for .`\n )\n }\n\n if (onLoad) {\n onLoad(infoWindow)\n }\n\n return () => {\n if (closeclickListener) {\n google.maps.event.removeListener(closeclickListener)\n }\n\n if (contentchangedclickListener) {\n google.maps.event.removeListener(contentchangedclickListener)\n }\n\n if (domreadyclickListener) {\n google.maps.event.removeListener(domreadyclickListener)\n }\n\n if (positionchangedclickListener) {\n google.maps.event.removeListener(positionchangedclickListener)\n }\n\n if (zindexchangedclickListener) {\n google.maps.event.removeListener(zindexchangedclickListener)\n }\n\n if (onUnmount) {\n onUnmount(infoWindow)\n }\n\n infoWindow.close()\n }\n }, [])\n\n return containerElementRef.current\n ? createPortal(Children.only(children), containerElementRef.current)\n : null\n}\n\nexport const InfoWindowF = memo(InfoWindowFunctional)\n\nexport class InfoWindow extends PureComponent<\n InfoWindowProps,\n InfoWindowState\n> {\n static override contextType = MapContext\n\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n containerElement: HTMLElement | null = null\n\n override state: InfoWindowState = {\n infoWindow: null,\n }\n\n open = (\n infoWindow: google.maps.InfoWindow,\n anchor?: google.maps.MVCObject | undefined\n ): void => {\n if (anchor) {\n infoWindow.open(this.context, anchor)\n } else if (infoWindow.getPosition()) {\n infoWindow.open(this.context)\n } else {\n invariant(\n false,\n `You must provide either an anchor (typically render it inside a ) or a position props for .`\n )\n }\n }\n\n setInfoWindowCallback = (): void => {\n if (this.state.infoWindow !== null && this.containerElement !== null) {\n this.state.infoWindow.setContent(this.containerElement)\n\n this.open(this.state.infoWindow, this.props.anchor)\n\n if (this.props.onLoad) {\n this.props.onLoad(this.state.infoWindow)\n }\n }\n }\n\n override componentDidMount(): void {\n const infoWindow = new google.maps.InfoWindow(this.props.options)\n\n this.containerElement = document.createElement('div')\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: infoWindow,\n })\n\n this.setState(() => {\n return {\n infoWindow,\n }\n }, this.setInfoWindowCallback)\n }\n\n override componentDidUpdate(prevProps: InfoWindowProps): void {\n if (this.state.infoWindow !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.infoWindow,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.infoWindow !== null) {\n unregisterEvents(this.registeredEvents)\n\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.infoWindow)\n }\n\n this.state.infoWindow.close()\n }\n }\n\n override render(): ReactPortal | null {\n return this.containerElement\n ? createPortal(Children.only(this.props.children), this.containerElement)\n : null\n }\n}\n\nexport default InfoWindow\n","import {\n memo,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ContextType,\n} from 'react'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onClick: 'click',\n onDblClick: 'dblclick',\n onDrag: 'drag',\n onDragEnd: 'dragend',\n onDragStart: 'dragstart',\n onMouseDown: 'mousedown',\n onMouseMove: 'mousemove',\n onMouseOut: 'mouseout',\n onMouseOver: 'mouseover',\n onMouseUp: 'mouseup',\n onRightClick: 'rightclick',\n}\n\nconst updaterMap = {\n draggable(instance: google.maps.Polyline, draggable: boolean): void {\n instance.setDraggable(draggable)\n },\n editable(instance: google.maps.Polyline, editable: boolean): void {\n instance.setEditable(editable)\n },\n map(instance: google.maps.Polyline, map: google.maps.Map): void {\n instance.setMap(map)\n },\n options(\n instance: google.maps.Polyline,\n options: google.maps.PolylineOptions\n ): void {\n instance.setOptions(options)\n },\n path(\n instance: google.maps.Polyline,\n path:\n | google.maps.MVCArray\n | google.maps.LatLng[]\n | google.maps.LatLngLiteral[]\n ): void {\n instance.setPath(path)\n },\n visible(instance: google.maps.Polyline, visible: boolean): void {\n instance.setVisible(visible)\n },\n}\n\ntype PolylineState = {\n polyline: google.maps.Polyline | null\n}\n\nexport type PolylineProps = {\n options?: google.maps.PolylineOptions | undefined\n /** If set to true, the user can drag this shape over the map. The geodesic property defines the mode of dragging. */\n draggable?: boolean | undefined\n /** If set to true, the user can edit this shape by dragging the control points shown at the vertices and on each segment. */\n editable?: boolean | undefined\n /** Hides this poly if set to false. */\n visible?: boolean | undefined\n /** Sets the path. The ordered sequence of coordinates of the Polyline. This path may be specified using either a simple array of LatLngs, or an MVCArray of LatLngs. Note that if you pass a simple array, it will be converted to an MVCArray Inserting or removing LatLngs in the MVCArray will automatically update the polyline on the map. */\n path?:\n | google.maps.MVCArray\n | google.maps.LatLng[]\n | google.maps.LatLngLiteral[]\n | undefined\n /** This event is fired when the DOM dblclick event is fired on the Polyline. */\n onDblClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user stops dragging the polyline. */\n onDragEnd?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user starts dragging the polyline. */\n onDragStart?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mousedown event is fired on the Polyline. */\n onMouseDown?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mousemove event is fired on the Polyline. */\n onMouseMove?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired on Polyline mouseout. */\n onMouseOut?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired on Polyline mouseover. */\n onMouseOver?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mouseup event is fired on the Polyline. */\n onMouseUp?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the Polyline is right-clicked on. */\n onRightClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM click event is fired on the Polyline. */\n onClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is repeatedly fired while the user drags the polyline. */\n onDrag?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This callback is called when the polyline instance has loaded. It is called with the polyline instance. */\n onLoad?: ((polyline: google.maps.Polyline) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the polyline instance. */\n onUnmount?: ((polyline: google.maps.Polyline) => void) | undefined\n}\n\nconst defaultOptions = {}\n\nfunction PolylineFunctional({\n options,\n draggable,\n editable,\n visible,\n path,\n onDblClick,\n onDragEnd,\n onDragStart,\n onMouseDown,\n onMouseMove,\n onMouseOut,\n onMouseOver,\n onMouseUp,\n onRightClick,\n onClick,\n onDrag,\n onLoad,\n onUnmount,\n}: PolylineProps): null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(null)\n\n const [dblclickListener, setDblclickListener] =\n useState(null)\n const [dragendListener, setDragendListener] =\n useState(null)\n const [dragstartListener, setDragstartListener] =\n useState(null)\n const [mousedownListener, setMousedownListener] =\n useState(null)\n const [mousemoveListener, setMousemoveListener] =\n useState(null)\n const [mouseoutListener, setMouseoutListener] =\n useState(null)\n const [mouseoverListener, setMouseoverListener] =\n useState(null)\n const [mouseupListener, setMouseupListener] =\n useState(null)\n const [rightclickListener, setRightclickListener] =\n useState(null)\n const [clickListener, setClickListener] =\n useState(null)\n const [dragListener, setDragListener] =\n useState(null)\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n if (typeof options !== 'undefined' && instance !== null) {\n instance.setOptions(options)\n }\n }, [instance, options])\n\n useEffect(() => {\n if (typeof draggable !== 'undefined' && instance !== null) {\n instance.setDraggable(draggable)\n }\n }, [instance, draggable])\n\n useEffect(() => {\n if (typeof editable !== 'undefined' && instance !== null) {\n instance.setEditable(editable)\n }\n }, [instance, editable])\n\n useEffect(() => {\n if (typeof visible !== 'undefined' && instance !== null) {\n instance.setVisible(visible)\n }\n }, [instance, visible])\n\n useEffect(() => {\n if (typeof path !== 'undefined' && instance !== null) {\n instance.setPath(path)\n }\n }, [instance, path])\n\n useEffect(() => {\n if (instance && onDblClick) {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n setDblclickListener(\n google.maps.event.addListener(instance, 'dblclick', onDblClick)\n )\n }\n }, [onDblClick])\n\n useEffect(() => {\n if (instance && onDragEnd) {\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n setDragendListener(\n google.maps.event.addListener(instance, 'dragend', onDragEnd)\n )\n }\n }, [onDragEnd])\n\n useEffect(() => {\n if (instance && onDragStart) {\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n setDragstartListener(\n google.maps.event.addListener(instance, 'dragstart', onDragStart)\n )\n }\n }, [onDragStart])\n\n useEffect(() => {\n if (instance && onMouseDown) {\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n setMousedownListener(\n google.maps.event.addListener(instance, 'mousedown', onMouseDown)\n )\n }\n }, [onMouseDown])\n\n useEffect(() => {\n if (instance && onMouseMove) {\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n setMousemoveListener(\n google.maps.event.addListener(instance, 'mousemove', onMouseMove)\n )\n }\n }, [onMouseMove])\n\n useEffect(() => {\n if (instance && onMouseOut) {\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n setMouseoutListener(\n google.maps.event.addListener(instance, 'mouseout', onMouseOut)\n )\n }\n }, [onMouseOut])\n\n useEffect(() => {\n if (instance && onMouseOver) {\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n setMouseoverListener(\n google.maps.event.addListener(instance, 'mouseover', onMouseOver)\n )\n }\n }, [onMouseOver])\n\n useEffect(() => {\n if (instance && onMouseUp) {\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n setMouseupListener(\n google.maps.event.addListener(instance, 'mouseup', onMouseUp)\n )\n }\n }, [onMouseUp])\n\n useEffect(() => {\n if (instance && onRightClick) {\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n setRightclickListener(\n google.maps.event.addListener(instance, 'rightclick', onRightClick)\n )\n }\n }, [onRightClick])\n\n useEffect(() => {\n if (instance && onClick) {\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n setClickListener(\n google.maps.event.addListener(instance, 'click', onClick)\n )\n }\n }, [onClick])\n\n useEffect(() => {\n if (instance && onDrag) {\n if (dragListener !== null) {\n google.maps.event.removeListener(dragListener)\n }\n\n setDragListener(google.maps.event.addListener(instance, 'drag', onDrag))\n }\n }, [onDrag])\n\n useEffect(() => {\n const polyline = new google.maps.Polyline({\n ...(options || defaultOptions),\n map,\n })\n\n if (path) {\n polyline.setPath(path)\n }\n\n if (typeof visible !== 'undefined') {\n polyline.setVisible(visible)\n }\n\n if (typeof editable !== 'undefined') {\n polyline.setEditable(editable)\n }\n\n if (typeof draggable !== 'undefined') {\n polyline.setDraggable(draggable)\n }\n\n if (onDblClick) {\n setDblclickListener(\n google.maps.event.addListener(polyline, 'dblclick', onDblClick)\n )\n }\n\n if (onDragEnd) {\n setDragendListener(\n google.maps.event.addListener(polyline, 'dragend', onDragEnd)\n )\n }\n\n if (onDragStart) {\n setDragstartListener(\n google.maps.event.addListener(polyline, 'dragstart', onDragStart)\n )\n }\n\n if (onMouseDown) {\n setMousedownListener(\n google.maps.event.addListener(polyline, 'mousedown', onMouseDown)\n )\n }\n\n if (onMouseMove) {\n setMousemoveListener(\n google.maps.event.addListener(polyline, 'mousemove', onMouseMove)\n )\n }\n\n if (onMouseOut) {\n setMouseoutListener(\n google.maps.event.addListener(polyline, 'mouseout', onMouseOut)\n )\n }\n\n if (onMouseOver) {\n setMouseoverListener(\n google.maps.event.addListener(polyline, 'mouseover', onMouseOver)\n )\n }\n\n if (onMouseUp) {\n setMouseupListener(\n google.maps.event.addListener(polyline, 'mouseup', onMouseUp)\n )\n }\n\n if (onRightClick) {\n setRightclickListener(\n google.maps.event.addListener(polyline, 'rightclick', onRightClick)\n )\n }\n\n if (onClick) {\n setClickListener(\n google.maps.event.addListener(polyline, 'click', onClick)\n )\n }\n\n if (onDrag) {\n setDragListener(google.maps.event.addListener(polyline, 'drag', onDrag))\n }\n\n setInstance(polyline)\n\n if (onLoad) {\n onLoad(polyline)\n }\n\n return () => {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n if (onUnmount) {\n onUnmount(polyline)\n }\n\n polyline.setMap(null)\n }\n }, [])\n\n return null\n}\n\nexport const PolylineF = memo(PolylineFunctional)\n\nexport class Polyline extends PureComponent {\n static override contextType = MapContext\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n override state: PolylineState = {\n polyline: null,\n }\n\n setPolylineCallback = (): void => {\n if (this.state.polyline !== null && this.props.onLoad) {\n this.props.onLoad(this.state.polyline)\n }\n }\n\n override componentDidMount(): void {\n const polyline = new google.maps.Polyline({\n ...this.props.options,\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: polyline,\n })\n\n this.setState(function setPolyline() {\n return {\n polyline,\n }\n }, this.setPolylineCallback)\n }\n\n override componentDidUpdate(prevProps: PolylineProps): void {\n if (this.state.polyline !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.polyline,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.polyline === null) {\n return\n }\n\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.polyline)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.polyline.setMap(null)\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default Polyline\n","/* global google */\nimport {\n memo,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ContextType,\n} from 'react'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onClick: 'click',\n onDblClick: 'dblclick',\n onDrag: 'drag',\n onDragEnd: 'dragend',\n onDragStart: 'dragstart',\n onMouseDown: 'mousedown',\n onMouseMove: 'mousemove',\n onMouseOut: 'mouseout',\n onMouseOver: 'mouseover',\n onMouseUp: 'mouseup',\n onRightClick: 'rightclick',\n}\n\nconst updaterMap = {\n draggable(instance: google.maps.Polygon, draggable: boolean): void {\n instance.setDraggable(draggable)\n },\n editable(instance: google.maps.Polygon, editable: boolean): void {\n instance.setEditable(editable)\n },\n map(instance: google.maps.Polygon, map: google.maps.Map): void {\n instance.setMap(map)\n },\n options(\n instance: google.maps.Polygon,\n options: google.maps.PolygonOptions\n ): void {\n instance.setOptions(options)\n },\n path(\n instance: google.maps.Polygon,\n path:\n | google.maps.MVCArray\n | google.maps.LatLng[]\n | google.maps.LatLngLiteral[]\n ): void {\n instance.setPath(path)\n },\n\n paths(\n instance: google.maps.Polygon,\n paths:\n | google.maps.MVCArray\n | google.maps.MVCArray>\n | google.maps.LatLng[]\n | google.maps.LatLng[][]\n | google.maps.LatLngLiteral[]\n | google.maps.LatLngLiteral[][]\n ): void {\n instance.setPaths(paths)\n },\n\n visible(instance: google.maps.Polygon, visible: boolean): void {\n instance.setVisible(visible)\n },\n}\n\nexport type PolygonProps = {\n options?: google.maps.PolygonOptions | undefined\n /** If set to true, the user can drag this shape over the map. The geodesic property defines the mode of dragging. */\n draggable?: boolean | undefined\n /** If set to true, the user can edit this shape by dragging the control points shown at the vertices and on each segment. */\n editable?: boolean | undefined\n /** Hides this poly if set to false. */\n visible?: boolean | undefined\n /** Sets the first path. See Paths for more details. */\n path?:\n | google.maps.MVCArray\n | google.maps.LatLng[]\n | google.maps.LatLngLiteral[]\n | undefined\n /** Sets the path for this polygon. The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths. As a result, the paths property may specify one or more arrays of LatLng coordinates. Paths are closed automatically; do not repeat the first vertex of the path as the last vertex. Simple polygons may be defined using a single array of LatLngs. More complex polygons may specify an array of arrays. Any simple arrays are converted into MVCArrays. Inserting or removing LatLngs from the MVCArray will automatically update the polygon on the map. */\n paths?:\n | google.maps.MVCArray\n | google.maps.MVCArray>\n | google.maps.LatLng[]\n | google.maps.LatLng[][]\n | google.maps.LatLngLiteral[]\n | google.maps.LatLngLiteral[][]\n | undefined\n /** This event is fired when the DOM dblclick event is fired on the Polygon. */\n onDblClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user stops dragging the polygon. */\n onDragEnd?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user starts dragging the polygon. */\n onDragStart?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mousedown event is fired on the Polygon. */\n onMouseDown?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mousemove event is fired on the Polygon. */\n onMouseMove?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired on Polygon mouseout. */\n onMouseOut?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired on Polygon mouseover. */\n onMouseOver?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mouseup event is fired on the Polygon. */\n onMouseUp?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the Polygon is right-clicked on. */\n onRightClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM click event is fired on the Polygon. */\n onClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is repeatedly fired while the user drags the polygon. */\n onDrag?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This callback is called when the polygon instance has loaded. It is called with the polygon instance. */\n onLoad?: ((polygon: google.maps.Polygon) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the polygon instance. */\n onUnmount?: ((polygon: google.maps.Polygon) => void) | undefined\n /** This callback is called when the components editing is finished */\n onEdit?: ((polygon: google.maps.Polygon) => void) | undefined\n}\n\nfunction PolygonFunctional({\n options,\n draggable,\n editable,\n visible,\n path,\n paths,\n onDblClick,\n onDragEnd,\n onDragStart,\n onMouseDown,\n onMouseMove,\n onMouseOut,\n onMouseOver,\n onMouseUp,\n onRightClick,\n onClick,\n onDrag,\n onLoad,\n onUnmount,\n onEdit,\n}: PolygonProps): null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(null)\n\n const [dblclickListener, setDblclickListener] =\n useState(null)\n const [dragendListener, setDragendListener] =\n useState(null)\n const [dragstartListener, setDragstartListener] =\n useState(null)\n const [mousedownListener, setMousedownListener] =\n useState(null)\n const [mousemoveListener, setMousemoveListener] =\n useState(null)\n const [mouseoutListener, setMouseoutListener] =\n useState(null)\n const [mouseoverListener, setMouseoverListener] =\n useState(null)\n const [mouseupListener, setMouseupListener] =\n useState(null)\n const [rightclickListener, setRightclickListener] =\n useState(null)\n const [clickListener, setClickListener] =\n useState(null)\n const [dragListener, setDragListener] =\n useState(null)\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n if (typeof options !== 'undefined' && instance !== null) {\n instance.setOptions(options)\n }\n }, [instance, options])\n\n useEffect(() => {\n if (typeof draggable !== 'undefined' && instance !== null) {\n instance.setDraggable(draggable)\n }\n }, [instance, draggable])\n\n useEffect(() => {\n if (typeof editable !== 'undefined' && instance !== null) {\n instance.setEditable(editable)\n }\n }, [instance, editable])\n\n useEffect(() => {\n if (typeof visible !== 'undefined' && instance !== null) {\n instance.setVisible(visible)\n }\n }, [instance, visible])\n\n useEffect(() => {\n if (typeof path !== 'undefined' && instance !== null) {\n instance.setPath(path)\n }\n }, [instance, path])\n\n useEffect(() => {\n if (typeof paths !== 'undefined' && instance !== null) {\n instance.setPaths(paths)\n }\n }, [instance, paths])\n\n useEffect(() => {\n if (instance && typeof onDblClick === 'function') {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n setDblclickListener(\n google.maps.event.addListener(instance, 'dblclick', onDblClick)\n )\n }\n }, [onDblClick])\n\n useEffect(() => {\n if (!instance) {\n return\n }\n\n google.maps.event.addListener(instance.getPath(), 'insert_at', () => {\n onEdit?.(instance)\n })\n\n google.maps.event.addListener(instance.getPath(), 'set_at', () => {\n onEdit?.(instance)\n })\n\n google.maps.event.addListener(instance.getPath(), 'remove_at', () => {\n onEdit?.(instance)\n })\n }, [instance, onEdit])\n\n useEffect(() => {\n if (instance && typeof onDragEnd === 'function') {\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n setDragendListener(\n google.maps.event.addListener(instance, 'dragend', onDragEnd)\n )\n }\n }, [onDragEnd])\n\n useEffect(() => {\n if (instance && typeof onDragStart === 'function') {\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n setDragstartListener(\n google.maps.event.addListener(instance, 'dragstart', onDragStart)\n )\n }\n }, [onDragStart])\n\n useEffect(() => {\n if (instance && typeof onMouseDown === 'function') {\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n setMousedownListener(\n google.maps.event.addListener(instance, 'mousedown', onMouseDown)\n )\n }\n }, [onMouseDown])\n\n useEffect(() => {\n if (instance && typeof onMouseMove === 'function') {\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n setMousemoveListener(\n google.maps.event.addListener(instance, 'mousemove', onMouseMove)\n )\n }\n }, [onMouseMove])\n\n useEffect(() => {\n if (instance && typeof onMouseOut === 'function') {\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n setMouseoutListener(\n google.maps.event.addListener(instance, 'mouseout', onMouseOut)\n )\n }\n }, [onMouseOut])\n\n useEffect(() => {\n if (instance && typeof onMouseOver === 'function') {\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n setMouseoverListener(\n google.maps.event.addListener(instance, 'mouseover', onMouseOver)\n )\n }\n }, [onMouseOver])\n\n useEffect(() => {\n if (instance && typeof onMouseUp === 'function') {\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n setMouseupListener(\n google.maps.event.addListener(instance, 'mouseup', onMouseUp)\n )\n }\n }, [onMouseUp])\n\n useEffect(() => {\n if (instance && typeof onRightClick === 'function') {\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n setRightclickListener(\n google.maps.event.addListener(instance, 'rightclick', onRightClick)\n )\n }\n }, [onRightClick])\n\n useEffect(() => {\n if (instance && typeof onClick === 'function') {\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n setClickListener(\n google.maps.event.addListener(instance, 'click', onClick)\n )\n }\n }, [onClick])\n\n useEffect(() => {\n if (instance && typeof onDrag === 'function') {\n if (dragListener !== null) {\n google.maps.event.removeListener(dragListener)\n }\n\n setDragListener(google.maps.event.addListener(instance, 'drag', onDrag))\n }\n }, [onDrag])\n\n useEffect(() => {\n const polygon = new google.maps.Polygon({\n ...options,\n map,\n })\n\n if (path) {\n polygon.setPath(path)\n }\n\n if (paths) {\n polygon.setPaths(paths)\n }\n\n if (typeof visible !== 'undefined') {\n polygon.setVisible(visible)\n }\n\n if (typeof editable !== 'undefined') {\n polygon.setEditable(editable)\n }\n\n if (typeof draggable !== 'undefined') {\n polygon.setDraggable(draggable)\n }\n\n if (onDblClick) {\n setDblclickListener(\n google.maps.event.addListener(polygon, 'dblclick', onDblClick)\n )\n }\n\n if (onDragEnd) {\n setDragendListener(\n google.maps.event.addListener(polygon, 'dragend', onDragEnd)\n )\n }\n\n if (onDragStart) {\n setDragstartListener(\n google.maps.event.addListener(polygon, 'dragstart', onDragStart)\n )\n }\n\n if (onMouseDown) {\n setMousedownListener(\n google.maps.event.addListener(polygon, 'mousedown', onMouseDown)\n )\n }\n\n if (onMouseMove) {\n setMousemoveListener(\n google.maps.event.addListener(polygon, 'mousemove', onMouseMove)\n )\n }\n\n if (onMouseOut) {\n setMouseoutListener(\n google.maps.event.addListener(polygon, 'mouseout', onMouseOut)\n )\n }\n\n if (onMouseOver) {\n setMouseoverListener(\n google.maps.event.addListener(polygon, 'mouseover', onMouseOver)\n )\n }\n\n if (onMouseUp) {\n setMouseupListener(\n google.maps.event.addListener(polygon, 'mouseup', onMouseUp)\n )\n }\n\n if (onRightClick) {\n setRightclickListener(\n google.maps.event.addListener(polygon, 'rightclick', onRightClick)\n )\n }\n\n if (onClick) {\n setClickListener(google.maps.event.addListener(polygon, 'click', onClick))\n }\n\n if (onDrag) {\n setDragListener(google.maps.event.addListener(polygon, 'drag', onDrag))\n }\n\n setInstance(polygon)\n\n if (onLoad) {\n onLoad(polygon)\n }\n\n return () => {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n if (onUnmount) {\n onUnmount(polygon)\n }\n\n polygon.setMap(null)\n }\n }, [])\n\n return null\n}\n\nexport const PolygonF = memo(PolygonFunctional)\n\nexport class Polygon extends PureComponent {\n static override contextType = MapContext\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n polygon: google.maps.Polygon | undefined\n\n override componentDidMount(): void {\n const polygonOptions = this.props.options || {}\n\n this.polygon = new google.maps.Polygon(polygonOptions)\n\n this.polygon.setMap(this.context)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: this.polygon,\n })\n\n if (this.props.onLoad) {\n this.props.onLoad(this.polygon)\n }\n }\n\n override componentDidUpdate(prevProps: PolygonProps): void {\n if (this.polygon) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.polygon,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.polygon) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.polygon)\n }\n\n unregisterEvents(this.registeredEvents)\n\n if (this.polygon) {\n this.polygon.setMap(null)\n }\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default Polygon\n","import {\n memo,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ContextType,\n} from 'react'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onBoundsChanged: 'bounds_changed',\n onClick: 'click',\n onDblClick: 'dblclick',\n onDrag: 'drag',\n onDragEnd: 'dragend',\n onDragStart: 'dragstart',\n onMouseDown: 'mousedown',\n onMouseMove: 'mousemove',\n onMouseOut: 'mouseout',\n onMouseOver: 'mouseover',\n onMouseUp: 'mouseup',\n onRightClick: 'rightclick',\n}\n\nconst updaterMap = {\n bounds(\n instance: google.maps.Rectangle,\n bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral\n ): void {\n instance.setBounds(bounds)\n },\n draggable(instance: google.maps.Rectangle, draggable: boolean): void {\n instance.setDraggable(draggable)\n },\n editable(instance: google.maps.Rectangle, editable: boolean): void {\n instance.setEditable(editable)\n },\n map(instance: google.maps.Rectangle, map: google.maps.Map): void {\n instance.setMap(map)\n },\n options(\n instance: google.maps.Rectangle,\n options: google.maps.RectangleOptions\n ): void {\n instance.setOptions(options)\n },\n visible(instance: google.maps.Rectangle, visible: boolean): void {\n instance.setVisible(visible)\n },\n}\n\ntype RectangleState = {\n rectangle: google.maps.Rectangle | null\n}\n\nexport type RectangleProps = {\n options?: google.maps.RectangleOptions | undefined\n /** Sets the bounds of this rectangle. */\n bounds?:\n | google.maps.LatLngBounds\n | google.maps.LatLngBoundsLiteral\n | undefined\n /** If set to true, the user can drag this rectangle over the map. */\n draggable?: boolean | undefined\n /** If set to true, the user can edit this rectangle by dragging the control points shown at the corners and on each edge. */\n editable?: boolean | undefined\n /** Hides this rectangle if set to false. */\n visible?: boolean | undefined\n /** @deprecated Indicates whether this Rectangle handles mouse events. Defaults to true. Does not exist on RectangleF component. In google-maps-api types it belongs to options! update options.clickable instead! */\n clickable?: boolean | undefined\n /** This event is fired when the DOM dblclick event is fired on the rectangle. */\n onDblClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user stops dragging the rectangle. */\n onDragEnd?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user starts dragging the rectangle. */\n onDragStart?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mousedown event is fired on the rectangle. */\n onMouseDown?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mousemove event is fired on the rectangle. */\n onMouseMove?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired on rectangle mouseout. */\n onMouseOut?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired on rectangle mouseover. */\n onMouseOver?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mouseup event is fired on the rectangle. */\n onMouseUp?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the rectangle is right-clicked on. */\n onRightClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM click event is fired on the rectangle. */\n onClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is repeatedly fired while the user drags the rectangle. */\n onDrag?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the rectangle's bounds are changed. */\n onBoundsChanged?: (() => void) | undefined\n /** This callback is called when the rectangle instance has loaded. It is called with the rectangle instance. */\n onLoad?: ((rectangle: google.maps.Rectangle) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the rectangle instance. */\n onUnmount?: ((rectangle: google.maps.Rectangle) => void) | undefined\n}\n\nfunction RectangleFunctional({\n options,\n bounds,\n draggable,\n editable,\n visible,\n onDblClick,\n onDragEnd,\n onDragStart,\n onMouseDown,\n onMouseMove,\n onMouseOut,\n onMouseOver,\n onMouseUp,\n onRightClick,\n onClick,\n onDrag,\n onBoundsChanged,\n onLoad,\n onUnmount,\n}: RectangleProps): null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(null)\n\n const [dblclickListener, setDblclickListener] =\n useState(null)\n const [dragendListener, setDragendListener] =\n useState(null)\n const [dragstartListener, setDragstartListener] =\n useState(null)\n const [mousedownListener, setMousedownListener] =\n useState(null)\n const [mousemoveListener, setMousemoveListener] =\n useState(null)\n const [mouseoutListener, setMouseoutListener] =\n useState(null)\n const [mouseoverListener, setMouseoverListener] =\n useState(null)\n const [mouseupListener, setMouseupListener] =\n useState(null)\n const [rightClickListener, setRightClickListener] =\n useState(null)\n const [clickListener, setClickListener] =\n useState(null)\n const [dragListener, setDragListener] =\n useState(null)\n const [boundsChangedListener, setBoundsChangedListener] =\n useState(null)\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n if (typeof options !== 'undefined' && instance !== null) {\n instance.setOptions(options)\n }\n }, [instance, options])\n\n useEffect(() => {\n if (typeof draggable !== 'undefined' && instance !== null) {\n instance.setDraggable(draggable)\n }\n }, [instance, draggable])\n\n useEffect(() => {\n if (typeof editable !== 'undefined' && instance !== null) {\n instance.setEditable(editable)\n }\n }, [instance, editable])\n\n useEffect(() => {\n if (typeof visible !== 'undefined' && instance !== null) {\n instance.setVisible(visible)\n }\n }, [instance, visible])\n\n useEffect(() => {\n if (typeof bounds !== 'undefined' && instance !== null) {\n instance.setBounds(bounds)\n }\n }, [instance, bounds])\n\n useEffect(() => {\n if (instance && onDblClick) {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n setDblclickListener(\n google.maps.event.addListener(instance, 'dblclick', onDblClick)\n )\n }\n }, [onDblClick])\n\n useEffect(() => {\n if (instance && onDragEnd) {\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n setDragendListener(\n google.maps.event.addListener(instance, 'dragend', onDragEnd)\n )\n }\n }, [onDragEnd])\n\n useEffect(() => {\n if (instance && onDragStart) {\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n setDragstartListener(\n google.maps.event.addListener(instance, 'dragstart', onDragStart)\n )\n }\n }, [onDragStart])\n\n useEffect(() => {\n if (instance && onMouseDown) {\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n setMousedownListener(\n google.maps.event.addListener(instance, 'mousedown', onMouseDown)\n )\n }\n }, [onMouseDown])\n\n useEffect(() => {\n if (instance && onMouseMove) {\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n setMousemoveListener(\n google.maps.event.addListener(instance, 'mousemove', onMouseMove)\n )\n }\n }, [onMouseMove])\n\n useEffect(() => {\n if (instance && onMouseOut) {\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n setMouseoutListener(\n google.maps.event.addListener(instance, 'mouseout', onMouseOut)\n )\n }\n }, [onMouseOut])\n\n useEffect(() => {\n if (instance && onMouseOver) {\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n setMouseoverListener(\n google.maps.event.addListener(instance, 'mouseover', onMouseOver)\n )\n }\n }, [onMouseOver])\n\n useEffect(() => {\n if (instance && onMouseUp) {\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n setMouseupListener(\n google.maps.event.addListener(instance, 'mouseup', onMouseUp)\n )\n }\n }, [onMouseUp])\n\n useEffect(() => {\n if (instance && onRightClick) {\n if (rightClickListener !== null) {\n google.maps.event.removeListener(rightClickListener)\n }\n\n setRightClickListener(\n google.maps.event.addListener(instance, 'rightclick', onRightClick)\n )\n }\n }, [onRightClick])\n\n useEffect(() => {\n if (instance && onClick) {\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n setClickListener(\n google.maps.event.addListener(instance, 'click', onClick)\n )\n }\n }, [onClick])\n\n useEffect(() => {\n if (instance && onDrag) {\n if (dragListener !== null) {\n google.maps.event.removeListener(dragListener)\n }\n\n setDragListener(google.maps.event.addListener(instance, 'drag', onDrag))\n }\n }, [onDrag])\n\n useEffect(() => {\n if (instance && onBoundsChanged) {\n if (boundsChangedListener !== null) {\n google.maps.event.removeListener(boundsChangedListener)\n }\n\n setBoundsChangedListener(\n google.maps.event.addListener(\n instance,\n 'bounds_changed',\n onBoundsChanged\n )\n )\n }\n }, [onBoundsChanged])\n\n useEffect(() => {\n const rectangle = new google.maps.Rectangle({\n ...options,\n map,\n })\n\n if (typeof visible !== 'undefined') {\n rectangle.setVisible(visible)\n }\n\n if (typeof editable !== 'undefined') {\n rectangle.setEditable(editable)\n }\n\n if (typeof draggable !== 'undefined') {\n rectangle.setDraggable(draggable)\n }\n\n if (typeof bounds !== 'undefined') {\n rectangle.setBounds(bounds)\n }\n\n if (onDblClick) {\n setDblclickListener(\n google.maps.event.addListener(rectangle, 'dblclick', onDblClick)\n )\n }\n\n if (onDragEnd) {\n setDragendListener(\n google.maps.event.addListener(rectangle, 'dragend', onDragEnd)\n )\n }\n\n if (onDragStart) {\n setDragstartListener(\n google.maps.event.addListener(rectangle, 'dragstart', onDragStart)\n )\n }\n\n if (onMouseDown) {\n setMousedownListener(\n google.maps.event.addListener(rectangle, 'mousedown', onMouseDown)\n )\n }\n\n if (onMouseMove) {\n setMousemoveListener(\n google.maps.event.addListener(rectangle, 'mousemove', onMouseMove)\n )\n }\n\n if (onMouseOut) {\n setMouseoutListener(\n google.maps.event.addListener(rectangle, 'mouseout', onMouseOut)\n )\n }\n\n if (onMouseOver) {\n setMouseoverListener(\n google.maps.event.addListener(rectangle, 'mouseover', onMouseOver)\n )\n }\n\n if (onMouseUp) {\n setMouseupListener(\n google.maps.event.addListener(rectangle, 'mouseup', onMouseUp)\n )\n }\n\n if (onRightClick) {\n setRightClickListener(\n google.maps.event.addListener(rectangle, 'rightclick', onRightClick)\n )\n }\n\n if (onClick) {\n setClickListener(\n google.maps.event.addListener(rectangle, 'click', onClick)\n )\n }\n\n if (onDrag) {\n setDragListener(google.maps.event.addListener(rectangle, 'drag', onDrag))\n }\n\n if (onBoundsChanged) {\n setBoundsChangedListener(\n google.maps.event.addListener(\n rectangle,\n 'bounds_changed',\n onBoundsChanged\n )\n )\n }\n\n setInstance(rectangle)\n\n if (onLoad) {\n onLoad(rectangle)\n }\n\n return () => {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n if (rightClickListener !== null) {\n google.maps.event.removeListener(rightClickListener)\n }\n\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n if (dragListener !== null) {\n google.maps.event.removeListener(dragListener)\n }\n\n if (boundsChangedListener !== null) {\n google.maps.event.removeListener(boundsChangedListener)\n }\n\n if (onUnmount) {\n onUnmount(rectangle)\n }\n\n rectangle.setMap(null)\n }\n }, [])\n\n return null\n}\n\nexport const RectangleF = memo(RectangleFunctional)\n\nexport class Rectangle extends PureComponent {\n static override contextType = MapContext\n\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n override state: RectangleState = {\n rectangle: null,\n }\n\n setRectangleCallback = (): void => {\n if (this.state.rectangle !== null && this.props.onLoad) {\n this.props.onLoad(this.state.rectangle)\n }\n }\n\n override componentDidMount(): void {\n const rectangle = new google.maps.Rectangle({\n ...this.props.options,\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: rectangle,\n })\n\n this.setState(function setRectangle() {\n return {\n rectangle,\n }\n }, this.setRectangleCallback)\n }\n\n override componentDidUpdate(prevProps: RectangleProps): void {\n if (this.state.rectangle !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.rectangle,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.rectangle !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.rectangle)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.rectangle.setMap(null)\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default Rectangle\n","import {\n memo,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ContextType,\n} from 'react'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onCenterChanged: 'center_changed',\n onRadiusChanged: 'radius_changed',\n onClick: 'click',\n onDblClick: 'dblclick',\n onDrag: 'drag',\n onDragEnd: 'dragend',\n onDragStart: 'dragstart',\n onMouseDown: 'mousedown',\n onMouseMove: 'mousemove',\n onMouseOut: 'mouseout',\n onMouseOver: 'mouseover',\n onMouseUp: 'mouseup',\n onRightClick: 'rightclick',\n}\n\nconst updaterMap = {\n center(instance: google.maps.Circle, center: google.maps.LatLng): void {\n instance.setCenter(center)\n },\n draggable(instance: google.maps.Circle, draggable: boolean): void {\n instance.setDraggable(draggable)\n },\n editable(instance: google.maps.Circle, editable: boolean): void {\n instance.setEditable(editable)\n },\n map(instance: google.maps.Circle, map: google.maps.Map): void {\n instance.setMap(map)\n },\n options(\n instance: google.maps.Circle,\n options: google.maps.CircleOptions\n ): void {\n instance.setOptions(options)\n },\n radius(instance: google.maps.Circle, radius: number): void {\n instance.setRadius(radius)\n },\n visible(instance: google.maps.Circle, visible: boolean): void {\n instance.setVisible(visible)\n },\n}\n\ntype CircleState = {\n circle: google.maps.Circle | null\n}\n\nexport type CircleProps = {\n options?: google.maps.CircleOptions | undefined\n\n /** sets the center of the circle */\n center?: google.maps.LatLng | google.maps.LatLngLiteral | undefined\n\n // required\n /** Sets the radius of this circle (in meters) */\n radius?: number | undefined\n /** If set to true, the user can drag this circle over the map */\n draggable?: boolean | undefined\n /** If set to true, the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle. */\n editable?: boolean | undefined\n /** Hides this circle if set to false. */\n visible?: boolean | undefined\n /** This event is fired when the DOM dblclick event is fired on the circle. */\n onDblClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user stops dragging the circle. */\n onDragEnd?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the user starts dragging the circle. */\n onDragStart?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mousedown event is fired on the circle. */\n onMouseDown?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mousemove event is fired on the circle. */\n onMouseMove?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired on circle mouseout. */\n onMouseOut?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired on circle mouseover. */\n onMouseOver?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM mouseup event is fired on the circle. */\n onMouseUp?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the circle is right-clicked on. */\n onRightClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM click event is fired on the circle. */\n onClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is repeatedly fired while the user drags the circle. */\n onDrag?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the circle's center is changed. */\n onCenterChanged?: (() => void) | undefined\n /** This event is fired when the circle's radius is changed. */\n onRadiusChanged?: (() => void) | undefined\n /** This callback is called when the circle instance has loaded. It is called with the circle instance. */\n onLoad?: ((circle: google.maps.Circle) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the circle instance. */\n onUnmount?: ((circle: google.maps.Circle) => void) | undefined\n}\n\nconst defaultOptions = {}\n\nfunction CircleFunctional({\n options,\n center,\n radius,\n draggable,\n editable,\n visible,\n onDblClick,\n onDragEnd,\n onDragStart,\n onMouseDown,\n onMouseMove,\n onMouseOut,\n onMouseOver,\n onMouseUp,\n onRightClick,\n onClick,\n onDrag,\n onCenterChanged,\n onRadiusChanged,\n onLoad,\n onUnmount,\n}: CircleProps): null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(null)\n\n const [dblclickListener, setDblclickListener] =\n useState(null)\n const [dragendListener, setDragendListener] =\n useState(null)\n const [dragstartListener, setDragstartListener] =\n useState(null)\n const [mousedownListener, setMousedownListener] =\n useState(null)\n const [mousemoveListener, setMousemoveListener] =\n useState(null)\n const [mouseoutListener, setMouseoutListener] =\n useState(null)\n const [mouseoverListener, setMouseoverListener] =\n useState(null)\n const [mouseupListener, setMouseupListener] =\n useState(null)\n const [rightclickListener, setRightclickListener] =\n useState(null)\n const [clickListener, setClickListener] =\n useState(null)\n const [dragListener, setDragListener] =\n useState(null)\n const [centerChangedListener, setCenterChangedListener] =\n useState(null)\n const [radiusChangedListener, setRadiusChangedListener] =\n useState(null)\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n if (typeof options !== 'undefined' && instance !== null) {\n instance.setOptions(options)\n }\n }, [instance, options])\n\n useEffect(() => {\n if (typeof draggable !== 'undefined' && instance !== null) {\n instance.setDraggable(draggable)\n }\n }, [instance, draggable])\n\n useEffect(() => {\n if (typeof editable !== 'undefined' && instance !== null) {\n instance.setEditable(editable)\n }\n }, [instance, editable])\n\n useEffect(() => {\n if (typeof visible !== 'undefined' && instance !== null) {\n instance.setVisible(visible)\n }\n }, [instance, visible])\n\n useEffect(() => {\n if (typeof radius === 'number' && instance !== null) {\n instance.setRadius(radius)\n }\n }, [instance, radius])\n\n useEffect(() => {\n if (typeof center !== 'undefined' && instance !== null) {\n instance.setCenter(center)\n }\n }, [instance, center])\n\n useEffect(() => {\n if (instance && onDblClick) {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n setDblclickListener(\n google.maps.event.addListener(instance, 'dblclick', onDblClick)\n )\n }\n }, [onDblClick])\n\n useEffect(() => {\n if (instance && onDragEnd) {\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n setDragendListener(\n google.maps.event.addListener(instance, 'dragend', onDragEnd)\n )\n }\n }, [onDragEnd])\n\n useEffect(() => {\n if (instance && onDragStart) {\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n setDragstartListener(\n google.maps.event.addListener(instance, 'dragstart', onDragStart)\n )\n }\n }, [onDragStart])\n\n useEffect(() => {\n if (instance && onMouseDown) {\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n setMousedownListener(\n google.maps.event.addListener(instance, 'mousedown', onMouseDown)\n )\n }\n }, [onMouseDown])\n\n useEffect(() => {\n if (instance && onMouseMove) {\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n setMousemoveListener(\n google.maps.event.addListener(instance, 'mousemove', onMouseMove)\n )\n }\n }, [onMouseMove])\n\n useEffect(() => {\n if (instance && onMouseOut) {\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n setMouseoutListener(\n google.maps.event.addListener(instance, 'mouseout', onMouseOut)\n )\n }\n }, [onMouseOut])\n\n useEffect(() => {\n if (instance && onMouseOver) {\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n setMouseoverListener(\n google.maps.event.addListener(instance, 'mouseover', onMouseOver)\n )\n }\n }, [onMouseOver])\n\n useEffect(() => {\n if (instance && onMouseUp) {\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n setMouseupListener(\n google.maps.event.addListener(instance, 'mouseup', onMouseUp)\n )\n }\n }, [onMouseUp])\n\n useEffect(() => {\n if (instance && onRightClick) {\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n setRightclickListener(\n google.maps.event.addListener(instance, 'rightclick', onRightClick)\n )\n }\n }, [onRightClick])\n\n useEffect(() => {\n if (instance && onClick) {\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n setClickListener(\n google.maps.event.addListener(instance, 'click', onClick)\n )\n }\n }, [onClick])\n\n useEffect(() => {\n if (instance && onDrag) {\n if (dragListener !== null) {\n google.maps.event.removeListener(dragListener)\n }\n\n setDragListener(google.maps.event.addListener(instance, 'drag', onDrag))\n }\n }, [onDrag])\n\n useEffect(() => {\n if (instance && onCenterChanged) {\n if (centerChangedListener !== null) {\n google.maps.event.removeListener(centerChangedListener)\n }\n\n setCenterChangedListener(\n google.maps.event.addListener(\n instance,\n 'center_changed',\n onCenterChanged\n )\n )\n }\n }, [onClick])\n\n useEffect(() => {\n if (instance && onRadiusChanged) {\n if (radiusChangedListener !== null) {\n google.maps.event.removeListener(radiusChangedListener)\n }\n\n setRadiusChangedListener(\n google.maps.event.addListener(\n instance,\n 'radius_changed',\n onRadiusChanged\n )\n )\n }\n }, [onRadiusChanged])\n\n useEffect(() => {\n const circle = new google.maps.Circle({\n ...(options || defaultOptions),\n map,\n })\n\n if (typeof radius === 'number') {\n circle.setRadius(radius)\n }\n\n if (typeof center !== 'undefined') {\n circle.setCenter(center)\n }\n\n if (typeof radius === 'number') {\n circle.setRadius(radius)\n }\n\n if (typeof visible !== 'undefined') {\n circle.setVisible(visible)\n }\n\n if (typeof editable !== 'undefined') {\n circle.setEditable(editable)\n }\n\n if (typeof draggable !== 'undefined') {\n circle.setDraggable(draggable)\n }\n\n if (onDblClick) {\n setDblclickListener(\n google.maps.event.addListener(circle, 'dblclick', onDblClick)\n )\n }\n\n if (onDragEnd) {\n setDragendListener(\n google.maps.event.addListener(circle, 'dragend', onDragEnd)\n )\n }\n\n if (onDragStart) {\n setDragstartListener(\n google.maps.event.addListener(circle, 'dragstart', onDragStart)\n )\n }\n\n if (onMouseDown) {\n setMousedownListener(\n google.maps.event.addListener(circle, 'mousedown', onMouseDown)\n )\n }\n\n if (onMouseMove) {\n setMousemoveListener(\n google.maps.event.addListener(circle, 'mousemove', onMouseMove)\n )\n }\n\n if (onMouseOut) {\n setMouseoutListener(\n google.maps.event.addListener(circle, 'mouseout', onMouseOut)\n )\n }\n\n if (onMouseOver) {\n setMouseoverListener(\n google.maps.event.addListener(circle, 'mouseover', onMouseOver)\n )\n }\n\n if (onMouseUp) {\n setMouseupListener(\n google.maps.event.addListener(circle, 'mouseup', onMouseUp)\n )\n }\n\n if (onRightClick) {\n setRightclickListener(\n google.maps.event.addListener(circle, 'rightclick', onRightClick)\n )\n }\n\n if (onClick) {\n setClickListener(google.maps.event.addListener(circle, 'click', onClick))\n }\n\n if (onDrag) {\n setDragListener(google.maps.event.addListener(circle, 'drag', onDrag))\n }\n\n if (onCenterChanged) {\n setCenterChangedListener(\n google.maps.event.addListener(circle, 'center_changed', onCenterChanged)\n )\n }\n\n if (onRadiusChanged) {\n setRadiusChangedListener(\n google.maps.event.addListener(circle, 'radius_changed', onRadiusChanged)\n )\n }\n\n setInstance(circle)\n\n if (onLoad) {\n onLoad(circle)\n }\n\n return () => {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n if (dragendListener !== null) {\n google.maps.event.removeListener(dragendListener)\n }\n\n if (dragstartListener !== null) {\n google.maps.event.removeListener(dragstartListener)\n }\n\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n if (centerChangedListener !== null) {\n google.maps.event.removeListener(centerChangedListener)\n }\n\n if (radiusChangedListener !== null) {\n google.maps.event.removeListener(radiusChangedListener)\n }\n\n if (onUnmount) {\n onUnmount(circle)\n }\n\n circle.setMap(null)\n }\n }, [])\n\n return null\n}\n\nexport const CircleF = memo(CircleFunctional)\n\nexport class Circle extends PureComponent {\n static override contextType = MapContext\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n override state: CircleState = {\n circle: null,\n }\n\n setCircleCallback = (): void => {\n if (this.state.circle !== null && this.props.onLoad) {\n this.props.onLoad(this.state.circle)\n }\n }\n\n override componentDidMount(): void {\n const circle = new google.maps.Circle({\n ...this.props.options,\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: circle,\n })\n\n this.setState(function setCircle() {\n return {\n circle,\n }\n }, this.setCircleCallback)\n }\n\n override componentDidUpdate(prevProps: CircleProps): void {\n if (this.state.circle !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.circle,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.circle !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.circle)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.circle?.setMap(null)\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default Circle\n","import {\n memo,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ContextType,\n} from 'react'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onClick: 'click',\n onDblClick: 'dblclick',\n onMouseDown: 'mousedown',\n onMouseOut: 'mouseout',\n onMouseOver: 'mouseover',\n onMouseUp: 'mouseup',\n onRightClick: 'rightclick',\n onAddFeature: 'addfeature',\n onRemoveFeature: 'removefeature',\n onRemoveProperty: 'removeproperty',\n onSetGeometry: 'setgeometry',\n onSetProperty: 'setproperty',\n}\n\nconst updaterMap = {\n add(\n instance: google.maps.Data,\n feature: google.maps.Data.Feature | google.maps.Data.FeatureOptions\n ): void {\n instance.add(feature)\n },\n addgeojson(\n instance: google.maps.Data,\n geojson: object,\n options?: google.maps.Data.GeoJsonOptions | undefined\n ): void {\n instance.addGeoJson(geojson, options)\n },\n contains(\n instance: google.maps.Data,\n feature: google.maps.Data.Feature\n ): void {\n instance.contains(feature)\n },\n foreach(\n instance: google.maps.Data,\n callback: (feature: google.maps.Data.Feature) => void\n ): void {\n instance.forEach(callback)\n },\n loadgeojson(\n instance: google.maps.Data,\n url: string,\n options: google.maps.Data.GeoJsonOptions,\n callback: (features: google.maps.Data.Feature[]) => void\n ): void {\n instance.loadGeoJson(url, options, callback)\n },\n overridestyle(\n instance: google.maps.Data,\n feature: google.maps.Data.Feature,\n style: google.maps.Data.StyleOptions\n ): void {\n instance.overrideStyle(feature, style)\n },\n remove(instance: google.maps.Data, feature: google.maps.Data.Feature): void {\n instance.remove(feature)\n },\n revertstyle(\n instance: google.maps.Data,\n feature: google.maps.Data.Feature\n ): void {\n instance.revertStyle(feature)\n },\n controlposition(\n instance: google.maps.Data,\n controlPosition: google.maps.ControlPosition\n ): void {\n instance.setControlPosition(controlPosition)\n },\n controls(instance: google.maps.Data, controls: string[] | null): void {\n instance.setControls(controls)\n },\n drawingmode(instance: google.maps.Data, mode: string | null): void {\n instance.setDrawingMode(mode)\n },\n map(instance: google.maps.Data, map: google.maps.Map): void {\n instance.setMap(map)\n },\n style(\n instance: google.maps.Data,\n style: google.maps.Data.StylingFunction | google.maps.Data.StyleOptions\n ): void {\n instance.setStyle(style)\n },\n togeojson(\n instance: google.maps.Data,\n callback: (feature: object) => void\n ): void {\n instance.toGeoJson(callback)\n },\n}\n\ntype DataState = {\n data: google.maps.Data | null\n}\n\nexport type DataProps = {\n options?: google.maps.Data.DataOptions | undefined\n /** This event is fired for a click on the geometry. */\n onClick?: ((e: google.maps.Data.MouseEvent) => void) | undefined\n /** This event is fired for a double click on the geometry. */\n onDblClick?: ((e: google.maps.Data.MouseEvent) => void) | undefined\n /** This event is fired for a mousedown on the geometry. */\n onMouseDown?: ((e: google.maps.Data.MouseEvent) => void) | undefined\n /** This event is fired when the DOM mousemove event is fired on the rectangle. */\n onMouseMove?: ((e: google.maps.Data.MouseEvent) => void) | undefined\n /** This event is fired when the mouse leaves the area of the geometry. */\n onMouseOut?: ((e: google.maps.Data.MouseEvent) => void) | undefined\n /** This event is fired when the mouse enters the area of the geometry. */\n onMouseOver?: ((e: google.maps.Data.MouseEvent) => void) | undefined\n /** This event is fired for a mouseup on the geometry. */\n onMouseUp?: ((e: google.maps.Data.MouseEvent) => void) | undefined\n /** This event is fired for a rightclick on the geometry. */\n onRightClick?: ((e: google.maps.Data.MouseEvent) => void) | undefined\n /** This event is fired when a feature is added to the collection. */\n onAddFeature?: ((e: google.maps.Data.AddFeatureEvent) => void) | undefined\n /** This event is fired when a feature is removed from the collection. */\n onRemoveFeature?:\n | ((e: google.maps.Data.RemoveFeatureEvent) => void)\n | undefined\n /** This event is fired when a feature's property is removed. */\n onRemoveProperty?:\n | ((e: google.maps.Data.RemovePropertyEvent) => void)\n | undefined\n /** This event is fired when a feature's geometry is set. */\n onSetGeometry?: ((e: google.maps.Data.SetGeometryEvent) => void) | undefined\n /** This event is fired when a feature's property is set. */\n onSetProperty?: ((e: google.maps.Data.SetPropertyEvent) => void) | undefined\n /** This callback is called when the data instance has loaded. It is called with the data instance. */\n onLoad?: ((data: google.maps.Data) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the data instance. */\n onUnmount?: ((data: google.maps.Data) => void) | undefined\n}\n\nfunction DataFunctional({\n options,\n onClick,\n onDblClick,\n onMouseDown,\n onMouseMove,\n onMouseOut,\n onMouseOver,\n onMouseUp,\n onRightClick,\n onAddFeature,\n onRemoveFeature,\n onRemoveProperty,\n onSetGeometry,\n onSetProperty,\n onLoad,\n onUnmount,\n}: DataProps): null {\n const map = useContext(MapContext)\n\n const [instance, setInstance] = useState(null)\n\n const [dblclickListener, setDblclickListener] =\n useState(null)\n const [mousedownListener, setMousedownListener] =\n useState(null)\n const [mousemoveListener, setMousemoveListener] =\n useState(null)\n const [mouseoutListener, setMouseoutListener] =\n useState(null)\n const [mouseoverListener, setMouseoverListener] =\n useState(null)\n const [mouseupListener, setMouseupListener] =\n useState(null)\n const [rightclickListener, setRightclickListener] =\n useState(null)\n const [clickListener, setClickListener] =\n useState(null)\n\n const [addFeatureListener, setAddFeatureListener] =\n useState(null)\n const [removeFeatureListener, setRemoveFeatureListener] =\n useState(null)\n const [removePropertyListener, setRemovePropertyListener] =\n useState(null)\n const [setGeometryListener, setSetGeometryListener] =\n useState(null)\n const [setPropertyListener, setSetPropertyListener] =\n useState(null)\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n if (instance && onDblClick) {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n setDblclickListener(\n google.maps.event.addListener(instance, 'dblclick', onDblClick)\n )\n }\n }, [onDblClick])\n\n useEffect(() => {\n if (instance && onMouseDown) {\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n setMousedownListener(\n google.maps.event.addListener(instance, 'mousedown', onMouseDown)\n )\n }\n }, [onMouseDown])\n\n useEffect(() => {\n if (instance && onMouseMove) {\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n setMousemoveListener(\n google.maps.event.addListener(instance, 'mousemove', onMouseMove)\n )\n }\n }, [onMouseMove])\n\n useEffect(() => {\n if (instance && onMouseOut) {\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n setMouseoutListener(\n google.maps.event.addListener(instance, 'mouseout', onMouseOut)\n )\n }\n }, [onMouseOut])\n\n useEffect(() => {\n if (instance && onMouseOver) {\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n setMouseoverListener(\n google.maps.event.addListener(instance, 'mouseover', onMouseOver)\n )\n }\n }, [onMouseOver])\n\n useEffect(() => {\n if (instance && onMouseUp) {\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n setMouseupListener(\n google.maps.event.addListener(instance, 'mouseup', onMouseUp)\n )\n }\n }, [onMouseUp])\n\n useEffect(() => {\n if (instance && onRightClick) {\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n setRightclickListener(\n google.maps.event.addListener(instance, 'rightclick', onRightClick)\n )\n }\n }, [onRightClick])\n\n useEffect(() => {\n if (instance && onClick) {\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n setClickListener(\n google.maps.event.addListener(instance, 'click', onClick)\n )\n }\n }, [onClick])\n\n useEffect(() => {\n if (instance && onAddFeature) {\n if (addFeatureListener !== null) {\n google.maps.event.removeListener(addFeatureListener)\n }\n\n setAddFeatureListener(\n google.maps.event.addListener(instance, 'addfeature', onAddFeature)\n )\n }\n }, [onAddFeature])\n\n useEffect(() => {\n if (instance && onRemoveFeature) {\n if (removeFeatureListener !== null) {\n google.maps.event.removeListener(removeFeatureListener)\n }\n\n setRemoveFeatureListener(\n google.maps.event.addListener(\n instance,\n 'removefeature',\n onRemoveFeature\n )\n )\n }\n }, [onRemoveFeature])\n\n useEffect(() => {\n if (instance && onRemoveProperty) {\n if (removePropertyListener !== null) {\n google.maps.event.removeListener(removePropertyListener)\n }\n\n setRemovePropertyListener(\n google.maps.event.addListener(\n instance,\n 'removeproperty',\n onRemoveProperty\n )\n )\n }\n }, [onRemoveProperty])\n\n useEffect(() => {\n if (instance && onSetGeometry) {\n if (setGeometryListener !== null) {\n google.maps.event.removeListener(setGeometryListener)\n }\n\n setSetGeometryListener(\n google.maps.event.addListener(instance, 'setgeometry', onSetGeometry)\n )\n }\n }, [onSetGeometry])\n\n useEffect(() => {\n if (instance && onSetProperty) {\n if (setPropertyListener !== null) {\n google.maps.event.removeListener(setPropertyListener)\n }\n\n setSetPropertyListener(\n google.maps.event.addListener(instance, 'setproperty', onSetProperty)\n )\n }\n }, [onSetProperty])\n\n useEffect(() => {\n if (map !== null) {\n const data = new google.maps.Data({\n ...options,\n map,\n })\n\n if (onDblClick) {\n setDblclickListener(\n google.maps.event.addListener(data, 'dblclick', onDblClick)\n )\n }\n\n if (onMouseDown) {\n setMousedownListener(\n google.maps.event.addListener(data, 'mousedown', onMouseDown)\n )\n }\n\n if (onMouseMove) {\n setMousemoveListener(\n google.maps.event.addListener(data, 'mousemove', onMouseMove)\n )\n }\n\n if (onMouseOut) {\n setMouseoutListener(\n google.maps.event.addListener(data, 'mouseout', onMouseOut)\n )\n }\n\n if (onMouseOver) {\n setMouseoverListener(\n google.maps.event.addListener(data, 'mouseover', onMouseOver)\n )\n }\n\n if (onMouseUp) {\n setMouseupListener(\n google.maps.event.addListener(data, 'mouseup', onMouseUp)\n )\n }\n\n if (onRightClick) {\n setRightclickListener(\n google.maps.event.addListener(data, 'rightclick', onRightClick)\n )\n }\n\n if (onClick) {\n setClickListener(google.maps.event.addListener(data, 'click', onClick))\n }\n\n if (onAddFeature) {\n setAddFeatureListener(\n google.maps.event.addListener(data, 'addfeature', onAddFeature)\n )\n }\n\n if (onRemoveFeature) {\n setRemoveFeatureListener(\n google.maps.event.addListener(data, 'removefeature', onRemoveFeature)\n )\n }\n\n if (onRemoveProperty) {\n setRemovePropertyListener(\n google.maps.event.addListener(\n data,\n 'removeproperty',\n onRemoveProperty\n )\n )\n }\n\n if (onSetGeometry) {\n setSetGeometryListener(\n google.maps.event.addListener(data, 'setgeometry', onSetGeometry)\n )\n }\n\n if (onSetProperty) {\n setSetPropertyListener(\n google.maps.event.addListener(data, 'setproperty', onSetProperty)\n )\n }\n\n setInstance(data)\n\n if (onLoad) {\n onLoad(data)\n }\n }\n\n return () => {\n if (instance) {\n if (dblclickListener !== null) {\n google.maps.event.removeListener(dblclickListener)\n }\n\n if (mousedownListener !== null) {\n google.maps.event.removeListener(mousedownListener)\n }\n\n if (mousemoveListener !== null) {\n google.maps.event.removeListener(mousemoveListener)\n }\n\n if (mouseoutListener !== null) {\n google.maps.event.removeListener(mouseoutListener)\n }\n\n if (mouseoverListener !== null) {\n google.maps.event.removeListener(mouseoverListener)\n }\n\n if (mouseupListener !== null) {\n google.maps.event.removeListener(mouseupListener)\n }\n\n if (rightclickListener !== null) {\n google.maps.event.removeListener(rightclickListener)\n }\n\n if (clickListener !== null) {\n google.maps.event.removeListener(clickListener)\n }\n\n if (addFeatureListener !== null) {\n google.maps.event.removeListener(addFeatureListener)\n }\n\n if (removeFeatureListener !== null) {\n google.maps.event.removeListener(removeFeatureListener)\n }\n\n if (removePropertyListener !== null) {\n google.maps.event.removeListener(removePropertyListener)\n }\n\n if (setGeometryListener !== null) {\n google.maps.event.removeListener(setGeometryListener)\n }\n\n if (setPropertyListener !== null) {\n google.maps.event.removeListener(setPropertyListener)\n }\n\n if (onUnmount) {\n onUnmount(instance)\n }\n\n instance.setMap(null)\n }\n }\n }, [])\n\n return null\n}\n\nexport const DataF = memo(DataFunctional)\n\nexport class Data extends PureComponent {\n static override contextType = MapContext\n\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n override state: DataState = {\n data: null,\n }\n\n setDataCallback = (): void => {\n if (this.state.data !== null && this.props.onLoad) {\n this.props.onLoad(this.state.data)\n }\n }\n\n override componentDidMount(): void {\n if (this.context !== null) {\n const data = new google.maps.Data({\n ...this.props.options,\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: data,\n })\n\n this.setState(() => {\n return {\n data,\n }\n }, this.setDataCallback)\n }\n }\n\n override componentDidUpdate(prevProps: DataProps): void {\n if (this.state.data !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.data,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.data !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.data)\n }\n\n unregisterEvents(this.registeredEvents)\n\n if (this.state.data) {\n this.state.data.setMap(null)\n }\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default Data\n","import { type ContextType, PureComponent } from 'react'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onClick: 'click',\n onDefaultViewportChanged: 'defaultviewport_changed',\n onStatusChanged: 'status_changed',\n}\n\nconst updaterMap = {\n options(\n instance: google.maps.KmlLayer,\n options: google.maps.KmlLayerOptions\n ): void {\n instance.setOptions(options)\n },\n url(instance: google.maps.KmlLayer, url: string): void {\n instance.setUrl(url)\n },\n zIndex(instance: google.maps.KmlLayer, zIndex: number): void {\n instance.setZIndex(zIndex)\n },\n}\n\ntype KmlLayerState = {\n kmlLayer: google.maps.KmlLayer | null\n}\n\nexport type KmlLayerProps = {\n options?: google.maps.KmlLayerOptions | undefined\n /** The URL of the KML document to display. */\n url?: string | undefined\n /** The z-index of the layer. */\n zIndex?: number | undefined\n /** This event is fired when a feature in the layer is clicked. */\n onClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the KML layers default viewport has changed. */\n onDefaultViewportChanged?: (() => void) | undefined | undefined\n /** This event is fired when the KML layer has finished loading. At this point it is safe to read the status property to determine if the layer loaded successfully. */\n onStatusChanged?: (() => void) | undefined | undefined\n /** This callback is called when the kmlLayer instance has loaded. It is called with the kmlLayer instance. */\n onLoad?: ((kmlLayer: google.maps.KmlLayer) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the kmlLayer instance. */\n onUnmount?: ((kmlLayer: google.maps.KmlLayer) => void) | undefined\n}\n\nexport class KmlLayer extends PureComponent {\n static override contextType = MapContext\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n override state: KmlLayerState = {\n kmlLayer: null,\n }\n\n setKmlLayerCallback = (): void => {\n if (this.state.kmlLayer !== null && this.props.onLoad) {\n this.props.onLoad(this.state.kmlLayer)\n }\n }\n\n override componentDidMount(): void {\n const kmlLayer = new google.maps.KmlLayer({\n ...this.props.options,\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: kmlLayer,\n })\n\n this.setState(function setLmlLayer() {\n return {\n kmlLayer,\n }\n }, this.setKmlLayerCallback)\n }\n\n override componentDidUpdate(prevProps: KmlLayerProps): void {\n if (this.state.kmlLayer !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.kmlLayer,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.kmlLayer !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.kmlLayer)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.kmlLayer.setMap(null)\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default KmlLayer\n","import type { PositionDrawProps } from \"../../types\"\n\nexport function getOffsetOverride(\n containerElement: HTMLElement,\n getPixelPositionOffset?:( (offsetWidth: number, offsetHeight: number) => { x: number; y: number }) | undefined\n): { x: number; y: number } {\n return typeof getPixelPositionOffset === 'function'\n ? getPixelPositionOffset(containerElement.offsetWidth, containerElement.offsetHeight)\n : {\n x: 0,\n y: 0,\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction createLatLng(inst: any, Type: any): any { return new Type(inst.lat, inst.lng) }\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction createLatLngBounds(inst: any, Type: any): any {\n return new Type(\n new google.maps.LatLng(inst.ne.lat, inst.ne.lng),\n new google.maps.LatLng(inst.sw.lat, inst.sw.lng)\n )\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction ensureOfType(\n inst: google.maps.LatLng | google.maps.LatLngLiteral | undefined,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n type: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n factory: (inst: google.maps.LatLng | google.maps.LatLngLiteral | undefined, type: any) => any\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\n): any {\n return inst instanceof type ? inst : factory(inst, type)\n}\n\nfunction ensureOfTypeBounds(\n inst: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n type: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n factory: (inst: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral, type: any) => any\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\n): any {\n return inst instanceof type ? inst : factory(inst, type)\n}\n\nfunction getLayoutStylesByBounds(\n mapCanvasProjection: google.maps.MapCanvasProjection,\n offset: { x: number; y: number },\n bounds: google.maps.LatLngBounds\n): { left: string; top: string; width: string; height: string } | { left: string; top: string } {\n const ne = mapCanvasProjection && mapCanvasProjection.fromLatLngToDivPixel(bounds.getNorthEast())\n\n const sw = mapCanvasProjection && mapCanvasProjection.fromLatLngToDivPixel(bounds.getSouthWest())\n\n if (ne && sw) {\n return {\n left: `${sw.x + offset.x}px`,\n top: `${ne.y + offset.y}px`,\n width: `${ne.x - sw.x - offset.x}px`,\n height: `${sw.y - ne.y - offset.y}px`,\n }\n }\n\n return {\n left: '-9999px',\n top: '-9999px',\n }\n}\n\nfunction getLayoutStylesByPosition (\n mapCanvasProjection: google.maps.MapCanvasProjection,\n offset: { x: number; y: number },\n position: google.maps.LatLng\n): { left: string; top: string } {\n const point = mapCanvasProjection && mapCanvasProjection.fromLatLngToDivPixel(position)\n\n if (point) {\n const { x, y } = point\n\n return {\n left: `${x + offset.x}px`,\n top: `${y + offset.y}px`,\n }\n }\n\n return {\n left: '-9999px',\n top: '-9999px',\n }\n}\n\nexport function getLayoutStyles (\n mapCanvasProjection: google.maps.MapCanvasProjection,\n offset: { x: number; y: number },\n bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral | undefined,\n position?: google.maps.LatLng | google.maps.LatLngLiteral | undefined\n): PositionDrawProps {\n return bounds !== undefined\n ? getLayoutStylesByBounds(\n mapCanvasProjection,\n offset,\n ensureOfTypeBounds(bounds, google.maps.LatLngBounds, createLatLngBounds)\n )\n : getLayoutStylesByPosition(\n mapCanvasProjection,\n offset,\n ensureOfType(position, google.maps.LatLng, createLatLng)\n )\n}\n\nexport function arePositionsEqual (\n currentPosition: PositionDrawProps,\n previousPosition: PositionDrawProps\n): boolean {\n return currentPosition.left === previousPosition.left\n && currentPosition.top === previousPosition.top\n && currentPosition.width === previousPosition.height\n && currentPosition.height === previousPosition.height;\n}\n","import {\n memo,\n useMemo,\n Children,\n createRef,\n useEffect,\n useContext,\n PureComponent,\n type ReactNode,\n type RefObject,\n type ContextType,\n type ReactPortal,\n type CSSProperties,\n} from 'react'\nimport invariant from 'invariant'\nimport * as ReactDOM from 'react-dom'\n\nimport MapContext from '../../map-context.js'\n\nimport {\n getLayoutStyles,\n arePositionsEqual,\n getOffsetOverride,\n} from './dom-helper.js'\n\nimport { createOverlay } from './Overlay.js'\n\ntype OverlayViewState = {\n paneEl: Element | null\n containerStyle: CSSProperties\n}\n\nfunction convertToLatLngString(\n latLngLike?: google.maps.LatLng | google.maps.LatLngLiteral | null | undefined\n) {\n if (!latLngLike) {\n return ''\n }\n\n const latLng =\n latLngLike instanceof google.maps.LatLng\n ? latLngLike\n : new google.maps.LatLng(latLngLike.lat, latLngLike.lng)\n\n return latLng + ''\n}\n\nfunction convertToLatLngBoundsString(\n latLngBoundsLike?:\n | google.maps.LatLngBounds\n | google.maps.LatLngBoundsLiteral\n | null\n | undefined\n) {\n if (!latLngBoundsLike) {\n return ''\n }\n\n const latLngBounds =\n latLngBoundsLike instanceof google.maps.LatLngBounds\n ? latLngBoundsLike\n : new google.maps.LatLngBounds(\n new google.maps.LatLng(latLngBoundsLike.south, latLngBoundsLike.east),\n new google.maps.LatLng(latLngBoundsLike.north, latLngBoundsLike.west)\n )\n\n return latLngBounds + ''\n}\n\nexport type PaneNames = keyof google.maps.MapPanes\n\nexport type OverlayViewProps = {\n children?: ReactNode | undefined\n // required\n mapPaneName: PaneNames\n position?: google.maps.LatLng | google.maps.LatLngLiteral | undefined\n getPixelPositionOffset?:\n | ((offsetWidth: number, offsetHeight: number) => { x: number; y: number })\n | undefined\n bounds?:\n | google.maps.LatLngBounds\n | google.maps.LatLngBoundsLiteral\n | undefined\n zIndex?: number | undefined\n onLoad?: ((overlayView: google.maps.OverlayView) => void) | undefined\n onUnmount?: ((overlayView: google.maps.OverlayView) => void) | undefined\n}\n\nexport const FLOAT_PANE: PaneNames = `floatPane`\nexport const MAP_PANE: PaneNames = `mapPane`\nexport const MARKER_LAYER: PaneNames = `markerLayer`\nexport const OVERLAY_LAYER: PaneNames = `overlayLayer`\nexport const OVERLAY_MOUSE_TARGET: PaneNames = `overlayMouseTarget`\n\nfunction OverlayViewFunctional({\n position,\n bounds,\n mapPaneName,\n zIndex,\n onLoad,\n onUnmount,\n getPixelPositionOffset,\n children,\n}: OverlayViewProps) {\n const map = useContext(MapContext)\n const container = useMemo(() => {\n const div = document.createElement('div')\n div.style.position = 'absolute'\n return div\n }, [])\n\n const overlay = useMemo(() => {\n return createOverlay(\n container,\n mapPaneName,\n position,\n bounds,\n getPixelPositionOffset\n )\n }, [container, mapPaneName, position, bounds])\n\n useEffect(() => {\n onLoad?.(overlay)\n overlay?.setMap(map)\n return () => {\n onUnmount?.(overlay)\n overlay?.setMap(null)\n }\n }, [map, overlay])\n\n // to move the container to the foreground and background\n useEffect(() => {\n container.style.zIndex = `${zIndex}`\n }, [zIndex, container])\n\n return ReactDOM.createPortal(children, container)\n}\n\nexport const OverlayViewF = memo(OverlayViewFunctional)\n\nexport class OverlayView extends PureComponent<\n OverlayViewProps,\n OverlayViewState\n> {\n static FLOAT_PANE: PaneNames = `floatPane`\n static MAP_PANE: PaneNames = `mapPane`\n static MARKER_LAYER: PaneNames = `markerLayer`\n static OVERLAY_LAYER: PaneNames = `overlayLayer`\n static OVERLAY_MOUSE_TARGET: PaneNames = `overlayMouseTarget`\n\n static override contextType = MapContext\n\n declare context: ContextType\n\n override state: OverlayViewState = {\n paneEl: null,\n containerStyle: {\n // set initial position\n position: 'absolute',\n },\n }\n\n overlayView: google.maps.OverlayView\n containerRef: RefObject\n\n updatePane = (): void => {\n const mapPaneName = this.props.mapPaneName\n\n // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes\n const mapPanes = this.overlayView.getPanes()\n invariant(\n !!mapPaneName,\n `OverlayView requires props.mapPaneName but got %s`,\n mapPaneName\n )\n\n if (mapPanes) {\n this.setState({\n paneEl: mapPanes[mapPaneName],\n })\n } else {\n this.setState({\n paneEl: null,\n })\n }\n }\n\n onAdd = (): void => {\n this.updatePane()\n this.props.onLoad?.(this.overlayView)\n }\n\n onPositionElement = (): void => {\n const mapCanvasProjection = this.overlayView.getProjection()\n\n const offset = {\n x: 0,\n y: 0,\n ...(this.containerRef.current\n ? getOffsetOverride(\n this.containerRef.current,\n this.props.getPixelPositionOffset\n )\n : {}),\n }\n\n const layoutStyles = getLayoutStyles(\n mapCanvasProjection,\n offset,\n this.props.bounds,\n this.props.position\n )\n\n if (\n !arePositionsEqual(layoutStyles, {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n left: this.state.containerStyle.left,\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n top: this.state.containerStyle.top,\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n width: this.state.containerStyle.width,\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n height: this.state.containerStyle.height,\n })\n ) {\n this.setState({\n containerStyle: {\n top: layoutStyles.top ?? 0,\n left: layoutStyles.left ?? 0,\n width: layoutStyles.width ?? 0,\n height: layoutStyles.height ?? 0,\n position: 'absolute',\n },\n })\n }\n }\n\n draw = (): void => {\n this.onPositionElement()\n }\n\n onRemove = (): void => {\n this.setState(() => ({\n paneEl: null,\n }))\n\n this.props.onUnmount?.(this.overlayView)\n }\n\n constructor(props: OverlayViewProps) {\n super(props)\n\n this.containerRef = createRef()\n // You must implement three methods: onAdd(), draw(), and onRemove().\n const overlayView = new google.maps.OverlayView()\n overlayView.onAdd = this.onAdd\n overlayView.draw = this.draw\n overlayView.onRemove = this.onRemove\n this.overlayView = overlayView\n }\n\n override componentDidMount(): void {\n this.overlayView.setMap(this.context)\n }\n\n override componentDidUpdate(prevProps: OverlayViewProps): void {\n const prevPositionString = convertToLatLngString(prevProps.position)\n const positionString = convertToLatLngString(this.props.position)\n const prevBoundsString = convertToLatLngBoundsString(prevProps.bounds)\n const boundsString = convertToLatLngBoundsString(this.props.bounds)\n\n if (\n prevPositionString !== positionString ||\n prevBoundsString !== boundsString\n ) {\n this.overlayView.draw()\n }\n if (prevProps.mapPaneName !== this.props.mapPaneName) {\n this.updatePane()\n }\n }\n\n override componentWillUnmount(): void {\n this.overlayView.setMap(null)\n }\n\n override render(): ReactPortal | ReactNode {\n const paneEl = this.state.paneEl\n if (paneEl) {\n return ReactDOM.createPortal(\n
\n {Children.only(this.props.children)}\n
,\n paneEl\n )\n } else {\n return null\n }\n }\n}\n\nexport default OverlayView\n","import {\n memo,\n useMemo,\n useEffect,\n useContext,\n PureComponent,\n type ContextType,\n} from 'react'\nimport invariant from 'invariant'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport { noop } from '../../utils/noop.js'\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onDblClick: 'dblclick',\n onClick: 'click',\n}\n\nconst updaterMap = {\n opacity(instance: google.maps.GroundOverlay, opacity: number): void {\n instance.setOpacity(opacity)\n },\n}\n\ntype GroundOverlayState = {\n groundOverlay: google.maps.GroundOverlay | null\n}\n\nexport type GroundOverlayProps = {\n options?: google.maps.GroundOverlayOptions | undefined\n /** The opacity of the overlay, expressed as a number between 0 and 1. Optional. Defaults to 1. */\n opacity?: number | undefined\n /** This event is fired when the DOM dblclick event is fired on the GroundOverlay. */\n onDblClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the DOM click event is fired on the GroundOverlay. */\n onClick?: ((e: google.maps.MapMouseEvent) => void) | undefined\n /** The url of the projected image */\n url: string\n /** The bounds that the image will be scaled to fit */\n bounds: google.maps.LatLngBoundsLiteral\n /** This callback is called when the groundOverlay instance has loaded. It is called with the groundOverlay instance. */\n onLoad?: ((groundOverlay: google.maps.GroundOverlay) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the groundOverlay instance. */\n onUnmount?: ((groundOverlay: google.maps.GroundOverlay) => void) | undefined\n visible?: boolean\n}\n\nfunction GroundOverlayFunctional({\n url,\n bounds,\n options,\n visible,\n}: GroundOverlayProps) {\n const map = useContext(MapContext)\n\n const imageBounds = new google.maps.LatLngBounds(\n new google.maps.LatLng(bounds.south, bounds.west),\n new google.maps.LatLng(bounds.north, bounds.east)\n )\n\n const groundOverlay = useMemo(() => {\n return new google.maps.GroundOverlay(url, imageBounds, options)\n }, [])\n\n useEffect(() => {\n if (groundOverlay !== null) {\n groundOverlay.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n if (typeof url !== 'undefined' && groundOverlay !== null) {\n groundOverlay.set('url', url)\n groundOverlay.setMap(map)\n }\n }, [groundOverlay, url])\n\n useEffect(() => {\n if (typeof visible !== 'undefined' && groundOverlay !== null) {\n groundOverlay.setOpacity(visible ? 1 : 0)\n }\n }, [groundOverlay, visible])\n\n useEffect(() => {\n const newBounds = new google.maps.LatLngBounds(\n new google.maps.LatLng(bounds.south, bounds.west),\n new google.maps.LatLng(bounds.north, bounds.east)\n )\n\n if (typeof bounds !== 'undefined' && groundOverlay !== null) {\n groundOverlay.set('bounds', newBounds)\n groundOverlay.setMap(map)\n }\n }, [groundOverlay, bounds])\n\n return null\n}\n\nexport const GroundOverlayF = memo(GroundOverlayFunctional)\n\nexport class GroundOverlay extends PureComponent<\n GroundOverlayProps,\n GroundOverlayState\n> {\n public static defaultProps = {\n onLoad: noop,\n }\n\n static override contextType = MapContext\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n override state: GroundOverlayState = {\n groundOverlay: null,\n }\n\n setGroundOverlayCallback = (): void => {\n if (this.state.groundOverlay !== null && this.props.onLoad) {\n this.props.onLoad(this.state.groundOverlay)\n }\n }\n\n override componentDidMount(): void {\n invariant(\n !!this.props.url || !!this.props.bounds,\n `For GroundOverlay, url and bounds are passed in to constructor and are immutable after instantiated. This is the behavior of Google Maps JavaScript API v3 ( See https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay) Hence, use the corresponding two props provided by \\`react-google-maps-api\\`, url and bounds. In some cases, you'll need the GroundOverlay component to reflect the changes of url and bounds. You can leverage the React's key property to remount the component. Typically, just \\`key={url}\\` would serve your need. See https://github.com/tomchentw/react-google-maps/issues/655`\n )\n\n const groundOverlay = new google.maps.GroundOverlay(\n this.props.url,\n this.props.bounds,\n {\n ...this.props.options,\n map: this.context,\n }\n )\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: groundOverlay,\n })\n\n this.setState(function setGroundOverlay() {\n return {\n groundOverlay,\n }\n }, this.setGroundOverlayCallback)\n }\n\n override componentDidUpdate(prevProps: GroundOverlayProps): void {\n if (this.state.groundOverlay !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.groundOverlay,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.groundOverlay) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.groundOverlay)\n }\n\n this.state.groundOverlay.setMap(null)\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default GroundOverlay\n","export function noop(): void { return }\n","import invariant from 'invariant'\nimport {\n memo,\n useState,\n useEffect,\n useContext,\n PureComponent,\n type ContextType,\n} from 'react'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {}\n\nconst updaterMap = {\n data(\n instance: google.maps.visualization.HeatmapLayer,\n data:\n | google.maps.MVCArray<\n google.maps.LatLng | google.maps.visualization.WeightedLocation\n >\n | google.maps.LatLng[]\n | google.maps.visualization.WeightedLocation[]\n ): void {\n instance.setData(data)\n },\n map(\n instance: google.maps.visualization.HeatmapLayer,\n map: google.maps.Map\n ): void {\n instance.setMap(map)\n },\n options(\n instance: google.maps.visualization.HeatmapLayer,\n options: google.maps.visualization.HeatmapLayerOptions\n ): void {\n instance.setOptions(options)\n },\n}\n\ntype HeatmapLayerState = {\n heatmapLayer: google.maps.visualization.HeatmapLayer | null\n}\n\nexport type HeatmapLayerProps = {\n // required\n /** The data points to display. Required. */\n data:\n | google.maps.MVCArray<\n google.maps.LatLng | google.maps.visualization.WeightedLocation\n >\n | google.maps.LatLng[]\n | google.maps.visualization.WeightedLocation[]\n options?: google.maps.visualization.HeatmapLayerOptions | undefined\n /** This callback is called when the heatmapLayer instance has loaded. It is called with the heatmapLayer instance. */\n onLoad?:\n | ((heatmapLayer: google.maps.visualization.HeatmapLayer) => void)\n | undefined\n /** This callback is called when the component unmounts. It is called with the heatmapLayer instance. */\n onUnmount?:\n | ((heatmapLayer: google.maps.visualization.HeatmapLayer) => void)\n | undefined\n}\n\nfunction HeatmapLayerFunctional({\n data,\n onLoad,\n onUnmount,\n options,\n}: HeatmapLayerProps) {\n const map = useContext(MapContext)\n const [instance, setInstance] =\n useState(null)\n\n useEffect(() => {\n if (!google.maps.visualization) {\n invariant(\n !!google.maps.visualization,\n 'Did you include prop libraries={[\"visualization\"]} in useJsApiScript? %s',\n google.maps.visualization\n )\n }\n }, [])\n\n useEffect(() => {\n invariant(!!data, 'data property is required in HeatmapLayer %s', data)\n }, [data])\n\n // Order does matter\n useEffect(() => {\n if (instance !== null) {\n instance.setMap(map)\n }\n }, [map])\n\n useEffect(() => {\n if (options && instance !== null) {\n instance.setOptions(options)\n }\n }, [instance, options])\n\n useEffect(() => {\n const heatmapLayer = new google.maps.visualization.HeatmapLayer({\n ...options,\n data,\n map,\n })\n\n setInstance(heatmapLayer)\n\n if (onLoad) {\n onLoad(heatmapLayer)\n }\n\n return () => {\n if (instance !== null) {\n if (onUnmount) {\n onUnmount(instance)\n }\n\n instance.setMap(null)\n }\n }\n }, [])\n\n return null\n}\n\nexport const HeatmapLayerF = memo(HeatmapLayerFunctional)\n\nexport class HeatmapLayer extends PureComponent<\n HeatmapLayerProps,\n HeatmapLayerState\n> {\n static override contextType = MapContext\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n override state: HeatmapLayerState = {\n heatmapLayer: null,\n }\n\n setHeatmapLayerCallback = (): void => {\n if (this.state.heatmapLayer !== null && this.props.onLoad) {\n this.props.onLoad(this.state.heatmapLayer)\n }\n }\n\n override componentDidMount(): void {\n invariant(\n !!google.maps.visualization,\n 'Did you include prop libraries={[\"visualization\"]} to ? %s',\n google.maps.visualization\n )\n\n invariant(\n !!this.props.data,\n 'data property is required in HeatmapLayer %s',\n this.props.data\n )\n\n const heatmapLayer = new google.maps.visualization.HeatmapLayer({\n ...this.props.options,\n data: this.props.data,\n map: this.context,\n })\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: heatmapLayer,\n })\n\n this.setState(function setHeatmapLayer() {\n return {\n heatmapLayer,\n }\n }, this.setHeatmapLayerCallback)\n }\n\n override componentDidUpdate(prevProps: HeatmapLayerProps): void {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.heatmapLayer,\n })\n }\n\n override componentWillUnmount(): void {\n if (this.state.heatmapLayer !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.heatmapLayer)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.heatmapLayer.setMap(null)\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default HeatmapLayer\n","import { type ContextType, PureComponent } from 'react'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onCloseClick: 'closeclick',\n onPanoChanged: 'pano_changed',\n onPositionChanged: 'position_changed',\n onPovChanged: 'pov_changed',\n onResize: 'resize',\n onStatusChanged: 'status_changed',\n onVisibleChanged: 'visible_changed',\n onZoomChanged: 'zoom_changed',\n}\n\nconst updaterMap = {\n register(\n instance: google.maps.StreetViewPanorama,\n provider: (input: string) => google.maps.StreetViewPanoramaData,\n options: google.maps.PanoProviderOptions\n ): void {\n instance.registerPanoProvider(provider, options)\n },\n links(\n instance: google.maps.StreetViewPanorama,\n links: google.maps.StreetViewLink[]\n ): void {\n instance.setLinks(links)\n },\n motionTracking(\n instance: google.maps.StreetViewPanorama,\n motionTracking: boolean\n ): void {\n instance.setMotionTracking(motionTracking)\n },\n options(\n instance: google.maps.StreetViewPanorama,\n options: google.maps.StreetViewPanoramaOptions\n ): void {\n instance.setOptions(options)\n },\n pano(instance: google.maps.StreetViewPanorama, pano: string): void {\n instance.setPano(pano)\n },\n position(\n instance: google.maps.StreetViewPanorama,\n position: google.maps.LatLng | google.maps.LatLngLiteral\n ): void {\n instance.setPosition(position)\n },\n pov(\n instance: google.maps.StreetViewPanorama,\n pov: google.maps.StreetViewPov\n ): void {\n instance.setPov(pov)\n },\n visible(instance: google.maps.StreetViewPanorama, visible: boolean): void {\n instance.setVisible(visible)\n },\n zoom(instance: google.maps.StreetViewPanorama, zoom: number): void {\n instance.setZoom(zoom)\n },\n}\n\ntype StreetViewPanoramaState = {\n streetViewPanorama: google.maps.StreetViewPanorama | null\n}\n\nexport type StreetViewPanoramaProps = {\n options?: google.maps.StreetViewPanoramaOptions | undefined\n /** This event is fired when the close button is clicked. */\n onCloseclick?: ((event: google.maps.MapMouseEvent) => void) | undefined\n /** This event is fired when the panorama's pano id changes. The pano may change as the user navigates through the panorama or the position is manually set. Note that not all position changes trigger a pano_changed. */\n onPanoChanged?: (() => void) | undefined\n /** This event is fired when the panorama's position changes. The position changes as the user navigates through the panorama or the position is set manually. */\n onPositionChanged?: (() => void) | undefined\n /** This event is fired when the panorama's point-of-view changes. The point of view changes as the pitch, zoom, or heading changes. */\n onPovChanged?: (() => void) | undefined\n /** Developers should trigger this event on the panorama when its div changes size: google.maps.event.trigger(panorama, 'resize'). */\n onResize?: (() => void) | undefined\n /** This event is fired after every panorama lookup by id or location, via setPosition() or setPano(). */\n onStatusChanged?: (() => void) | undefined\n /** This event is fired when the panorama's visibility changes. The visibility is changed when the Pegman is dragged onto the map, the close button is clicked, or setVisible() is called. */\n onVisibleChanged?: (() => void) | undefined\n /** This event is fired when the panorama's zoom level changes. */\n onZoomChange?: (() => void) | undefined\n /** This callback is called when the streetViewPanorama instance has loaded. It is called with the streetViewPanorama instance. */\n onLoad?:\n | ((streetViewPanorama: google.maps.StreetViewPanorama) => void)\n | undefined\n /** This callback is called when the component unmounts. It is called with the streetViewPanorama instance. */\n onUnmount?:\n | ((streetViewPanorama: google.maps.StreetViewPanorama) => void)\n | undefined\n}\n\nexport class StreetViewPanorama extends PureComponent<\n StreetViewPanoramaProps,\n StreetViewPanoramaState\n> {\n static override contextType = MapContext\n\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n override state: StreetViewPanoramaState = {\n streetViewPanorama: null,\n }\n\n setStreetViewPanoramaCallback = (): void => {\n if (this.state.streetViewPanorama !== null && this.props.onLoad) {\n this.props.onLoad(this.state.streetViewPanorama)\n }\n }\n\n override componentDidMount(): void {\n const streetViewPanorama = this.context?.getStreetView() ?? null\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: streetViewPanorama,\n })\n\n this.setState(() => {\n return {\n streetViewPanorama,\n }\n }, this.setStreetViewPanoramaCallback)\n }\n\n override componentDidUpdate(prevProps: StreetViewPanoramaProps): void {\n if (this.state.streetViewPanorama !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.streetViewPanorama,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.streetViewPanorama !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.streetViewPanorama)\n }\n\n unregisterEvents(this.registeredEvents)\n\n this.state.streetViewPanorama.setVisible(false)\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default StreetViewPanorama\n","import { PureComponent } from 'react'\n\nimport MapContext from '../../map-context.js'\n\nexport type StreetViewServiceProps = {\n /** This callback is called when the streetViewService instance has loaded. It is called with the streetViewService instance. */\n onLoad?:\n | ((streetViewService: google.maps.StreetViewService | null) => void)\n | undefined\n /** This callback is called when the component unmounts. It is called with the streetViewService instance. */\n onUnmount?:\n | ((streetViewService: google.maps.StreetViewService | null) => void)\n | undefined\n}\n\ntype StreetViewServiceState = {\n streetViewService: google.maps.StreetViewService | null\n}\n\nexport class StreetViewService extends PureComponent<\n StreetViewServiceProps,\n StreetViewServiceState\n> {\n static override contextType = MapContext\n\n declare context: React.ContextType\n\n override state = {\n streetViewService: null,\n }\n\n setStreetViewServiceCallback = (): void => {\n if (this.state.streetViewService !== null && this.props.onLoad) {\n this.props.onLoad(this.state.streetViewService)\n }\n }\n\n override componentDidMount(): void {\n const streetViewService = new google.maps.StreetViewService()\n\n this.setState(function setStreetViewService() {\n return {\n streetViewService,\n }\n }, this.setStreetViewServiceCallback)\n }\n\n override componentWillUnmount(): void {\n if (this.state.streetViewService !== null && this.props.onUnmount) {\n this.props.onUnmount(this.state.streetViewService)\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default StreetViewService\n","import { PureComponent } from 'react'\nimport invariant from 'invariant'\n\ntype DirectionsServiceState = {\n directionsService: google.maps.DirectionsService | null\n}\n\nexport type DirectionsServiceProps = {\n // required for default functionality\n options: google.maps.DirectionsRequest\n\n // required for default functionality\n callback: (\n // required\n /** The directions response retrieved from the directions server. You can render these using a DirectionsRenderer or parse this object and render it yourself. You must display the warnings and copyrights as noted in the Google Maps Platform Terms of Service. Note that though this result is \"JSON-like,\" it is not strictly JSON, as it indirectly includes LatLng objects */\n result: google.maps.DirectionsResult | null,\n // required\n /** The status returned by the DirectionsService on the completion of a call to route(). Specify these by value, or by using the constant's name. For example, 'OK' or google.maps.DirectionsStatus.OK */\n status: google.maps.DirectionsStatus\n ) => void\n /** This callback is called when the directionsService instance has loaded. It is called with the directionsService instance. */\n onLoad?:\n | ((directionsService: google.maps.DirectionsService) => void)\n | undefined\n /** This callback is called when the component unmounts. It is called with the directionsService instance. */\n onUnmount?:\n | ((directionsService: google.maps.DirectionsService) => void)\n | undefined\n}\n\nexport class DirectionsService extends PureComponent<\n DirectionsServiceProps,\n DirectionsServiceState\n> {\n override state: DirectionsServiceState = {\n directionsService: null,\n }\n\n setDirectionsServiceCallback = (): void => {\n if (this.state.directionsService !== null && this.props.onLoad) {\n this.props.onLoad(this.state.directionsService)\n }\n }\n\n override componentDidMount(): void {\n invariant(\n !!this.props.options,\n 'DirectionsService expected options object as parameter, but got %s',\n this.props.options\n )\n\n const directionsService = new google.maps.DirectionsService()\n\n this.setState(function setDirectionsService() {\n return {\n directionsService,\n }\n }, this.setDirectionsServiceCallback)\n }\n\n override componentDidUpdate(): void {\n if (this.state.directionsService !== null) {\n this.state.directionsService.route(\n this.props.options,\n this.props.callback\n )\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.directionsService !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.directionsService)\n }\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default DirectionsService\n","import { type ContextType, PureComponent } from 'react'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onDirectionsChanged: 'directions_changed',\n}\n\nconst updaterMap = {\n directions(\n instance: google.maps.DirectionsRenderer,\n directions: google.maps.DirectionsResult\n ): void {\n instance.setDirections(directions)\n },\n map(instance: google.maps.DirectionsRenderer, map: google.maps.Map): void {\n instance.setMap(map)\n },\n options(\n instance: google.maps.DirectionsRenderer,\n options: google.maps.DirectionsRendererOptions\n ): void {\n instance.setOptions(options)\n },\n panel(instance: google.maps.DirectionsRenderer, panel: HTMLElement): void {\n instance.setPanel(panel)\n },\n routeIndex(\n instance: google.maps.DirectionsRenderer,\n routeIndex: number\n ): void {\n instance.setRouteIndex(routeIndex)\n },\n}\n\ntype DirectionsRendererState = {\n directionsRenderer: google.maps.DirectionsRenderer | null\n}\n\nexport type DirectionsRendererProps = {\n options?: google.maps.DirectionsRendererOptions | undefined\n /** The directions to display on the map and/or in a
panel, retrieved as a DirectionsResult object from DirectionsService. */\n directions?: google.maps.DirectionsResult | undefined\n /** The
in which to display the directions steps. */\n panel?: HTMLElement | undefined\n /** The index of the route within the DirectionsResult object. The default value is 0. */\n routeIndex?: number | undefined\n /** This event is fired when the rendered directions change, either when a new DirectionsResult is set or when the user finishes dragging a change to the directions path. */\n onDirectionsChanged?: (() => void) | undefined\n /** This callback is called when the directionsRenderer instance has loaded. It is called with the directionsRenderer instance. */\n onLoad?:\n | ((directionsRenderer: google.maps.DirectionsRenderer) => void)\n | undefined\n /** This callback is called when the component unmounts. It is called with the directionsRenderer instance. */\n onUnmount?:\n | ((directionsRenderer: google.maps.DirectionsRenderer) => void)\n | undefined\n}\n\nexport class DirectionsRenderer extends PureComponent<\n DirectionsRendererProps,\n DirectionsRendererState\n> {\n static override contextType = MapContext\n\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n override state: DirectionsRendererState = {\n directionsRenderer: null,\n }\n\n setDirectionsRendererCallback = (): void => {\n if (this.state.directionsRenderer !== null) {\n this.state.directionsRenderer.setMap(this.context)\n\n if (this.props.onLoad) {\n this.props.onLoad(this.state.directionsRenderer)\n }\n }\n }\n\n override componentDidMount(): void {\n const directionsRenderer = new google.maps.DirectionsRenderer(\n this.props.options\n )\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: directionsRenderer,\n })\n\n this.setState(function setDirectionsRenderer() {\n return {\n directionsRenderer,\n }\n }, this.setDirectionsRendererCallback)\n }\n\n override componentDidUpdate(prevProps: DirectionsRendererProps): void {\n if (this.state.directionsRenderer !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.directionsRenderer,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.directionsRenderer !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.directionsRenderer)\n }\n\n unregisterEvents(this.registeredEvents)\n\n if (this.state.directionsRenderer) {\n this.state.directionsRenderer.setMap(null)\n }\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default DirectionsRenderer\n","import { PureComponent } from 'react'\n\nimport invariant from 'invariant'\n\ntype DistanceMatrixServiceState = {\n distanceMatrixService: google.maps.DistanceMatrixService | null\n}\n\nexport type DistanceMatrixServiceProps = {\n // required for default functionality\n options: google.maps.DistanceMatrixRequest\n\n // required for default functionality\n callback: (\n // required\n /** The response to a DistanceMatrixService request, consisting of the formatted origin and destination addresses, and a sequence of DistanceMatrixResponseRows, one for each corresponding origin address. */\n response: google.maps.DistanceMatrixResponse | null,\n // required\n /** The top-level status about the request in general returned by the DistanceMatrixService upon completion of a distance matrix request. Specify these by value, or by using the constant's name. For example, 'OK' or google.maps.DistanceMatrixStatus.OK. */\n status: google.maps.DistanceMatrixStatus\n ) => void\n /** This callback is called when the distanceMatrixService instance has loaded. It is called with the distanceMatrixService instance. */\n onLoad?:\n | ((distanceMatrixService: google.maps.DistanceMatrixService) => void)\n | undefined\n /** This callback is called when the component unmounts. It is called with the distanceMatrixService instance. */\n onUnmount?:\n | ((distanceMatrixService: google.maps.DistanceMatrixService) => void)\n | undefined\n}\n\nexport class DistanceMatrixService extends PureComponent<\n DistanceMatrixServiceProps,\n DistanceMatrixServiceState\n> {\n override state: DistanceMatrixServiceState = {\n distanceMatrixService: null,\n }\n\n setDistanceMatrixServiceCallback = (): void => {\n if (this.state.distanceMatrixService !== null && this.props.onLoad) {\n this.props.onLoad(this.state.distanceMatrixService)\n }\n }\n\n override componentDidMount(): void {\n invariant(\n !!this.props.options,\n 'DistanceMatrixService expected options object as parameter, but go %s',\n this.props.options\n )\n\n const distanceMatrixService = new google.maps.DistanceMatrixService()\n\n this.setState(function setDistanceMatrixService() {\n return {\n distanceMatrixService,\n }\n }, this.setDistanceMatrixServiceCallback)\n }\n\n override componentDidUpdate(): void {\n if (this.state.distanceMatrixService !== null) {\n this.state.distanceMatrixService.getDistanceMatrix(\n this.props.options,\n this.props.callback\n )\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.distanceMatrixService !== null && this.props.onUnmount) {\n this.props.onUnmount(this.state.distanceMatrixService)\n }\n }\n\n override render(): null {\n return null\n }\n}\n\nexport default DistanceMatrixService\n","import {\n Children,\n type JSX,\n createRef,\n PureComponent,\n type ReactNode,\n type RefObject,\n type ContextType,\n} from 'react'\nimport invariant from 'invariant'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onPlacesChanged: 'places_changed',\n}\n\nconst updaterMap = {\n bounds(\n instance: google.maps.places.SearchBox,\n bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral\n ): void {\n instance.setBounds(bounds)\n },\n}\n\ntype StandaloneSearchBoxState = {\n searchBox: google.maps.places.SearchBox | null\n}\n\nexport type StandaloneSearchBoxProps = {\n children?: ReactNode | undefined\n /** The area towards which to bias query predictions. Predictions are biased towards, but not restricted to, queries targeting these bounds. */\n bounds?:\n | google.maps.LatLngBounds\n | google.maps.LatLngBoundsLiteral\n | undefined\n options?: google.maps.places.SearchBoxOptions | undefined\n /** This event is fired when the user selects a query, getPlaces should be used to get new places. */\n onPlacesChanged?: (() => void) | undefined\n /** This callback is called when the searchBox instance has loaded. It is called with the searchBox instance. */\n onLoad?: ((searchBox: google.maps.places.SearchBox) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the searchBox instance. */\n onUnmount?: ((searchBox: google.maps.places.SearchBox) => void) | undefined\n}\n\nclass StandaloneSearchBox extends PureComponent<\n StandaloneSearchBoxProps,\n StandaloneSearchBoxState\n> {\n static override contextType = MapContext\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n\n containerElement: RefObject = createRef()\n\n override state: StandaloneSearchBoxState = {\n searchBox: null,\n }\n\n setSearchBoxCallback = (): void => {\n if (this.state.searchBox !== null && this.props.onLoad) {\n this.props.onLoad(this.state.searchBox)\n }\n }\n\n override componentDidMount(): void {\n invariant(\n !!google.maps.places,\n 'You need to provide libraries={[\"places\"]} prop to component %s',\n google.maps.places\n )\n\n if (\n this.containerElement !== null &&\n this.containerElement.current !== null\n ) {\n const input = this.containerElement.current.querySelector('input')\n\n if (input !== null) {\n const searchBox = new google.maps.places.SearchBox(\n input,\n this.props.options\n )\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: searchBox,\n })\n\n this.setState(function setSearchBox() {\n return {\n searchBox,\n }\n }, this.setSearchBoxCallback)\n }\n }\n }\n\n override componentDidUpdate(prevProps: StandaloneSearchBoxProps): void {\n if (this.state.searchBox !== null) {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.searchBox,\n })\n }\n }\n\n override componentWillUnmount(): void {\n if (this.state.searchBox !== null) {\n if (this.props.onUnmount) {\n this.props.onUnmount(this.state.searchBox)\n }\n\n unregisterEvents(this.registeredEvents)\n }\n }\n\n override render(): JSX.Element {\n return (\n
\n {Children.only(this.props.children)}\n
\n )\n }\n}\n\nexport default StandaloneSearchBox\n","import {\n type JSX,\n Children,\n createRef,\n PureComponent,\n type ReactNode,\n type RefObject,\n type ContextType,\n} from 'react'\nimport invariant from 'invariant'\n\nimport {\n unregisterEvents,\n applyUpdatersToPropsAndRegisterEvents,\n} from '../../utils/helper.js'\n\nimport MapContext from '../../map-context.js'\n\nconst eventMap = {\n onPlaceChanged: 'place_changed',\n}\n\nconst updaterMap = {\n bounds(\n instance: google.maps.places.Autocomplete,\n bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral\n ): void {\n instance.setBounds(bounds)\n },\n restrictions(\n instance: google.maps.places.Autocomplete,\n restrictions: google.maps.places.ComponentRestrictions\n ): void {\n instance.setComponentRestrictions(restrictions)\n },\n fields(instance: google.maps.places.Autocomplete, fields: string[]): void {\n instance.setFields(fields)\n },\n options(\n instance: google.maps.places.Autocomplete,\n options: google.maps.places.AutocompleteOptions\n ): void {\n instance.setOptions(options)\n },\n types(instance: google.maps.places.Autocomplete, types: string[]): void {\n instance.setTypes(types)\n },\n}\n\ntype AutocompleteState = {\n autocomplete: google.maps.places.Autocomplete | null\n}\n\nexport type AutocompleteProps = {\n // required\n children: ReactNode\n /** The area in which to search for places. */\n bounds?:\n | google.maps.LatLngBounds\n | google.maps.LatLngBoundsLiteral\n | undefined\n /** The component restrictions. Component restrictions are used to restrict predictions to only those within the parent component. For example, the country. */\n restrictions?: google.maps.places.ComponentRestrictions | undefined\n /** Fields to be included for the Place in the details response when the details are successfully retrieved. For a list of fields see PlaceResult. Nested fields can be specified with dot-paths (for example, \"geometry.location\"). */\n fields?: string[] | undefined\n options?: google.maps.places.AutocompleteOptions | undefined\n /** The types of predictions to be returned. For a list of supported types, see the developer's guide. If nothing is specified, all types are returned. In general only a single type is allowed. The exception is that you can safely mix the 'geocode' and 'establishment' types, but note that this will have the same effect as specifying no types. */\n types?: string[] | undefined\n /** This event is fired when a PlaceResult is made available for a Place the user has selected. If the user enters the name of a Place that was not suggested by the control and presses the Enter key, or if a Place Details request fails, the PlaceResult contains the user input in the name property, with no other properties defined. */\n onPlaceChanged?: (() => void) | undefined\n /** This callback is called when the autocomplete instance has loaded. It is called with the autocomplete instance. */\n onLoad?: ((autocomplete: google.maps.places.Autocomplete) => void) | undefined\n /** This callback is called when the component unmounts. It is called with the autocomplete instance. */\n onUnmount?:\n | ((autocomplete: google.maps.places.Autocomplete) => void)\n | undefined\n className?: string | undefined\n}\n\nexport class Autocomplete extends PureComponent<\n AutocompleteProps,\n AutocompleteState\n> {\n static defaultProps = {\n className: '',\n }\n\n static override contextType = MapContext\n declare context: ContextType\n\n registeredEvents: google.maps.MapsEventListener[] = []\n containerElement: RefObject = createRef()\n\n override state: AutocompleteState = {\n autocomplete: null,\n }\n\n setAutocompleteCallback = (): void => {\n if (this.state.autocomplete !== null && this.props.onLoad) {\n this.props.onLoad(this.state.autocomplete)\n }\n }\n\n override componentDidMount(): void {\n invariant(\n !!google.maps.places,\n 'You need to provide libraries={[\"places\"]} prop to component %s',\n google.maps.places\n )\n\n // TODO: why current could be equal null?\n\n const input = this.containerElement.current?.querySelector('input')\n\n if (input) {\n const autocomplete = new google.maps.places.Autocomplete(\n input,\n this.props.options\n )\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps: {},\n nextProps: this.props,\n instance: autocomplete,\n })\n\n this.setState(() => {\n return {\n autocomplete,\n }\n }, this.setAutocompleteCallback)\n }\n }\n\n override componentDidUpdate(prevProps: AutocompleteProps): void {\n unregisterEvents(this.registeredEvents)\n\n this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({\n updaterMap,\n eventMap,\n prevProps,\n nextProps: this.props,\n instance: this.state.autocomplete,\n })\n }\n\n override componentWillUnmount(): void {\n if (this.state.autocomplete !== null) {\n unregisterEvents(this.registeredEvents)\n }\n }\n\n override render(): JSX.Element {\n return (\n
\n {Children.only(this.props.children)}\n
\n )\n }\n}\n\nexport default Autocomplete\n","import { PERSIST_OPTION, STORE_DEFAULT_NAME } from '../constants';\nimport { GlobalState, StateMachineOptions } from '../types';\n\nfunction StoreFactory() {\n let options: StateMachineOptions = {\n name: STORE_DEFAULT_NAME,\n middleWares: [],\n persist: PERSIST_OPTION.ACTION,\n };\n let state: GlobalState = {};\n\n try {\n options.storageType =\n typeof sessionStorage !== 'undefined' ? window.sessionStorage : undefined;\n } catch {}\n\n return {\n updateStore(defaultValues: GlobalState) {\n try {\n state =\n (options.storageType &&\n JSON.parse(options.storageType.getItem(options.name!) || '')) ||\n defaultValues;\n } catch {\n state = defaultValues;\n }\n },\n saveStore() {\n options.storageType &&\n options.storageType.setItem(options.name!, JSON.stringify(state));\n },\n get state() {\n return state;\n },\n set state(value) {\n state = value;\n },\n get options() {\n return options;\n },\n set options(value) {\n options = value;\n },\n };\n}\n\nexport default StoreFactory();\n","export const STORE_DEFAULT_NAME = '__LSM__';\nexport const STORE_ACTION_NAME = '__LSM_NAME__';\nexport const PERSIST_OPTION = {\n NONE: 'none',\n ACTION: 'action',\n UNLOAD: 'beforeUnload',\n} as const;\n","import * as React from 'react';\nimport storeFactory from './logic/storeFactory';\nimport { StateMachineContextValue } from './types';\nimport { PERSIST_OPTION } from './constants';\n\ntype PropsChildren = {\n children?: React.ReactNode;\n};\n\nconst StateMachineContext = React.createContext(\n undefined as any,\n);\n\nexport const StateMachineProvider: React.FC = ({ children }) => {\n const [state, setState] = React.useState(storeFactory.state);\n\n React.useEffect(() => {\n if (storeFactory.options.persist === PERSIST_OPTION.UNLOAD) {\n window.onbeforeunload = () => storeFactory.saveStore();\n storeFactory.options.storageType &&\n storeFactory.options.storageType.removeItem(storeFactory.options.name!);\n }\n }, []);\n\n return (\n \n {children}\n \n );\n};\n\nexport const useStateMachineContext = () =>\n React.useContext(StateMachineContext);\n","import * as React from 'react';\nimport { useStateMachineContext } from './StateMachineContext';\nimport storeFactory from './logic/storeFactory';\nimport {\n StateMachineOptions,\n GlobalState,\n AnyCallback,\n AnyActions,\n ActionsOutput,\n} from './types';\nimport { PERSIST_OPTION, STORE_ACTION_NAME } from './constants';\n\nexport function createStore(\n defaultState: GlobalState,\n options?: StateMachineOptions,\n) {\n if (options) {\n storeFactory.options = {\n ...storeFactory.options,\n ...options,\n };\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof window !== 'undefined') {\n window.__LSM_NAME__ = storeFactory.options.name;\n window.__LSM_RESET__ = () =>\n storeFactory.options.storageType &&\n storeFactory.options.storageType.removeItem(storeFactory.options.name!);\n }\n }\n\n storeFactory.updateStore(defaultState);\n}\n\nconst actionTemplate =\n (\n setState: React.Dispatch>,\n callback: TCallback,\n ) =>\n (payload: Parameters[1], options?: { skipRender: boolean }) => {\n if (process.env.NODE_ENV !== 'production') {\n window[STORE_ACTION_NAME] = callback.name;\n }\n\n storeFactory.state = callback(storeFactory.state, payload);\n\n if (storeFactory.options.middleWares) {\n storeFactory.state = storeFactory.options.middleWares.reduce(\n (currentValue, currentFunction) =>\n currentFunction(currentValue, callback.name, payload) || currentValue,\n storeFactory.state,\n );\n }\n\n (!options || !options.skipRender) && setState(storeFactory.state);\n\n if (storeFactory.options.persist === PERSIST_OPTION.ACTION) {\n storeFactory.saveStore();\n }\n };\n\nexport function useStateMachine<\n TCallback extends AnyCallback,\n TActions extends AnyActions,\n>(\n actions?: TActions,\n): {\n actions: ActionsOutput;\n state: GlobalState;\n getState: () => GlobalState;\n} {\n const { state, setState } = useStateMachineContext();\n const actionsRef = React.useRef(\n Object.entries(actions || {}).reduce(\n (previous, [key, callback]) =>\n Object.assign({}, previous, {\n [key]: actionTemplate(setState, callback),\n }),\n {} as ActionsOutput,\n ),\n );\n\n return {\n actions: actionsRef.current,\n state,\n getState: React.useCallback(() => storeFactory.state, []),\n };\n}\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t