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 />