Improve marker and map components

components/Marker.vue

@@ -4,11 +4,17 @@
 
 <script>
 import { inject } from "vue";
+import {fitMapToMarkers} from "@fawmi/vue-google-maps/utils/center-markers";
 
 export default {
   props: {
-    location: {
-      required: true
+    geoCoordinates: {
+      required: true,
+      default: []
+    },
+    centerAutomatically: {
+      required: false,
+      default: false
     }
   },
   setup(props) {
@@ -20,19 +26,24 @@ export default {
       mapPromise.then((googleMap) => {
         const infoWindow = new google.maps.InfoWindow();
 
-        console.log(props.location)
-        const marker = new google.maps.Marker({
-          position: new google.maps.LatLng(
-              props.location.lat,
-              props.location.lng
-          ),
-          map: googleMap
+        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) => {
+            infoWindow.setContent(`hallo`);
+            infoWindow.open(googleMap, marker);
+          });
         });
 
-        marker.addListener("click", (event) => {
-          infoWindow.setContent(`hallo`);
-          infoWindow.open(googleMap, marker);
-        });
+        if (props.centerAutomatically) {
+          fitMapToMarkers(props.geoCoordinates, googleMap)
+        }
       });
     }