diff --git a/docs/package-lock.json b/docs/package-lock.json
index 8efc2d1..f81caa5 100644
--- a/docs/package-lock.json
+++ b/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,
diff --git a/docs/src/.vuepress/config.js b/docs/src/.vuepress/config.js
index 7b97d83..158750f 100755
--- a/docs/src/.vuepress/config.js
+++ b/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',
]
diff --git a/docs/src/components/README.md b/docs/src/components/README.md
index 43b674f..d4b98a7 100644
--- a/docs/src/components/README.md
+++ b/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
\ No newline at end of file
+[Marker](./marker.md)
+
+[InfoWindow](./info-window.md)
+
+[Cluster](./cluster.md)
+
+[Polygon](./polygon.md)
+
+[Rectangle](./rectangle.md)
diff --git a/docs/src/components/cluster.md b/docs/src/components/cluster.md
new file mode 100644
index 0000000..f4e19fe
--- /dev/null
+++ b/docs/src/components/cluster.md
@@ -0,0 +1,44 @@
+# Cluster
+To cluster objects you simply wrap your markers with the cluster component.
+
+
+```vue
+
+
+
+
+
+
+
+
+```
+
diff --git a/docs/src/components/introduction.md b/docs/src/components/introduction.md
index 9dbe5f5..d4b98a7 100755
--- a/docs/src/components/introduction.md
+++ b/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
\ No newline at end of file
+[Marker](./marker.md)
+
+[InfoWindow](./info-window.md)
+
+[Cluster](./cluster.md)
+
+[Polygon](./polygon.md)
+
+[Rectangle](./rectangle.md)
diff --git a/docs/src/components/polygon.md b/docs/src/components/polygon.md
new file mode 100644
index 0000000..07a6eee
--- /dev/null
+++ b/docs/src/components/polygon.md
@@ -0,0 +1,2 @@
+# Polygon
+Polygon is a simple wrapper around google's polygon component.
diff --git a/docs/src/components/rectangle.md b/docs/src/components/rectangle.md
new file mode 100644
index 0000000..8009a1e
--- /dev/null
+++ b/docs/src/components/rectangle.md
@@ -0,0 +1,3 @@
+# Rectangle
+Polygon is a simple wrapper around google's polygon component.
+
diff --git a/docs/src/docs/README.md b/docs/src/docs/README.md
index 604b485..0e4e27f 100644
--- a/docs/src/docs/README.md
+++ b/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
\ No newline at end of file
+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
+
+
+
+
+
+
+```
diff --git a/docs/src/docs/getting-started.md b/docs/src/docs/getting-started.md
index 4e0ef3a..0e4e27f 100644
--- a/docs/src/docs/getting-started.md
+++ b/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
-Here is a basic example
+## Basic usage
+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 App from './App.vue';
-
-const googleMapOption = {
- apiKey: 'here_comes_your_api_key',
-}
+import * as VueGoogleMaps from '@fawmi/vue-google-maps'
const app = createApp(App);
-
-app.use(googleMap, googleMapOption)
-app.mount('#app')
-
+app.use(VueGoogleMaps, {
+ load: {
+ key: 'YOUR_API_KEY_COMES_HERE',
+ },
+}).mount('#app')
```
-## Options
-apiKey is required option to load maps, you may provide following additional options if you want.
+## Use it anywhere in your components
-###`mapIds`
-Allows you to style the map using google cloud map styling
+```vue
+
+
+
+
+
+```
diff --git a/docs/src/docs/introduction.md b/docs/src/docs/introduction.md
old mode 100755
new mode 100644
index 604b485..0e4e27f
--- a/docs/src/docs/introduction.md
+++ b/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
\ No newline at end of file
+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
+
+
+
+
+
+
+```
diff --git a/readme.md b/readme.md
index 63028ad..98bc781 100644
--- a/readme.md
+++ b/readme.md
@@ -145,7 +145,7 @@ If you need to gain access to the `google` object, you can access it by getting
/>