cnx-public/vue-google-maps-community-fork
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve docs

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-14 07:25:55 +01:00
parent 1a83085a80
commit 43eca9dba7
10 changed files with 234 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/package-lock.json generated
View File

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

11
docs/src/.vuepress/config.js
View File

@@ -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',
]

17
docs/src/components/README.md
View File

@@ -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)

44
docs/src/components/cluster.md Normal file
View File

@@ -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>
```

17
docs/src/components/introduction.md
View File

@@ -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)

2
docs/src/components/polygon.md Normal file
View File

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

3
docs/src/components/rectangle.md Normal file
View File

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

54
docs/src/docs/README.md
View File

@@ -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
# 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>
```

68
docs/src/docs/getting-started.md
View File

@@ -1,38 +1,60 @@
# Install and configure
# Introduction
## Install
`@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
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
<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>
```

54
docs/src/docs/introduction.md Executable file → Normal file
View File

@@ -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
# 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>
```