Improve docs

docs/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "Vue-google-maps",
+  "name": "@fawmi/vue-google-maps-docs",
   "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,

docs/src/.vuepress/config.js

@@ -47,30 +47,31 @@ module.exports = {
       {
         title: 'Getting started',
         path: '/docs/',
-        sidebarDepth: 2,
+        sidebarDepth: 0,
         collapsable: false,
         children: [
-          '/docs/introduction',
-          '/docs/getting-started',
         ]
       },
       {
         title: 'Components',
         collapsable: false,
         path: '/components/',
-        sidebarDepth: 2,
+        sidebarDepth: 0,
         children: [
           '/components/introduction',
           '/components/map',
           '/components/marker',
           '/components/info-window',
+          '/components/cluster',
+          '/components/polygon',
+          '/components/rectangle',
         ]
       },
       {
         title: 'Advanced',
         collapsable: false,
         path: '/advanced/',
-        sidebarDepth: 2,
+        sidebarDepth: 0,
         children: [
           '/advanced/introduction',
         ]

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.
+

docs/src/docs/README.md

@@ -2,9 +2,59 @@
 
 `@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.
+The following components are currently supported:
 
-Other components are still under development. 
+`Map`, `Marker`, `Cluster`, `InfoWindow`, `Polygon`, `Rectangle`
 
 
-Checkout getting started to read, how to install and use vue-google-maps
+Checkout getting started to read, how to install and use vue-google-maps
+
+# Install and configure
+
+to install it via NPM
+```bash
+npm install -S @fawmi/vue-google-maps
+```
+
+## Basic usage
+You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
+
+##Configure Vue to use the Components
+
+Initialise the plugin in your `main.js`:
+```js
+import { createApp } from 'vue'
+import * as VueGoogleMaps from '@fawmi/vue-google-maps'
+
+const app = createApp(App);
+app.use(VueGoogleMaps, {
+    load: {
+        key: 'YOUR_API_KEY_COMES_HERE',
+    },
+}).mount('#app')
+```
+
+## Use it anywhere in your components
+
+```vue
+<template>
+  <GmapMap
+      :center="{lat: 51.093048, lng: 6.842120}"
+      :zoom="7"
+      map-type-id="terrain"
+      style="width: 100vw; height: 900px"
+  >
+  </GmapMap>
+</template>
+
+<script >
+export default {
+  name: 'App',
+  data() {
+    return {
+      center: {lat: 51.093048, lng: 6.842120},
+    }
+  }
+}
+</script>
+```

docs/src/docs/getting-started.md

@@ -1,38 +1,60 @@
+# Introduction
+
+`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
+
+The following components are currently supported:
+
+`Map`, `Marker`, `Cluster`, `InfoWindow`, `Polygon`, `Rectangle`
+
+
+Checkout getting started to read, how to install and use vue-google-maps
+
 # Install and configure
 
-## Install
+to install it via NPM
-
-to install it via NPM 
 ```bash
 npm install -S @fawmi/vue-google-maps
 ```
-You can also install via Yarn
-```bash
-yarn add @fawmi/vue-google-maps
-```
 
-## Example
+## Basic usage
-Here is a basic example 
+You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
 
-```javascript
+##Configure Vue to use the Components
+
+Initialise the plugin in your `main.js`:
+```js
 import { createApp } from 'vue'
-import googleMap from '@fawmi/vue-google-maps'
+import * as VueGoogleMaps from '@fawmi/vue-google-maps'
-import App from './App.vue';
-
-const googleMapOption = {
-    apiKey: 'here_comes_your_api_key',
-}
 
 const app = createApp(App);
-
+app.use(VueGoogleMaps, {
-app.use(googleMap, googleMapOption)
+    load: {
-app.mount('#app')
+        key: 'YOUR_API_KEY_COMES_HERE',
-
+    },
+}).mount('#app')
 ```
 
-## Options
+## Use it anywhere in your components
-apiKey is required option to load maps, you may provide following additional options if you want.
 
-###`mapIds`
+```vue
-Allows you to style the map using google cloud map styling
+<template>
+  <GmapMap
+      :center="{lat: 51.093048, lng: 6.842120}"
+      :zoom="7"
+      map-type-id="terrain"
+      style="width: 100vw; height: 900px"
+  >
+  </GmapMap>
+</template>
 
+<script >
+export default {
+  name: 'App',
+  data() {
+    return {
+      center: {lat: 51.093048, lng: 6.842120},
+    }
+  }
+}
+</script>
+```

docs/src/docs/introduction.md

@@ -2,9 +2,59 @@
 
 `@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.
+The following components are currently supported:
 
-Other components are still under development. 
+`Map`, `Marker`, `Cluster`, `InfoWindow`, `Polygon`, `Rectangle`
 
 
-Checkout getting started to read, how to install and use vue-google-maps
+Checkout getting started to read, how to install and use vue-google-maps
+
+# Install and configure
+
+to install it via NPM
+```bash
+npm install -S @fawmi/vue-google-maps
+```
+
+## Basic usage
+You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
+
+##Configure Vue to use the Components
+
+Initialise the plugin in your `main.js`:
+```js
+import { createApp } from 'vue'
+import * as VueGoogleMaps from '@fawmi/vue-google-maps'
+
+const app = createApp(App);
+app.use(VueGoogleMaps, {
+    load: {
+        key: 'YOUR_API_KEY_COMES_HERE',
+    },
+}).mount('#app')
+```
+
+## Use it anywhere in your components
+
+```vue
+<template>
+  <GmapMap
+      :center="{lat: 51.093048, lng: 6.842120}"
+      :zoom="7"
+      map-type-id="terrain"
+      style="width: 100vw; height: 900px"
+  >
+  </GmapMap>
+</template>
+
+<script >
+export default {
+  name: 'App',
+  data() {
+    return {
+      center: {lat: 51.093048, lng: 6.842120},
+    }
+  }
+}
+</script>
+```