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: {
+    geoCoordinates: {
-      required: true
+      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)
+        props.geoCoordinates.forEach(geoCoordinate=> {
-        const marker = new google.maps.Marker({
+          let marker = new google.maps.Marker({
-          position: new google.maps.LatLng(
+            position: new google.maps.LatLng(
-              props.location.lat,
+                geoCoordinate.lat,
-              props.location.lng
+                geoCoordinate.lng
-          ),
+            ),
-          map: googleMap
+            map: googleMap
+          });
+
+          marker.addListener("click", (event) => {
+            infoWindow.setContent(`hallo`);
+            infoWindow.open(googleMap, marker);
+          });
         });
 
-        marker.addListener("click", (event) => {
+        if (props.centerAutomatically) {
-          infoWindow.setContent(`hallo`);
+          fitMapToMarkers(props.geoCoordinates, googleMap)
-          infoWindow.open(googleMap, marker);
+        }
-        });
       });
     }
 

docs/src/components/marker.md

@@ -0,0 +1,33 @@
+# Marker
+
+## Install
+
+With marker you can show specific locations on the map
+```vue
+  <GoogleMap>
+    <Marker
+        :geoCoordinates="[
+          {
+            lat: 51.2432981,
+            lng: 6.7950981
+          }
+      ]"
+    />
+  </GoogleMap>
+```
+
+## Center markers automatically
+To center markers so that all the markers are visible, use:
+```vue
+  <GoogleMap>
+    <Marker
+        :centerAutomatically="false"
+        :geoCoordinates="[
+          {
+            lat: 51.2432981,
+            lng: 6.7950981
+          }
+      ]"
+    />
+  </GoogleMap>
+```

utils/center-markers.js

@@ -0,0 +1,13 @@
+export function fitMapToMarkers(geoCoordinates, mapInstance) {
+    /* eslint-disable no-undef */
+    const bounds = new google.maps.LatLngBounds();
+    if (geoCoordinates.length === 1) {
+        mapInstance.setCenter({lat: geoCoordinates[0].position.lat, lng: geoCoordinates[0].position.lng});
+        mapInstance.setZoom(16);
+    } else if (geoCoordinates.length > 0) {
+        geoCoordinates.forEach(geoCoordinate => {
+            bounds.extend({lat: geoCoordinate.position.lat, lng: geoCoordinate.position.lng});
+        });
+        mapInstance.fitBounds(bounds);
+    }
+}