From ca79bf750116899025443496e3d8af7327bff7d6 Mon Sep 17 00:00:00 2001
From: Fawad Mirzad <mirzad@arndtteunissen.de>
Date: Mon, 19 Oct 2020 17:43:09 +0200
Subject: [PATCH] Improve marker and map components

---
 components/Map.vue            |  7 ++++++-
 components/Marker.vue         | 37 +++++++++++++++++++++++------------
 docs/src/components/marker.md | 33 +++++++++++++++++++++++++++++++
 utils/center-markers.js       | 13 ++++++++++++
 4 files changed, 76 insertions(+), 14 deletions(-)
 create mode 100755 docs/src/components/marker.md
 create mode 100644 utils/center-markers.js

diff --git a/components/Map.vue b/components/Map.vue
index 815c1f1..26267f9 100644
--- a/components/Map.vue
+++ b/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;
     });
 
diff --git a/components/Marker.vue b/components/Marker.vue
index 21e86b8..2c20265 100644
--- a/components/Marker.vue
+++ b/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)
+        }
       });
     }
 
diff --git a/docs/src/components/marker.md b/docs/src/components/marker.md
new file mode 100755
index 0000000..e597a99
--- /dev/null
+++ b/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>
+```
diff --git a/utils/center-markers.js b/utils/center-markers.js
new file mode 100644
index 0000000..caaf74a
--- /dev/null
+++ b/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);
+    }
+}