vue3-google-map 0.11.0 → 0.12.0

package/README.md

@@ -4,6 +4,8 @@
 
 `vue3-google-map` offers a set of composable components for easy use of Google Maps in your Vue 3 projects.
 
+Note: Please refer to the [documentation site](https://vue3-google-map.netlify.app/) for rendered examples.
+
 ## Table of Contents
 
 - [Getting Started](#getting-started)
@@ -16,7 +18,9 @@
   - [Rectangle](#rectangle)
   - [Circle](#circle)
   - [Info Window](#info-window)
-  - [Custom Controls](#custom-controls)
+  - [Custom Marker](#custom-marker)
+  - [Custom Control](#custom-control)
+  - [Marker Cluster](#marker-cluster)
 - [Advanced Usage](#advanced-usage)
 - [Contribution](#contribution)
 - [License](#license)
@@ -44,7 +48,7 @@ Include the following script tag in your `index.html` (make sure to include it a
 ### Your First Map
 
 To construct a map using `vue3-google-map` you'll need to use the base `GoogleMap` component which receives your [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key), styles (e.g. setting width and height), and any [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) to configure your map ([see this](https://github.com/inocan-group/vue3-google-map/blob/develop/src/components/GoogleMap.vue#L30-L209) for all the supported `MapOptions`).
-Other map features can be added to your map by passing map subcomponents ([Marker](#marker), [Polyline](#polyline), [Polygon](#polygon), [Rectangle](#rectangle), [Circle](#circle), [InfoWindow](#info-window), or [CustomControl](#custom-controls)) to the default slot of the `GoogleMap` component.
+Other map features can be added to your map by passing map subcomponents ([Marker](#marker), [Polyline](#polyline), [Polygon](#polygon), [Rectangle](#rectangle), [Circle](#circle), [InfoWindow](#info-window), [CustomMarker](#custom-marker), [CustomControl](#custom-control), or [MarkerCluster](#marker-cluster)) to the default slot of the `GoogleMap` component.
 
 ```vue
 <template>
@@ -80,7 +84,9 @@ The main mapping component is `GoogleMap`, however the following components are
 - [Rectangle](#rectangle)
 - [Circle](#circle)
 - [InfoWindow](#info-window)
-- [CustomControl](#custom-controls)
+- [CustomMarker](#custom-marker)
+- [CustomControl](#custom-control)
+- [MarkerCluster](#marker-cluster)
 
 ### Marker
 
@@ -422,7 +428,54 @@ export default defineComponent({
 
 You can listen for [the following events](https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow-Events) on the `InfoWindow` component.
 
-### Custom Controls
+### Custom Marker
+
+Regular markers can be customized a great deal but if you need to you can use the `CustomMarker` component and provide your own custom markup through it's `default` slot.
+
+#### Options
+
+| Parameter | Type     | Description                |
+| :-------- | :------- | :------------------------- |
+| `position` | `{ lat: number, lng: number}` | Sets the marker position. |
+| `anchorPoint` | `'CENTER' \| 'TOP_CENTER' \|'BOTTOM_CENTER' \| 'LEFT_CENTER' \| 'RIGHT_CENTER' \| 'TOP_LEFT' \| 'TOP_RIGHT' \| 'BOTTOM_LEFT' \| 'BOTTOM_RIGHT'` | Sets how the marker is anchored relative to it's `position` point. Default is `CENTER`. |
+| `offsetX` | `number` | Horizontal offset from the `position` point. |
+| `offsetY` | `number` | Vertical offset from the `position` point. |
+| `zIndex` | `number` | `z-index` value of the marker. |
+
+
+```vue
+<template>
+  <GoogleMap
+    api-key="YOUR_GOOGLE_MAPS_API_KEY"
+    style="width: 100%; height: 500px"
+    :center="center"
+    :zoom="15"
+  >
+    <CustomMarker :options="{ position: center, anchorPoint: 'BOTTOM_CENTER' }">
+      <div style="text-align: center">
+        <div style="font-size: 1.125rem">Vuejs Amsterdam</div>
+        <img src="https://vuejs.org/images/logo.png" width="50" height="50" style="margin-top: 8px" />
+      </div>
+    </CustomMarker>
+  </GoogleMap>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { GoogleMap, CustomMarker } from 'vue3-google-map'
+
+export default defineComponent({
+  components: { GoogleMap, CustomMarker },
+  setup() {
+    const center = { lat: 52.36834, lng: 4.88635 }
+
+    return { center }
+  },
+})
+</script>
+```
+
+### Custom Control
 
 Use the `CustomControl` component to add custom buttons/controls to your map.
 
@@ -480,6 +533,78 @@ export default defineComponent({
 </style>
 ```
 
+### Marker Cluster
+
+Use the `MarkerCluster` component to display a large number of markers on a map. It will combine markers of close proximity into clusters, and simplify the display of markers on the map. Can be used with the `Marker` or `CustomMarker` components.
+
+## Usage
+
+Simply pass your `Marker`/`CustomMarker`(s) in the `default` slot of the `MarkerCluster` component.
+
+```vue
+<template>
+  <GoogleMap
+    api-key="YOUR_GOOGLE_MAPS_API_KEY"
+    style="width: 100%; height: 500px"
+    :center="center"
+    :zoom="3"
+  >
+    <MarkerCluster>
+      <Marker v-for="(location, i) in locations" :options="{ position: location }" :key="i" />
+    </MarkerCluster>
+  </GoogleMap>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { GoogleMap, Marker, MarkerCluster } from 'vue3-google-map'
+
+export default defineComponent({
+  components: { GoogleMap, Marker, MarkerCluster },
+  setup() {
+    const center = { lat: -28.024, lng: 140.887 }
+
+    const locations = [
+      { lat: -31.56391, lng: 147.154312 },
+      { lat: -33.718234, lng: 150.363181 },
+      { lat: -33.727111, lng: 150.371124 },
+      { lat: -33.848588, lng: 151.209834 },
+      { lat: -33.851702, lng: 151.216968 },
+      { lat: -34.671264, lng: 150.863657 },
+      { lat: -35.304724, lng: 148.662905 },
+      { lat: -36.817685, lng: 175.699196 },
+      { lat: -36.828611, lng: 175.790222 },
+      { lat: -37.75, lng: 145.116667 },
+      { lat: -37.759859, lng: 145.128708 },
+      { lat: -37.765015, lng: 145.133858 },
+      { lat: -37.770104, lng: 145.143299 },
+      { lat: -37.7737, lng: 145.145187 },
+      { lat: -37.774785, lng: 145.137978 },
+      { lat: -37.819616, lng: 144.968119 },
+      { lat: -38.330766, lng: 144.695692 },
+      { lat: -39.927193, lng: 175.053218 },
+      { lat: -41.330162, lng: 174.865694 },
+      { lat: -42.734358, lng: 147.439506 },
+      { lat: -42.734358, lng: 147.501315 },
+      { lat: -42.735258, lng: 147.438 },
+      { lat: -43.999792, lng: 170.463352 },
+    ]
+
+    return { center, locations }
+  },
+})
+</script>
+```
+
+#### Options
+
+`MarkerCluster` accepts an `options` prop (an object) where you can configure `algorithm`, `onClusterClick`, and `renderer` from the [MarkerClustererOptions](https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html) interface. Note that all these options are completely optional but non-reactive.
+
+#### Events
+
+You can listen for [the following events](https://googlemaps.github.io/js-markerclusterer/enums/MarkerClustererEvents.html) on the `MarkerCluster` component.
+
+
 ## Advanced Usage
 
 The basic components that `vue3-google-map` provides are fully reactive and will get you pretty far. Should you need to access the Google Maps API, however, the `GoogleMaps` component exposes the following:
@@ -612,6 +737,7 @@ In addition, most of the subcomponents expose their instance should you need it:
 - `Rectangle` exposes `rectangle` (a [Rectangle](https://developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle) class instance).
 - `Circle` exposes `circle` (a [Circle](https://developers.google.com/maps/documentation/javascript/reference/polygon#Circle) class instance).
 - `InfoWindow` exposes `infoWindow` (an [InfoWindow](https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow) class instance).
+- `MarkerCluster` exposes `markerCluster` (a [MarkerClusterer](https://googlemaps.github.io/js-markerclusterer/classes/MarkerClusterer.html) class instance).
 
 ## Contribution
 

package/dist/cjs/index.js

@@ -13,7 +13,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 *****************************************************************************/
-'use strict';Object.defineProperty(exports,"__esModule",{value:!0});var vue=require("vue");let mapSymbol=Symbol("map"),apiSymbol=Symbol("api"),markerSymbol=Symbol("marker"),markerClusterSymbol=Symbol("markerCluster"),mapTilesLoadedSymbol=Symbol("mapTilesLoaded"),loaderInstance=vue.ref(null),polylineEvents="click dblclick drag dragend dragstart mousedown mousemove mouseout mouseover mouseup rightclick".split(" ");
+'use strict';Object.defineProperty(exports,"__esModule",{value:!0});var vue=require("vue");let mapSymbol=Symbol("map"),apiSymbol=Symbol("api"),markerSymbol=Symbol("marker"),markerClusterSymbol=Symbol("markerCluster"),customMarkerClassSymbol=Symbol("CustomMarker"),mapTilesLoadedSymbol=Symbol("mapTilesLoaded"),loaderInstance=vue.ref(null),polylineEvents="click dblclick drag dragend dragstart mousedown mousemove mouseout mouseover mouseup rightclick".split(" ");
 var fastDeepEqual$1=function equal(a,b){if(a===b)return!0;if(a&&b&&"object"==typeof a&&"object"==typeof b){if(a.constructor!==b.constructor)return!1;var d;if(Array.isArray(a)){var e=a.length;if(e!=b.length)return!1;for(d=e;0!==d--;)if(!equal(a[d],b[d]))return!1;return!0}if(a.constructor===RegExp)return a.source===b.source&&a.flags===b.flags;if(a.valueOf!==Object.prototype.valueOf)return a.valueOf()===b.valueOf();if(a.toString!==Object.prototype.toString)return a.toString()===b.toString();var g=Object.keys(a);
 e=g.length;if(e!==Object.keys(b).length)return!1;for(d=e;0!==d--;)if(!Object.prototype.hasOwnProperty.call(b,g[d]))return!1;for(d=e;0!==d--;)if(e=g[d],!equal(a[e],b[e]))return!1;return!0}return a!==a&&b!==b};let DEFAULT_ID="__googleMapsScriptId";
 class Loader{constructor({apiKey:a,channel:b,client:c,id:d=DEFAULT_ID,libraries:e=[],language:g,region:f,version:k,mapIds:l,nonce:h,retries:m=3,url:n="https://maps.googleapis.com/maps/api/js"}){this.CALLBACK="__googleMapsCallback";this.callbacks=[];this.loading=this.done=!1;this.errors=[];this.version=k;this.apiKey=a;this.channel=b;this.client=c;this.id=d||DEFAULT_ID;this.libraries=e;this.language=g;this.region=f;this.mapIds=l;this.nonce=h;this.retries=m;this.url=n;if(Loader.instance){if(!fastDeepEqual$1(this.options,
@@ -21,34 +21,38 @@ Loader.instance.options))throw Error(`Loader must not be called again with diffe
 this.retries+1}createUrl(){let a=this.url;a+=`?callback=${this.CALLBACK}`;this.apiKey&&(a+=`&key=${this.apiKey}`);this.channel&&(a+=`&channel=${this.channel}`);this.client&&(a+=`&client=${this.client}`);0<this.libraries.length&&(a+=`&libraries=${this.libraries.join(",")}`);this.language&&(a+=`&language=${this.language}`);this.region&&(a+=`&region=${this.region}`);this.version&&(a+=`&v=${this.version}`);this.mapIds&&(a+=`&map_ids=${this.mapIds.join(",")}`);return a}deleteScript(){let a=document.getElementById(this.id);
 a&&a.remove()}load(){return this.loadPromise()}loadPromise(){return new Promise((a,b)=>{this.loadCallback(c=>{c?b(c.error):a(window.google)})})}loadCallback(a){this.callbacks.push(a);this.execute()}setScript(){if(document.getElementById(this.id))this.callback();else{var a=this.createUrl(),b=document.createElement("script");b.id=this.id;b.type="text/javascript";b.src=a;b.onerror=this.loadErrorCallback.bind(this);b.defer=!0;b.async=!0;this.nonce&&(b.nonce=this.nonce);document.head.appendChild(b)}}reset(){this.deleteScript();
 this.loading=this.done=!1;this.errors=[];this.onerrorEvent=null}resetIfRetryingFailed(){this.failed&&this.reset()}loadErrorCallback(a){this.errors.push(a);this.errors.length<=this.retries?(a=this.errors.length*Math.pow(2,this.errors.length),console.log(`Failed to load Google Maps script, retrying in ${a} ms.`),setTimeout(()=>{this.deleteScript();this.setScript()},a)):(this.onerrorEvent=a,this.callback())}setCallback(){window.__googleMapsCallback=this.callback.bind(this)}callback(){this.done=!0;this.loading=
-!1;this.callbacks.forEach(a=>{a(this.onerrorEvent)});this.callbacks=[]}execute(){this.resetIfRetryingFailed();this.done?this.callback():window.google&&window.google.maps&&window.google.maps.version?(console.warn("Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match."),this.callback()):this.loading||(this.loading=!0,this.setCallback(),this.setScript())}}let mapEvents="bounds_changed center_changed click dblclick drag dragend dragstart heading_changed idle maptypeid_changed mousemove mouseout mouseover projection_changed resize rightclick tilesloaded tilt_changed zoom_changed".split(" ");
-var _sfc_main$2=vue.defineComponent({props:{apiKey:{type:String,default:""},version:{type:String,default:"weekly"},libraries:{type:Array,default:()=>["places"]},region:{type:String,required:!1},language:{type:String,required:!1},backgroundColor:{type:String,required:!1},center:{type:Object,default:()=>({lat:0,lng:0})},clickableIcons:{type:Boolean,required:!1,default:void 0},controlSize:{type:Number,required:!1},disableDefaultUi:{type:Boolean,required:!1,default:void 0},disableDoubleClickZoom:{type:Boolean,
+!1;this.callbacks.forEach(a=>{a(this.onerrorEvent)});this.callbacks=[]}execute(){this.resetIfRetryingFailed();this.done?this.callback():window.google&&window.google.maps&&window.google.maps.version?(console.warn("Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match."),this.callback()):this.loading||(this.loading=!0,this.setCallback(),this.setScript())}}
+function createCustomMarkerClass(a){return class extends a.OverlayView{constructor(a){super();let {element:b,...d}=a;this.element=b;this.opts=d;this.opts.map&&this.setMap(this.opts.map)}getPosition(){return this.opts.position?this.opts.position instanceof a.LatLng?this.opts.position:new a.LatLng(this.opts.position):null}getVisible(){if(!this.element)return!1;let a=this.element;return"none"!==a.style.display&&"hidden"!==a.style.visibility&&(""===a.style.opacity||.01<Number(a.style.opacity))}onAdd(){if(this.element){var a=
+this.getPanes();a&&a.overlayMouseTarget.appendChild(this.element)}}draw(){if(this.element){var a=this.getProjection().fromLatLngToDivPixel(this.getPosition());if(a){this.element.style.position="absolute";let b=this.element.offsetHeight;var c=this.element.offsetWidth;switch(this.opts.anchorPoint){case "TOP_CENTER":c=a.x-c/2;a=a.y;break;case "BOTTOM_CENTER":c=a.x-c/2;a=a.y-b;break;case "LEFT_CENTER":c=a.x;a=a.y-b/2;break;case "RIGHT_CENTER":c=a.x-c;a=a.y-b/2;break;case "TOP_LEFT":c=a.x;a=a.y;break;
+case "TOP_RIGHT":c=a.x-c;a=a.y;break;case "BOTTOM_LEFT":c=a.x;a=a.y-b;break;case "BOTTOM_RIGHT":c=a.x-c;a=a.y-b;break;default:c=a.x-c/2,a=a.y-b/2}this.element.style.left=c+"px";this.element.style.top=a+"px";this.element.style.transform=`translateX(${this.opts.offsetX||0}px) translateY(${this.opts.offsetY||0}px)`;this.opts.zIndex&&(this.element.style.zIndex=this.opts.zIndex.toString())}}}onRemove(){this.element&&this.element.remove()}setOptions(a){this.opts=a;this.draw()}}}let mapEvents="bounds_changed center_changed click dblclick drag dragend dragstart heading_changed idle maptypeid_changed mousemove mouseout mouseover projection_changed resize rightclick tilesloaded tilt_changed zoom_changed".split(" ");
+var _sfc_main$3=vue.defineComponent({props:{apiKey:{type:String,default:""},version:{type:String,default:"weekly"},libraries:{type:Array,default:()=>["places"]},region:{type:String,required:!1},language:{type:String,required:!1},backgroundColor:{type:String,required:!1},center:{type:Object,default:()=>({lat:0,lng:0})},clickableIcons:{type:Boolean,required:!1,default:void 0},controlSize:{type:Number,required:!1},disableDefaultUi:{type:Boolean,required:!1,default:void 0},disableDoubleClickZoom:{type:Boolean,
 required:!1,default:void 0},draggable:{type:Boolean,required:!1,default:void 0},draggableCursor:{type:String,required:!1},draggingCursor:{type:String,required:!1},fullscreenControl:{type:Boolean,required:!1,default:void 0},fullscreenControlPosition:{type:String,required:!1},gestureHandling:{type:String,required:!1},heading:{type:Number,required:!1},keyboardShortcuts:{type:Boolean,required:!1,default:void 0},mapTypeControl:{type:Boolean,required:!1,default:void 0},mapTypeControlOptions:{type:Object,
-required:!1},mapTypeId:{type:[Number,String],required:!1},maxZoom:{type:Number,required:!1},minZoom:{type:Number,required:!1},noClear:{type:Boolean,required:!1,default:void 0},panControl:{type:Boolean,required:!1,default:void 0},panControlPosition:{type:String,required:!1},restriction:{type:Object,required:!1},rotateControl:{type:Boolean,required:!1,default:void 0},rotateControlPosition:{type:String,required:!1},scaleControl:{type:Boolean,required:!1,default:void 0},scaleControlStyle:{type:Number,
-required:!1},scrollwheel:{type:Boolean,required:!1,default:void 0},streetView:{type:Object,required:!1},streetViewControl:{type:Boolean,required:!1,default:void 0},streetViewControlPosition:{type:String,required:!1},styles:{type:Array,required:!1},tilt:{type:Number,required:!1},zoom:{type:Number,required:!1},zoomControl:{type:Boolean,required:!1,default:void 0},zoomControlPosition:{type:String,required:!1}},emits:mapEvents,setup(a,{emit:b}){let c=vue.ref(null),d=vue.ref(!1),e=vue.ref(null),g=vue.ref(null),
-f=vue.ref(!1);vue.provide(mapSymbol,e);vue.provide(apiSymbol,g);vue.provide(mapTilesLoadedSymbol,f);let k=()=>{const b={...a};Object.keys(b).forEach(a=>{void 0===b[a]&&delete b[a]});var c=a=>{var b;return a?{position:null===(b=g.value)||void 0===b?void 0:b.ControlPosition[a]}:{}};c={scaleControlOptions:a.scaleControlStyle?{style:a.scaleControlStyle}:{},panControlOptions:c(a.panControlPosition),zoomControlOptions:c(a.zoomControlPosition),rotateControlOptions:c(a.rotateControlPosition),streetViewControlOptions:c(a.streetViewControlPosition),
-fullscreenControlOptions:c(a.fullscreenControlPosition),disableDefaultUI:a.disableDefaultUi};return{...b,...c}},l=vue.watch([g,e],([a,b])=>{a&&b&&(a.event.addListenerOnce(b,"tilesloaded",()=>{f.value=!0}),setTimeout(l,0))},{immediate:!0}),h=()=>{try{const {apiKey:b,region:c,version:d,language:e,libraries:f}=a;loaderInstance.value=new Loader({apiKey:b,region:c,version:d,language:e,libraries:f})}catch(m){console.error(m)}};vue.onMounted(()=>{h();loaderInstance.value.load().then(()=>{g.value=google.maps;
-e.value=new google.maps.Map(c.value,k());mapEvents.forEach(a=>{var c;null===(c=e.value)||void 0===c?void 0:c.addListener(a,c=>b(a,c))});d.value=!0;let f=Object.keys(a).filter(a=>!["center","zoom"].includes(a)).map(b=>vue.toRef(a,b));vue.watch([()=>a.center,()=>a.zoom,...f],([a,b],[c,d])=>{var f,h,g;let {center:m,zoom:l,...n}=k();null===(f=e.value)||void 0===f?void 0:f.setOptions(n);void 0!==b&&b!==d&&(null===(h=e.value)||void 0===h?void 0:h.setZoom(b));b=!c||a.lng!==c.lng||a.lat!==c.lat;a&&b&&(null===
-(g=e.value)||void 0===g?void 0:g.panTo(a))})})});vue.onBeforeUnmount(()=>{var a;f.value=!1;e.value&&(null===(a=g.value)||void 0===a?void 0:a.event.clearInstanceListeners(e.value))});return{mapRef:c,ready:d,map:e,api:g,mapTilesLoaded:f}}});
-function styleInject(a,b){void 0===b&&(b={});b=b.insertAt;if(a&&"undefined"!==typeof document){var c=document.head||document.getElementsByTagName("head")[0],d=document.createElement("style");d.type="text/css";"top"===b?c.firstChild?c.insertBefore(d,c.firstChild):c.appendChild(d):c.appendChild(d);d.styleSheet?d.styleSheet.cssText=a:d.appendChild(document.createTextNode(a))}}var css_248z$1="\n.mapdiv[data-v-177d06e3] {\n  width: 100%;\n  height: 100%;\n}\n";styleInject(css_248z$1);let _withId$1=vue.withScopeId("data-v-177d06e3");
-vue.pushScopeId("data-v-177d06e3");let _hoisted_1$2={ref:"mapRef",class:"mapdiv"};vue.popScopeId();let _sfc_render$2=_withId$1((a,b,c,d,e,g)=>(vue.openBlock(),vue.createBlock("div",null,[vue.createVNode("div",_hoisted_1$2,null,512),vue.renderSlot(a.$slots,"default",{ready:a.ready,map:a.map,api:a.api,mapTilesLoaded:a.mapTilesLoaded},void 0,!0)])));_sfc_main$2.render=_sfc_render$2;_sfc_main$2.__scopeId="data-v-177d06e3";
-let useSetupMapComponent=(a,b,c,d)=>{let e=null;const g=vue.ref(null),f=vue.inject(mapSymbol,vue.ref()),k=vue.inject(apiSymbol,vue.ref()),l=vue.inject(markerClusterSymbol,vue.ref()),h=vue.computed(()=>!!(l.value&&k.value&&e instanceof k.value.Marker));vue.watch([f,c],(m,[n,r])=>{var q,p,t;m=JSON.stringify(c.value)!==JSON.stringify(r)||f.value!==n;f.value&&k.value&&m&&(e?(e.setOptions(c.value),h.value&&(null===(q=l.value)||void 0===q?void 0:q.removeMarker(e),null===(p=l.value)||void 0===p?void 0:p.addMarker(e))):
-(g.value="Marker"===a?e=new k.value[a](c.value):e=new k.value[a]({...c.value,map:f.value}),h.value?null===(t=l.value)||void 0===t?void 0:t.addMarker(e):e.setMap(f.value),b.forEach(a=>{null===e||void 0===e?void 0:e.addListener(a,b=>d(a,b))})))},{immediate:!0});vue.onBeforeUnmount(()=>{var a,b;e&&(null===(a=k.value)||void 0===a?void 0:a.event.clearInstanceListeners(e),h.value?null===(b=l.value)||void 0===b?void 0:b.removeMarker(e):e.setMap(null))});return g},markerEvents="animation_changed click dblclick rightclick dragstart dragend drag mouseover mousedown mouseout mouseup draggable_changed clickable_changed contextmenu cursor_changed flat_changed rightclick zindex_changed icon_changed position_changed shape_changed title_changed visible_changed".split(" ");
+required:!1},mapTypeId:{type:[Number,String],required:!1},mapId:{type:String,required:!1},maxZoom:{type:Number,required:!1},minZoom:{type:Number,required:!1},noClear:{type:Boolean,required:!1,default:void 0},panControl:{type:Boolean,required:!1,default:void 0},panControlPosition:{type:String,required:!1},restriction:{type:Object,required:!1},rotateControl:{type:Boolean,required:!1,default:void 0},rotateControlPosition:{type:String,required:!1},scaleControl:{type:Boolean,required:!1,default:void 0},
+scaleControlStyle:{type:Number,required:!1},scrollwheel:{type:Boolean,required:!1,default:void 0},streetView:{type:Object,required:!1},streetViewControl:{type:Boolean,required:!1,default:void 0},streetViewControlPosition:{type:String,required:!1},styles:{type:Array,required:!1},tilt:{type:Number,required:!1},zoom:{type:Number,required:!1},zoomControl:{type:Boolean,required:!1,default:void 0},zoomControlPosition:{type:String,required:!1}},emits:mapEvents,setup(a,{emit:b}){let c=vue.ref(),d=vue.ref(!1),
+e=vue.ref(),g=vue.ref(),f=vue.ref(!1);vue.provide(mapSymbol,e);vue.provide(apiSymbol,g);vue.provide(mapTilesLoadedSymbol,f);let k=()=>{const b={...a};Object.keys(b).forEach(a=>{void 0===b[a]&&delete b[a]});var c=a=>{var b;return a?{position:null===(b=g.value)||void 0===b?void 0:b.ControlPosition[a]}:{}};c={scaleControlOptions:a.scaleControlStyle?{style:a.scaleControlStyle}:{},panControlOptions:c(a.panControlPosition),zoomControlOptions:c(a.zoomControlPosition),rotateControlOptions:c(a.rotateControlPosition),
+streetViewControlOptions:c(a.streetViewControlPosition),fullscreenControlOptions:c(a.fullscreenControlPosition),disableDefaultUI:a.disableDefaultUi};return{...b,...c}},l=vue.watch([g,e],([a,b])=>{a&&b&&(a.event.addListenerOnce(b,"tilesloaded",()=>{f.value=!0}),setTimeout(l,0))},{immediate:!0}),h=()=>{try{const {apiKey:b,region:c,version:d,language:e,libraries:f}=a;loaderInstance.value=new Loader({apiKey:b,region:c,version:d,language:e,libraries:f})}catch(m){console.error(m)}};vue.onMounted(()=>{h();
+loaderInstance.value.load().then(()=>{g.value=vue.markRaw(google.maps);e.value=vue.markRaw(new google.maps.Map(c.value,k()));var f=createCustomMarkerClass(g.value);g.value[customMarkerClassSymbol]=f;mapEvents.forEach(a=>{var c;null===(c=e.value)||void 0===c?void 0:c.addListener(a,c=>b(a,c))});d.value=!0;f=Object.keys(a).filter(a=>!["center","zoom"].includes(a)).map(b=>vue.toRef(a,b));vue.watch([()=>a.center,()=>a.zoom,...f],([a,b],[c,d])=>{var f,g,h;let {center:m,zoom:l,...n}=k();null===(f=e.value)||
+void 0===f?void 0:f.setOptions(n);void 0!==b&&b!==d&&(null===(g=e.value)||void 0===g?void 0:g.setZoom(b));b=!c||a.lng!==c.lng||a.lat!==c.lat;a&&b&&(null===(h=e.value)||void 0===h?void 0:h.panTo(a))})})});vue.onBeforeUnmount(()=>{var a;f.value=!1;e.value&&(null===(a=g.value)||void 0===a?void 0:a.event.clearInstanceListeners(e.value))});return{mapRef:c,ready:d,map:e,api:g,mapTilesLoaded:f}}});
+function styleInject(a,b){void 0===b&&(b={});b=b.insertAt;if(a&&"undefined"!==typeof document){var c=document.head||document.getElementsByTagName("head")[0],d=document.createElement("style");d.type="text/css";"top"===b?c.firstChild?c.insertBefore(d,c.firstChild):c.appendChild(d):c.appendChild(d);d.styleSheet?d.styleSheet.cssText=a:d.appendChild(document.createTextNode(a))}}var css_248z$2="\n.mapdiv[data-v-177d06e3] {\n  width: 100%;\n  height: 100%;\n}\n";styleInject(css_248z$2);let _withId$2=vue.withScopeId("data-v-177d06e3");
+vue.pushScopeId("data-v-177d06e3");let _hoisted_1$2={ref:"mapRef",class:"mapdiv"};vue.popScopeId();let _sfc_render$3=_withId$2((a,b,c,d,e,g)=>(vue.openBlock(),vue.createBlock("div",null,[vue.createVNode("div",_hoisted_1$2,null,512),vue.renderSlot(a.$slots,"default",{ready:a.ready,map:a.map,api:a.api,mapTilesLoaded:a.mapTilesLoaded},void 0,!0)])));_sfc_main$3.render=_sfc_render$3;_sfc_main$3.__scopeId="data-v-177d06e3";
+let isMarkerCtorKey=a=>"Marker"===a,isCustomMarkerCtorKey=a=>a===customMarkerClassSymbol,useSetupMapComponent=(a,b,c,d)=>{const e=vue.ref(),g=vue.inject(mapSymbol,vue.ref()),f=vue.inject(apiSymbol,vue.ref()),k=vue.inject(markerClusterSymbol,vue.ref()),l=vue.computed(()=>!!(k.value&&f.value&&(e.value instanceof f.value.Marker||e.value instanceof f.value[customMarkerClassSymbol])));vue.watch([g,c],(h,[m,n])=>{var q,r,p;h=JSON.stringify(c.value)!==JSON.stringify(n)||g.value!==m;g.value&&f.value&&h&&
+(e.value?(e.value.setOptions(c.value),l.value&&(null===(q=k.value)||void 0===q?void 0:q.removeMarker(e.value),null===(r=k.value)||void 0===r?void 0:r.addMarker(e.value))):(isMarkerCtorKey(a)?e.value=vue.markRaw(new f.value[a](c.value)):isCustomMarkerCtorKey(a)?e.value=vue.markRaw(new f.value[a](c.value)):e.value=vue.markRaw(new f.value[a]({...c.value,map:g.value})),l.value?null===(p=k.value)||void 0===p?void 0:p.addMarker(e.value):e.value.setMap(g.value),b.forEach(a=>{var b;null===(b=e.value)||void 0===
+b?void 0:b.addListener(a,b=>d(a,b))})))},{immediate:!0});vue.onBeforeUnmount(()=>{var a,b;e.value&&(null===(a=f.value)||void 0===a?void 0:a.event.clearInstanceListeners(e.value),l.value?null===(b=k.value)||void 0===b?void 0:b.removeMarker(e.value):e.value.setMap(null))});return e},markerEvents="animation_changed click dblclick rightclick dragstart dragend drag mouseover mousedown mouseout mouseup draggable_changed clickable_changed contextmenu cursor_changed flat_changed rightclick zindex_changed icon_changed position_changed shape_changed title_changed visible_changed".split(" ");
 var Marker=vue.defineComponent({name:"Marker",props:{options:{type:Object,required:!0}},emits:markerEvents,setup(a,{emit:b,expose:c,slots:d}){a=vue.toRef(a,"options");b=useSetupMapComponent("Marker",markerEvents,a,b);vue.provide(markerSymbol,b);c({marker:b});return()=>{var a;return null===(a=d.default)||void 0===a?void 0:a.call(d)}}}),Polyline=vue.defineComponent({name:"Polyline",props:{options:{type:Object,required:!0}},emits:polylineEvents,setup(a,{emit:b}){a=vue.toRef(a,"options");return{polyline:useSetupMapComponent("Polyline",
 polylineEvents,a,b)}},render:()=>null}),Polygon=vue.defineComponent({name:"Polygon",props:{options:{type:Object,required:!0}},emits:polylineEvents,setup(a,{emit:b}){a=vue.toRef(a,"options");return{polygon:useSetupMapComponent("Polygon",polylineEvents,a,b)}},render:()=>null});let rectangleEvents=polylineEvents.concat(["bounds_changed"]);
 var Rectangle=vue.defineComponent({name:"Rectangle",props:{options:{type:Object,required:!0}},emits:rectangleEvents,setup(a,{emit:b}){a=vue.toRef(a,"options");return{rectangle:useSetupMapComponent("Rectangle",rectangleEvents,a,b)}},render:()=>null});let circleEvents=polylineEvents.concat(["center_changed","radius_changed"]);
-var Circle=vue.defineComponent({name:"Circle",props:{options:{type:Object,required:!0}},emits:circleEvents,setup(a,{emit:b}){a=vue.toRef(a,"options");return{circle:useSetupMapComponent("Circle",circleEvents,a,b)}},render:()=>null}),_sfc_main$1=vue.defineComponent({props:{position:{type:String,required:!0},index:{type:Number,default:1}},emits:["content:loaded"],setup(a,{emit:b}){let c=vue.ref(null),d=vue.inject(mapSymbol,vue.ref()),e=vue.inject(apiSymbol,vue.ref()),g=vue.inject(mapTilesLoadedSymbol,
+var Circle=vue.defineComponent({name:"Circle",props:{options:{type:Object,required:!0}},emits:circleEvents,setup(a,{emit:b}){a=vue.toRef(a,"options");return{circle:useSetupMapComponent("Circle",circleEvents,a,b)}},render:()=>null}),_sfc_main$2=vue.defineComponent({props:{position:{type:String,required:!0},index:{type:Number,default:1}},emits:["content:loaded"],setup(a,{emit:b}){let c=vue.ref(null),d=vue.inject(mapSymbol,vue.ref()),e=vue.inject(apiSymbol,vue.ref()),g=vue.inject(mapTilesLoadedSymbol,
 vue.ref(!1)),f=vue.ref(!1),k=vue.watch([g,e,c],([c,d,e])=>{d&&c&&e&&(l(a.position),f.value=!0,b("content:loaded"),setTimeout(k,0))},{immediate:!0}),l=a=>{d.value&&e.value&&c.value&&d.value.controls[e.value.ControlPosition[a]].push(c.value)},h=a=>{if(d.value&&e.value){let b=null;a=e.value.ControlPosition[a];d.value.controls[a].forEach((a,d)=>{a===c.value&&(b=d)});null!==b&&d.value.controls[a].removeAt(b)}};vue.onBeforeUnmount(()=>h(a.position));vue.watch(()=>a.position,(a,b)=>{h(b);l(a)});vue.watch(()=>
-a.index,b=>{b&&c.value&&(c.value.index=a.index)});return{controlRef:c,showContent:f}}});let _hoisted_1$1={ref:"controlRef"};function _sfc_render$1(a,b,c,d,e,g){return vue.openBlock(),vue.createBlock(vue.Fragment,null,[vue.createCommentVNode("\n    v-show must be used instead of v-if otherwise there\n    would be no rendered content pushed to the map controls\n  "),vue.withDirectives(vue.createVNode("div",_hoisted_1$1,[vue.renderSlot(a.$slots,"default")],512),[[vue.vShow,a.showContent]])],2112)}
-_sfc_main$1.render=_sfc_render$1;let infoWindowEvents="closeclick content_changed domready position_changed visible zindex_changed".split(" ");
-var _sfc_main=vue.defineComponent({props:{options:{type:Object,default:()=>({})}},emits:infoWindowEvents,setup(a,{slots:b,emit:c}){let d,e=vue.ref(),g=vue.ref(),f=vue.inject(mapSymbol,vue.ref()),k=vue.inject(apiSymbol,vue.ref()),l=vue.inject(markerSymbol,vue.ref()),h,m=vue.computed(()=>{var a;return null===(a=b.default)||void 0===a?void 0:a.call(b).some(a=>a.type!==vue.Comment)});vue.onMounted(()=>{vue.watch([f,()=>a.options],([,a],[b,q])=>{b=JSON.stringify(a)!==JSON.stringify(q)||f.value!==b;f.value&&
-k.value&&b&&(d?(d.setOptions({...a,content:m.value?g.value:a.content}),l.value||d.open({map:f.value})):(e.value=d=new k.value.InfoWindow({...a,content:m.value?g.value:a.content}),l.value?h=l.value.addListener("click",()=>{d.open({map:f.value,anchor:l.value})}):d.open({map:f.value}),infoWindowEvents.forEach(a=>{null===d||void 0===d?void 0:d.addListener(a,b=>c(a,b))})))},{immediate:!0})});vue.onBeforeUnmount(()=>{var a;h&&h.remove();d&&(null===(a=k.value)||void 0===a?void 0:a.event.clearInstanceListeners(d),
-d.close())});return{infoWindow:e,infoWindowRef:g,hasSlotContent:m,anchor:l}}}),css_248z="\n.info-window-content[data-v-5b373d6e] {\n  display: none;\n}\n.mapdiv .info-window-content[data-v-5b373d6e] {\n  display: block;\n}\n";styleInject(css_248z);let _withId=vue.withScopeId("data-v-5b373d6e");vue.pushScopeId("data-v-5b373d6e");let _hoisted_1={key:0,ref:"infoWindowRef",class:"info-window-content"};vue.popScopeId();
-let _sfc_render=_withId((a,b,c,d,e,g)=>a.hasSlotContent?(vue.openBlock(),vue.createBlock("div",_hoisted_1,[vue.renderSlot(a.$slots,"default",{},void 0,!0)],512)):vue.createCommentVNode("v-if",!0));_sfc_main.render=_sfc_render;_sfc_main.__scopeId="data-v-5b373d6e";function sortKD(a,b,c,d,e,g){if(!(e-d<=c)){var f=d+e>>1;select(a,b,f,d,e,g%2);sortKD(a,b,c,d,f-1,g+1);sortKD(a,b,c,f+1,e,g+1)}}
+a.index,b=>{b&&c.value&&(c.value.index=a.index)});return{controlRef:c,showContent:f}}});let _hoisted_1$1={ref:"controlRef"};function _sfc_render$2(a,b,c,d,e,g){return vue.openBlock(),vue.createBlock(vue.Fragment,null,[vue.createCommentVNode("\n    v-show must be used instead of v-if otherwise there\n    would be no rendered content pushed to the map controls\n  "),vue.withDirectives(vue.createVNode("div",_hoisted_1$1,[vue.renderSlot(a.$slots,"default")],512),[[vue.vShow,a.showContent]])],2112)}
+_sfc_main$2.render=_sfc_render$2;let infoWindowEvents="closeclick content_changed domready position_changed visible zindex_changed".split(" ");
+var _sfc_main$1=vue.defineComponent({props:{options:{type:Object,default:()=>({})}},emits:infoWindowEvents,setup(a,{slots:b,emit:c}){let d=vue.ref(),e=vue.ref(),g=vue.inject(mapSymbol,vue.ref()),f=vue.inject(apiSymbol,vue.ref()),k=vue.inject(markerSymbol,vue.ref()),l,h=vue.computed(()=>{var a;return null===(a=b.default)||void 0===a?void 0:a.call(b).some(a=>a.type!==vue.Comment)});vue.onMounted(()=>{vue.watch([g,()=>a.options],([,a],[b,q])=>{b=JSON.stringify(a)!==JSON.stringify(q)||g.value!==b;g.value&&
+f.value&&b&&(d.value?(d.value.setOptions({...a,content:h.value?e.value:a.content}),k.value||d.value.open({map:g.value})):(d.value=d.value=vue.markRaw(new f.value.InfoWindow({...a,content:h.value?e.value:a.content})),k.value?l=k.value.addListener("click",()=>{d.value&&d.value.open({map:g.value,anchor:k.value})}):d.value.open({map:g.value}),infoWindowEvents.forEach(a=>{var b;null===(b=d.value)||void 0===b?void 0:b.addListener(a,b=>c(a,b))})))},{immediate:!0})});vue.onBeforeUnmount(()=>{var a;l&&l.remove();
+d.value&&(null===(a=f.value)||void 0===a?void 0:a.event.clearInstanceListeners(d.value),d.value.close())});return{infoWindow:d,infoWindowRef:e,hasSlotContent:h}}}),css_248z$1="\n.info-window-content[data-v-5b373d6e] {\n  display: none;\n}\n.mapdiv .info-window-content[data-v-5b373d6e] {\n  display: inline-block;\n}\n";styleInject(css_248z$1);let _withId$1=vue.withScopeId("data-v-5b373d6e");vue.pushScopeId("data-v-5b373d6e");let _hoisted_1={key:0,ref:"infoWindowRef",class:"info-window-content"};vue.popScopeId();
+let _sfc_render$1=_withId$1((a,b,c,d,e,g)=>a.hasSlotContent?(vue.openBlock(),vue.createBlock("div",_hoisted_1,[vue.renderSlot(a.$slots,"default",{},void 0,!0)],512)):vue.createCommentVNode("v-if",!0));_sfc_main$1.render=_sfc_render$1;_sfc_main$1.__scopeId="data-v-5b373d6e";function sortKD(a,b,c,d,e,g){if(!(e-d<=c)){var f=d+e>>1;select(a,b,f,d,e,g%2);sortKD(a,b,c,d,f-1,g+1);sortKD(a,b,c,f+1,e,g+1)}}
 function select(a,b,c,d,e,g){for(;e>d;){if(600<e-d){var f=e-d+1,k=c-d+1,l=Math.log(f),h=.5*Math.exp(2*l/3);l=.5*Math.sqrt(l*h*(f-h)/f)*(0>k-f/2?-1:1);select(a,b,c,Math.max(d,Math.floor(c-k*h/f+l)),Math.min(e,Math.floor(c+(f-k)*h/f+l)),g)}f=b[2*c+g];k=d;h=e;swapItem(a,b,d,c);for(b[2*e+g]>f&&swapItem(a,b,d,e);k<h;){swapItem(a,b,k,h);k++;for(h--;b[2*k+g]<f;)k++;for(;b[2*h+g]>f;)h--}b[2*d+g]===f?swapItem(a,b,d,h):(h++,swapItem(a,b,h,e));h<=c&&(d=h+1);c<=h&&(e=h-1)}}
 function swapItem(a,b,c,d){swap(a,c,d);swap(b,2*c,2*d);swap(b,2*c+1,2*d+1)}function swap(a,b,c){let d=a[b];a[b]=a[c];a[c]=d}
-function range(a,b,c,d,e,g,f){let k=[0,a.length-1,0],l=[],h,m;for(;k.length;){var n=k.pop();let r=k.pop(),q=k.pop();if(r-q<=f){for(n=q;n<=r;n++)h=b[2*n],m=b[2*n+1],h>=c&&h<=e&&m>=d&&m<=g&&l.push(a[n]);continue}let p=Math.floor((q+r)/2);h=b[2*p];m=b[2*p+1];h>=c&&h<=e&&m>=d&&m<=g&&l.push(a[p]);let t=(n+1)%2;if(0===n?c<=h:d<=m)k.push(q),k.push(p-1),k.push(t);if(0===n?e>=h:g>=m)k.push(p+1),k.push(r),k.push(t)}return l}
-function within(a,b,c,d,e,g){let f=[0,a.length-1,0],k=[],l=e*e;for(;f.length;){var h=f.pop();let m=f.pop(),n=f.pop();if(m-n<=g){for(h=n;h<=m;h++)sqDist(b[2*h],b[2*h+1],c,d)<=l&&k.push(a[h]);continue}let r=Math.floor((n+m)/2),q=b[2*r],p=b[2*r+1];sqDist(q,p,c,d)<=l&&k.push(a[r]);let t=(h+1)%2;if(0===h?c-e<=q:d-e<=p)f.push(n),f.push(r-1),f.push(t);if(0===h?c+e>=q:d+e>=p)f.push(r+1),f.push(m),f.push(t)}return k}function sqDist(a,b,c,d){a-=c;b-=d;return a*a+b*b}let defaultGetX=a=>a[0],defaultGetY=a=>a[1];
+function range(a,b,c,d,e,g,f){let k=[0,a.length-1,0],l=[],h,m;for(;k.length;){var n=k.pop();let q=k.pop(),r=k.pop();if(q-r<=f){for(n=r;n<=q;n++)h=b[2*n],m=b[2*n+1],h>=c&&h<=e&&m>=d&&m<=g&&l.push(a[n]);continue}let p=Math.floor((r+q)/2);h=b[2*p];m=b[2*p+1];h>=c&&h<=e&&m>=d&&m<=g&&l.push(a[p]);let t=(n+1)%2;if(0===n?c<=h:d<=m)k.push(r),k.push(p-1),k.push(t);if(0===n?e>=h:g>=m)k.push(p+1),k.push(q),k.push(t)}return l}
+function within(a,b,c,d,e,g){let f=[0,a.length-1,0],k=[],l=e*e;for(;f.length;){var h=f.pop();let m=f.pop(),n=f.pop();if(m-n<=g){for(h=n;h<=m;h++)sqDist(b[2*h],b[2*h+1],c,d)<=l&&k.push(a[h]);continue}let q=Math.floor((n+m)/2),r=b[2*q],p=b[2*q+1];sqDist(r,p,c,d)<=l&&k.push(a[q]);let t=(h+1)%2;if(0===h?c-e<=r:d-e<=p)f.push(n),f.push(q-1),f.push(t);if(0===h?c+e>=r:d+e>=p)f.push(q+1),f.push(m),f.push(t)}return k}function sqDist(a,b,c,d){a-=c;b-=d;return a*a+b*b}let defaultGetX=a=>a[0],defaultGetY=a=>a[1];
 class KDBush{constructor(a,b=defaultGetX,c=defaultGetY,d=64,e=Float64Array){this.nodeSize=d;this.points=a;let g=this.ids=new (65536>a.length?Uint16Array:Uint32Array)(a.length);e=this.coords=new e(2*a.length);for(let d=0;d<a.length;d++)g[d]=d,e[2*d]=b(a[d]),e[2*d+1]=c(a[d]);sortKD(g,e,d,0,g.length-1,0)}range(a,b,c,d){return range(this.ids,this.coords,a,b,c,d,this.nodeSize)}within(a,b,c){return within(this.ids,this.coords,a,b,c,this.nodeSize)}}
 let defaultOptions={minZoom:0,maxZoom:16,minPoints:2,radius:40,extent:512,nodeSize:64,log:!1,generateId:!1,reduce:null,map:a=>a},fround=Math.fround||(a=>b=>{a[0]=+b;return a[0]})(new Float32Array(1));
 class Supercluster{constructor(a){this.options=extend$1(Object.create(defaultOptions),a);this.trees=Array(this.options.maxZoom+1)}load(a){let {log:b,minZoom:c,maxZoom:d,nodeSize:e}=this.options;b&&console.time("total time");var g=`prepare ${a.length} points`;b&&console.time(g);this.points=a;let f=[];for(let b=0;b<a.length;b++)a[b].geometry&&f.push(createPointCluster(a[b],b));this.trees[d+1]=new KDBush(f,getX,getY,e,Float32Array);b&&console.timeEnd(g);for(a=d;a>=c;a--)g=+Date.now(),f=this._cluster(f,
@@ -79,7 +83,9 @@ Infinity).map(a=>a.properties.marker),position:new google.maps.LatLng({lat:b,lng
 class MarkerClusterer extends OverlayViewSafe{constructor({map:a,markers:b=[],algorithm:c=new SuperClusterAlgorithm({}),renderer:d=new DefaultRenderer,onClusterClick:e=defaultOnClusterClickHandler}){super();this.markers=[...b];this.clusters=[];this.algorithm=c;this.renderer=d;this.onClusterClick=e;a&&this.setMap(a)}addMarker(a,b){this.markers.includes(a)||(this.markers.push(a),b||this.render())}addMarkers(a,b){a.forEach(a=>{this.addMarker(a,!0)});b||this.render()}removeMarker(a,b){let c=this.markers.indexOf(a);
 if(-1===c)return!1;a.setMap(null);this.markers.splice(c,1);b||this.render();return!0}removeMarkers(a,b){let c=!1;a.forEach(a=>{c=this.removeMarker(a,!0)||c});c&&!b&&this.render();return c}clearMarkers(a){this.markers.length=0;a||this.render()}render(){let a=this.getMap();if(a instanceof google.maps.Map&&this.getProjection()){google.maps.event.trigger(this,MarkerClustererEvents.CLUSTERING_BEGIN,this);let {clusters:b,changed:c}=this.algorithm.calculate({markers:this.markers,map:a,mapCanvasProjection:this.getProjection()});
 if(c||void 0==c)this.reset(),this.clusters=b,this.renderClusters();google.maps.event.trigger(this,MarkerClustererEvents.CLUSTERING_END,this)}}onAdd(){this.idleListener=this.getMap().addListener("idle",this.render.bind(this));this.render()}onRemove(){google.maps.event.removeListener(this.idleListener);this.reset()}reset(){this.markers.forEach(a=>a.setMap(null));this.clusters.forEach(a=>a.delete());this.clusters=[]}renderClusters(){let a=new ClusterStats(this.markers,this.clusters),b=this.getMap();
-this.clusters.forEach(c=>{1===c.markers.length?c.marker=c.markers[0]:(c.marker=this.renderer.render(c,a),this.onClusterClick&&c.marker.addListener("click",a=>{google.maps.event.trigger(this,MarkerClustererEvents.CLUSTER_CLICK,c);this.onClusterClick(a,c,b)}));c.marker.setMap(b)})}}let markerClusterEvents=["clusteringbegin","clusteringend","click"];
+this.clusters.forEach(c=>{1===c.markers.length?c.marker=c.markers[0]:(c.marker=this.renderer.render(c,a),this.onClusterClick&&c.marker.addListener("click",a=>{google.maps.event.trigger(this,MarkerClustererEvents.CLUSTER_CLICK,c);this.onClusterClick(a,c,b)}));c.marker.setMap(b)})}}let markerClusterEvents=Object.values(MarkerClustererEvents);
 var MarkerCluster=vue.defineComponent({name:"MarkerCluster",props:{options:{type:Object,default:()=>({})}},emits:markerClusterEvents,setup(a,{emit:b,expose:c,slots:d}){let e=vue.ref(),g=vue.inject(mapSymbol,vue.ref()),f=vue.inject(apiSymbol,vue.ref());vue.provide(markerClusterSymbol,e);vue.watch(g,()=>{g.value&&(e.value=vue.markRaw(new MarkerClusterer({map:g.value,...a.options})),markerClusterEvents.forEach(a=>{var c;null===(c=e.value)||void 0===c?void 0:c.addListener(a,c=>b(a,c))}))},{immediate:!0});
-vue.onBeforeUnmount(()=>{var a;e.value&&(null===(a=f.value)||void 0===a?void 0:a.event.clearInstanceListeners(e.value),e.value.clearMarkers(),e.value.setMap(null))});c({markerCluster:e});return()=>{var a;return null===(a=d.default)||void 0===a?void 0:a.call(d)}}});exports.Circle=Circle;exports.CustomControl=_sfc_main$1;exports.GoogleMap=_sfc_main$2;exports.InfoWindow=_sfc_main;exports.Marker=Marker;exports.MarkerCluster=MarkerCluster;exports.Polygon=Polygon;exports.Polyline=Polyline;
-exports.Rectangle=Rectangle
+vue.onBeforeUnmount(()=>{var a;e.value&&(null===(a=f.value)||void 0===a?void 0:a.event.clearInstanceListeners(e.value),e.value.clearMarkers(),e.value.setMap(null))});c({markerCluster:e});return()=>{var a;return null===(a=d.default)||void 0===a?void 0:a.call(d)}}}),_sfc_main=vue.defineComponent({props:{options:{type:Object,required:!0}},setup(a,{slots:b,emit:c}){let d=vue.ref(),e=vue.ref(),g=vue.computed(()=>{var a;return null===(a=b.default)||void 0===a?void 0:a.call(b).some(a=>a.type!==vue.Comment)}),
+f=vue.computed(()=>({...a.options,element:d.value}));vue.onMounted(()=>{e=useSetupMapComponent(customMarkerClassSymbol,[],f,c)});return{customMarkerRef:d,customMarker:e,hasSlotContent:g}}}),css_248z="\n.custom-marker-content[data-v-b9d5ec8a] {\n  display: none;\n}\n.mapdiv .custom-marker-content[data-v-b9d5ec8a] {\n  display: inline-block;\n}\n";styleInject(css_248z);
+let _withId=vue.withScopeId("data-v-b9d5ec8a"),_sfc_render=_withId((a,b,c,d,e,g)=>a.hasSlotContent?(vue.openBlock(),vue.createBlock("div",{key:0,ref:"customMarkerRef",class:"custom-marker-content",style:{cursor:a.$attrs.onClick?"pointer":void 0}},[vue.renderSlot(a.$slots,"default",{},void 0,!0),vue.renderSlot(a.$slots,"info-windows",{},void 0,!0)],4)):vue.createCommentVNode("v-if",!0));_sfc_main.render=_sfc_render;_sfc_main.__scopeId="data-v-b9d5ec8a";exports.Circle=Circle;exports.CustomControl=_sfc_main$2;
+exports.CustomMarker=_sfc_main;exports.GoogleMap=_sfc_main$3;exports.InfoWindow=_sfc_main$1;exports.Marker=Marker;exports.MarkerCluster=MarkerCluster;exports.Polygon=Polygon;exports.Polyline=Polyline;exports.Rectangle=Rectangle