Improve docs for markers

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
 }
-```
+```

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>
-```
+  </GmapMap>
+</template>
+```