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>

docs/src/components/map.md

@@ -38,4 +38,40 @@ You can also disable specific UI components
                       fullscreenControl: true,
                     }"
   />
+```
+
+
+## Access google maps instance
+You can easily access Map instance by injecting it in your component. 
+
+```javascript
+    const loadMap = inject(
+        "mapPromise"
+    );
+
+    loadMap.then(map=> {
+        console.log( {map})
+      })
+```
+
+
+## Add custom button
+You can use the map instance to add custom buttons to your map
+```js
+export function addMyButton(map) {
+    const controlDiv = document.createElement("div");
+    const controlUI = document.createElement("button");
+    controlUI.title = "Click to zoom the map";
+    controlDiv.appendChild(controlUI);
+    const controlText = document.createElement("div");
+    controlText.innerHTML = `Center`;
+    controlUI.appendChild(controlText);
+    controlUI.style.position = "relative"
+    controlUI.style.bottom = "80px"
+    controlUI.addEventListener("click", () => {
+        map.setZoom(map.getZoom() + 1);
+    });
+
+    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv); // eslint-disable-line no-undef
+}
 ```

docs/src/components/marker.md

@@ -19,7 +19,8 @@ With marker you can show specific locations on the map
 ## Center markers automatically
 To center markers so that all the markers are visible, use:
 ```vue
-  <GoogleMap>
+  <GoogleMap
+    :centerGeoCoordinates="geoCoordinates">
     <Marker
         :centerAutomatically="false"
         :geoCoordinates="[
@@ -30,4 +31,4 @@ To center markers so that all the markers are visible, use:
       ]"
     />
   </GoogleMap>
-```
+```

docs/src/docs/getting-started.md

@@ -29,3 +29,10 @@ app.use(googleMap, googleMapOption)
 app.mount('#app')
 
 ```
+
+## Options
+apiKey is required option to load maps, you may provide following additional options if you want.
+
+###`mapIds`
+Allows you to style the map using google cloud map styling
+

index.js

@@ -12,5 +12,6 @@ export default {
         app.component('Polygon', Polygon)
         app.component('Rectangle', Rectangle)
         app.provide('apiKey', options.apiKey)
+        app.provide('mapIds', options.mapIds)
     }
 }

utils/center-markers.js

@@ -6,7 +6,8 @@ export function fitMapToMarkers(geoCoordinates, mapInstance) {
         mapInstance.setZoom(16);
     } else if (geoCoordinates.length > 0) {
         geoCoordinates.forEach(geoCoordinate => {
-            bounds.extend({lat: geoCoordinate.position.lat, lng: geoCoordinate.position.lng});
+            if (geoCoordinate.lat && geoCoordinate.lng)
+                bounds.extend({lat: geoCoordinate.lat, lng: geoCoordinate.lng});
         });
         mapInstance.fitBounds(bounds);
     }