Fix center maps not working properly

components/Map.vue

@@ -6,8 +6,8 @@
 
 <script>
 import { Loader } from "../utils/load-google-maps";
-import { ref, provide, inject } from "vue";
-import {fitMapToMarkers} from "../utils/center-markers";
+import { fitMapToMarkers } from "../utils/center-markers";
+import { ref, provide, watch, inject } from "vue";
 
 export default {
   props: {
@@ -21,22 +21,22 @@ export default {
     mapTypeId: {
       default: "terrain"
     },
-    style: {
-      default: []
+    mapStyles: {
+      type: Array,
+      required: true
     },
-    disableDefaultUI: {
-      type: Boolean,
-    },
-    geoCoordinates: {
-      default: [],
+    centerGeoCoordinates: {
+      type: Array,
+      required: false
     },
     options: {
       zoomControl: true,
-      mapTypeControl: true,
-      scaleControl: true,
-      streetViewControl: true,
-      rotateControl: true,
+      mapTypeControl: false,
+      scaleControl: false,
+      streetViewControl: false,
+      rotateControl: false,
       fullscreenControl: true,
+      disableDefaultUI: false
     }
   },
   setup: function(props) {
@@ -46,9 +46,14 @@ export default {
         "apiKey"
     );
 
+    const mapIds = inject(
+        "mapIds"
+    );
+
     const mapsLoader = new Loader({
       apiKey: apiKey,
       version: "weekly",
+      mapIds: mapIds,
       libraries: [
         "places",
         "drawing",
@@ -58,35 +63,36 @@ export default {
       ]
     });
 
-    let uiOptions = {}
-
-    if(props.disableDefaultUI) {
-      uiOptions = {
-        disableDefaultUI: true
-      }
-    } else {
-      uiOptions = props.options
-    }
-
-    const additionalOptions = {...props.options};
+    const disableDefaultUi = props?.options?.disableDefaultUI ? true : false
 
     const mapPromise = mapsLoader.load().then(() => {
       const map = new google.maps.Map(mapContainer.value, {
         zoom: props.zoom,
-        style: props.style,
-        center: new google.maps.LatLng(38.423733, 27.142826),
-        mapTypeId: props.mapTypeId,
-        ...uiOptions
+        mapId: "889b7f2cfa338388",
+        center: new google.maps.LatLng(51.2228924, 6.788524),
+        disableDefaultUI: disableDefaultUi,
+        gestureHandling: "auto",
       });
 
+      if (props.centerGeoCoordinates && props.centerGeoCoordinates.length) {
+        fitMapToMarkers(props.centerGeoCoordinates, map);
+      }
+
       return map;
     });
 
     provide("mapPromise", mapPromise);
 
     return {
-      mapContainer
+      mapContainer,
+      mapPromise
     };
   }
 };
 </script>
+
+<style>
+#map {
+  height: 80vh;
+}
+</style>

components/Marker.vue

@@ -1,30 +1,20 @@
 <template>
-  <div>
-    <slot>marker</slot>
-    <div ref="commentContainerRef" v-if="defaultSlot" :is="defaultSlot">
-      <component :is="defaultSlot"></component>
-    </div>
-  </div>
-
+  <div>marker</div>
 </template>
 
 <script>
-import { inject, ref } from "vue";
-import {fitMapToMarkers} from "@fawmi/vue-google-maps/utils/center-markers";
+import { inject } from "vue";
 
-const commentContainerRef = ref(null);
 export default {
   props: {
-    geoCoordinates: {
-      required: true,
-      default: []
+    location: {
+      required: true
     },
-    centerAutomatically: {
-      required: false,
-      default: false
+    icon: {
+      required: false
     }
   },
-  setup(props, { slots }) {
+  setup(props) {
     const mapPromise = inject(
         "mapPromise"
     );
@@ -32,33 +22,31 @@ export default {
     if (mapPromise) {
       mapPromise.then((googleMap) => {
         const infoWindow = new google.maps.InfoWindow();
-        props.geoCoordinates.forEach( geoCoordinate => {
-          let marker = new google.maps.Marker({
-            position: new google.maps.LatLng(
-                geoCoordinate.lat,
-                geoCoordinate.lng
-            ),
-            map: googleMap
-          });
 
-          marker.addListener("click", (event) => {
-            if (slots.default) {
-              infoWindow.setContent(commentContainerRef.value.innerHTML);
-              infoWindow.open(googleMap, marker);
-            }
-          });
+        const options = {
+          position: new google.maps.LatLng(
+              props.location.lat,
+              props.location.lng
+          ),
+          map: googleMap
+        };
+
+        if (props.icon) {
+          options.icon = props.icon
+        }
+
+        const marker = new google.maps.Marker({
+          ...options,
         });
 
-        if (props.centerAutomatically) {
-          fitMapToMarkers(props.geoCoordinates, googleMap)
-        }
+        marker.addListener("click", (event) => {
+          infoWindow.setContent(`hallo`);
+          infoWindow.open(googleMap, marker);
+        });
       });
     }
 
-    return {
-      defaultSlot: slots.default,
-      commentContainerRef
-    };
+    return {};
   }
 };
 </script>