Improve marker and map components

components/Map.vue

@@ -7,6 +7,7 @@
 <script>
 import { Loader } from "../utils/load-google-maps";
 import { ref, provide, inject } from "vue";
+import {fitMapToMarkers} from "../utils/center-markers";
 
 export default {
   props: {
@@ -26,6 +27,9 @@ export default {
     disableDefaultUI: {
       type: Boolean,
     },
+    geoCoordinates: {
+      default: [],
+    },
     options: {
       zoomControl: true,
       mapTypeControl: true,
@@ -71,9 +75,10 @@ export default {
         zoom: props.zoom,
         style: props.style,
         center: new google.maps.LatLng(38.423733, 27.142826),
-        mapTypeId: "terrain",
+        mapTypeId: props.mapTypeId,
         ...uiOptions
       });
+
       return map;
     });
 

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)
+        }
       });
     }