From a540d4668b8f1bfa46b3037a9e24b8754ebba775 Mon Sep 17 00:00:00 2001
From: Felix Ranesberger <52704891+felixranesberger@users.noreply.github.com>
Date: Thu, 6 Jul 2023 14:25:14 +0200
Subject: [PATCH 1/2] Add additional documentation to readme

I searched for a long time, to find out, how to center the markers on the map, without providing a map center location and a zoom. After finding out how it worked, I figured to extend the readme, so other users could find the information quicker.
---
 README.md | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/README.md b/README.md
index 1381f45..7333c62 100644
--- a/README.md
+++ b/README.md
@@ -127,6 +127,58 @@ export default {
 </script>
 ```
 
+## Center markers in the middle of the map
+
+If you want to zoom in on the map as far as you can, but still see all markers, reference this code snippet.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const markers = [
+  {
+    lat: 47.8557578,
+    lng: 12.1133382,
+  },
+  {
+    lat: 47.8570908,
+    lng: 12.1199985,
+  },
+  {
+    lat: 47.8568879,
+    lng: 12.1270439,
+  },
+];
+
+const googleMapRef = ref();
+
+/**
+ * Centers the map on the markers and zooms to fit the bounds.
+ */
+async function fitMarkerBounds() {
+  const googleMapInstance = await googleMapRef.value.$mapPromise;
+
+  const bounds = new window.google.maps.LatLngBounds();
+
+  markers.forEach((marker) => {
+    bounds.extend(marker);
+  });
+
+  googleMapInstance.fitBounds(bounds);
+}
+</script>
+
+<template>
+  <GMapMap ref="googleMapRef">
+    <GMapMarker
+        v-for="(marker, index) in markers"
+        :key="`map-marker-${index}`"
+        :position="marker"
+    />
+  </GMapMap>
+</template>
+```
+
 ### Cluster
 
 If you have too many markers, it is helpful to cluster markers. You can easily cluster markers by wrapping your markers with `GMapCluster` component.

From e3b743a2ef4cba1c4bc38fb68d3105a9ec30800f Mon Sep 17 00:00:00 2001
From: Felix Ranesberger <52704891+felixranesberger@users.noreply.github.com>
Date: Thu, 6 Jul 2023 14:29:47 +0200
Subject: [PATCH 2/2] Update README.md

---
 README.md | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 7333c62..139adaa 100644
--- a/README.md
+++ b/README.md
@@ -133,9 +133,9 @@ If you want to zoom in on the map as far as you can, but still see all markers,
 
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
-const markers = [
+const markers = ref([
   {
     lat: 47.8557578,
     lng: 12.1133382,
@@ -148,7 +148,7 @@ const markers = [
     lat: 47.8568879,
     lng: 12.1270439,
   },
-];
+]);
 
 const googleMapRef = ref();
 
@@ -160,12 +160,18 @@ async function fitMarkerBounds() {
 
   const bounds = new window.google.maps.LatLngBounds();
 
-  markers.forEach((marker) => {
+  markers.value.forEach((marker) => {
     bounds.extend(marker);
   });
 
   googleMapInstance.fitBounds(bounds);
 }
+
+// center markers on first render
+onMounted(fitMarkerBounds);
+
+// center markers, if they are adjusted
+watch(markers, fitMarkerBounds);
 </script>
 
 <template>
@@ -177,6 +183,7 @@ async function fitMarkerBounds() {
     />
   </GMapMap>
 </template>
+
 ```
 
 ### Cluster