Improve docs

docs/src/components/README.md

@@ -1,10 +1,19 @@
-# List
+# Components
 
 `@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
 
-Currently `Map`, `Marker`, `InfoWindow`,  `Polygon` and `Rectangle` are supported.
+Currently `Map`, `Marker`, `InfoWindow`,  `Cluster`, `Polygon` and `Rectangle` are supported.
 
-Other components are still under development. 
+Checkout the docs page for each component to see how to use it.
 
+[Map](./map.md)
 
-Checkout getting started to read, how to install and use vue-google-maps
+[Marker](./marker.md)
+
+[InfoWindow](./info-window.md)
+
+[Cluster](./cluster.md)
+
+[Polygon](./polygon.md)
+
+[Rectangle](./rectangle.md)

docs/src/components/cluster.md

@@ -0,0 +1,44 @@
+# Cluster
+To cluster objects you simply wrap your markers with the cluster component.
+
+
+```vue
+<template>
+  <GmapMap
+      :center="center"
+      :zoom="7"
+      map-type-id="terrain"
+      style="width: 500px; height: 300px"
+  >
+    <GmapCluster>
+      <GmapMarker
+          :key="index"
+          v-for="(m, index) in markers"
+          :position="m.position"
+          :clickable="true"
+          :draggable="true"
+          @click="center=m.position"
+      />
+    </GmapCluster>
+  </GmapMap>
+</template>
+<script>
+export default {
+  name: 'App',
+  data() {
+    return {
+      center: {lat: 51.093048, lng: 6.842120},
+      markers: [
+        {
+          position: {
+            lat: 51.093048, lng: 6.842120
+          },
+        }
+        , // Along list of clusters
+      ]
+    }
+  }
+}
+</script>
+```
+

docs/src/components/introduction.md

@@ -1,10 +1,19 @@
-# Component list
+# Components
 
 `@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
 
-Currently `Map`, `Marker`, `InfoWindow`,  `Polygon` and `Rectangle` are supported.
+Currently `Map`, `Marker`, `InfoWindow`,  `Cluster`, `Polygon` and `Rectangle` are supported.
 
-Other components are still under development. 
+Checkout the docs page for each component to see how to use it.
 
+[Map](./map.md)
 
-Checkout getting started to read, how to install and use vue-google-maps
+[Marker](./marker.md)
+
+[InfoWindow](./info-window.md)
+
+[Cluster](./cluster.md)
+
+[Polygon](./polygon.md)
+
+[Rectangle](./rectangle.md)

docs/src/components/polygon.md

@@ -0,0 +1,2 @@
+# Polygon
+Polygon is a simple wrapper around google's polygon component.

docs/src/components/rectangle.md

@@ -0,0 +1,3 @@
+# Rectangle
+Polygon is a simple wrapper around google's polygon component.
+