Improve code

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fawmi/vue-google-maps",
   "description": "Google Map components for Vue.js 3",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "private": false,
   "main": "src/main.js",
   "keywords": [

src/components/cluster.vue

@@ -1,9 +1,12 @@
 <template>
-  <div><slot></slot></div>
+  <div>
+    <slot></slot>
+  </div>
 </template>
 <script>
 import MarkerClusterer from 'marker-clusterer-plus'
 import buildComponent from './build-component.js'
+
 const props = {
   maxZoom: {
     type: Number,
@@ -74,13 +77,9 @@ export default buildComponent({
   name: 'cluster',
   ctr: () => {
     if (typeof MarkerClusterer === 'undefined') {
-      /* eslint-disable no-console */
-      console.error(
-        'MarkerClusterer is not installed! require() it or include it from https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js'
-      )
-      throw new Error(
-        'MarkerClusterer is not installed! require() it or include it from https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js'
-      )
+      const errorMessage = 'MarkerClusterer is not installed!';
+      console.error(errorMessage);
+      throw new Error(errorMessage)
     }
     return MarkerClusterer
   },

src/components/infoWindow.vue

@@ -1,8 +1,6 @@
 <template>
-  <div>
   <div ref="infoWindow">
-      <slot> </slot>
-    </div>
+    <slot></slot>
   </div>
 </template>
 

src/components/marker.vue

@@ -1,3 +1,10 @@
+<template>
+  <div v-if="$slots.default">
+    <slot></slot>
+  </div>
+</template>
+<script>
+
 import buildComponent from './build-component.js'
 
 const props = {
@@ -71,18 +78,6 @@ const events = [
   'mouseout',
 ]
 
-/**
- * @class Marker
- *
- * Marker class with extra support for
- *
- * - Embedded info windows
- * - Clustered markers
- *
- * Support for clustered markers is for backward-compatability
- * reasons. Otherwise we should use a cluster-marker mixin or
- * subclass.
- */
 export default buildComponent({
   mappedProps: props,
   events,
@@ -94,18 +89,6 @@ export default buildComponent({
       default: null,
     },
   },
-
-  render(h) {
-    if (!this.$slots.default || this.$slots.default.length === 0) {
-      return ''
-    } else if (this.$slots.default.length === 1) {
-      // So that infowindows can have a marker parent
-      return this.$slots.default[0]
-    } else {
-      return h('div', this.$slots.default)
-    }
-  },
-  emits: ['center_changed', 'zoom_changed', 'bounds_changed'],
   unmounted() {
     if (!this.$markerObject) {
       return
@@ -136,3 +119,4 @@ export default buildComponent({
     }
   },
 })
+</script>

src/main.js

@@ -1,11 +1,11 @@
 import lazy from './utils/lazyValue'
 import { loadGMapApi } from './load-google-maps'
 import { createApp } from 'vue'
-import Marker from './components/marker'
 import Polyline from './components/polyline'
 import Polygon from './components/polygon'
 import Circle from './components/circle'
 import Rectangle from './components/rectangle'
+import Marker from './components/marker.vue'
 import GmapCluster from './components/cluster.vue'
 import InfoWindow from './components/infoWindow.vue'
 import Map from './components/map.vue'