From c4b05d252fd12cf35e9e05b4987310f14fa5b24b Mon Sep 17 00:00:00 2001
From: Fawad Mirzad <mirzad@arndtteunissen.de>
Date: Sun, 14 Feb 2021 10:11:35 +0100
Subject: [PATCH] Improve docs for markers

---
 docs/src/components/map.md    |  8 ++---
 docs/src/components/marker.md | 67 +++++++++++++++++++++--------------
 package.json                  |  2 +-
 3 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/docs/src/components/map.md b/docs/src/components/map.md
index 1960d62..58a1ba0 100644
--- a/docs/src/components/map.md
+++ b/docs/src/components/map.md
@@ -2,7 +2,7 @@
 
 ## Install
 
-This is the base Map component. If no props are provided, it shows an empty map component with default controls. 
+This is the base Map component. If no props are provided, it shows an empty map component with default controls.
 
 ```javascript
   <GoogleMap />
@@ -19,7 +19,7 @@ You can generate custom map styles at  [https://mapstyle.withgoogle.com/](https:
 ```
 
 ## Disable ui elements
-You can disable all ui components at once 
+You can disable all ui components at once
 ```javascript
   <GoogleMap
       :disableDefaultUI="true"
@@ -42,7 +42,7 @@ You can also disable specific UI components
 
 
 ## Access google maps instance
-You can easily access Map instance by injecting it in your component. 
+You can easily access Map instance by injecting it in your component.
 
 ```javascript
     const loadMap = inject(
@@ -74,4 +74,4 @@ export function addMyButton(map) {
 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv); // eslint-disable-line no-undef
 }
-```
\ No newline at end of file
+```
diff --git a/docs/src/components/marker.md b/docs/src/components/marker.md
index ba58042..6fd77f2 100644
--- a/docs/src/components/marker.md
+++ b/docs/src/components/marker.md
@@ -1,34 +1,49 @@
 # Marker
 
-## Install
-
-With marker you can show specific locations on the map
+With a marker, you can show specific locations on the map
 ```vue
-  <GoogleMap>
-    <Marker
-        :geoCoordinates="[
-          {
-            lat: 51.2432981,
-            lng: 6.7950981
-          }
-      ]"
+<template>
+  <GmapMap>
+    <GmapMarker
+      :key="index"
+      v-for="(m, index) in markers"
     />
-  </GoogleMap>
+  </GmapMap>
+</template>
+<script>
+export default {
+  name: 'App',
+  data() {
+    return {
+      markers: [
+        {
+          position: {
+            lat: 51.093048, lng: 6.842120
+          },
+        }
+      ]
+    }
+  },
+}
+</script>
+
 ```
 
-## Center markers automatically
-To center markers so that all the markers are visible, use:
+## Enable/Disable events
+You can enable or disable map events by passing props.
+
 ```vue
-  <GoogleMap
-    :centerGeoCoordinates="geoCoordinates">
-    <Marker
-        :centerAutomatically="false"
-        :geoCoordinates="[
-          {
-            lat: 51.2432981,
-            lng: 6.7950981
-          }
-      ]"
+<template>
+  <GmapMap
+    ref="myMarker"
+  >
+    <GmapMarker
+      :key="index"
+      v-for="(m, index) in markers"
+      :position="m.position"
+      :clickable="true"
+      :draggable="true"
     />
-  </GoogleMap>
-```
\ No newline at end of file
+  </GmapMap>
+</template>
+```
diff --git a/package.json b/package.json
index 352a0b9..5e2cc1f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fawmi/vue-google-maps",
   "description": "Google Map components for Vue.js 3",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "private": false,
   "main": "src/main.js",
   "keywords": [