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 13:33:59 +01:00
parent 16ad627d9b
commit 17ffd6d779
12 changed files with 14 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,22 +43,18 @@ module.exports = {
link: 'https://github.com/fawmi/vue-google-maps.git'
}
],
sidebarDepth: 0,
collapsable: false,
sidebar: [
{
title: 'Getting started',
path: '/docs/',
sidebarDepth: 0,
collapsable: false,
children: [
]
},
{
title: 'Components',
collapsable: false,
path: '/components/',
sidebarDepth: 0,
children: [
'/components/introduction',
'/components/map',
'/components/marker',
'/components/info-window',
@@ -69,7 +65,6 @@ module.exports = {
},
{
title: 'Advanced',
collapsable: false,
path: '/advanced/',
sidebarDepth: 0,
children: [

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

@@ -1,4 +1,5 @@
# Components
[[toc]]
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.

2
docs/src/components/cluster.md
View File

@@ -1,4 +1,6 @@
# Cluster
[[toc]]
## Cluster your markers
To cluster objects you simply wrap your markers with the cluster component.

2
docs/src/components/info-window.md
View File

@@ -1,4 +1,6 @@
# Info Window
[[toc]]
## Add info window to your components
You can create info window by passing custom HTML or Vue components as the child of `Marker` component.
```vue
<GMapMap>

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

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

2
docs/src/components/map.md
View File

@@ -1,5 +1,5 @@
# Map
[[toc]]
## Install
This is the base Map component. If no props are provided, it shows an empty map component with default controls.

2
docs/src/components/marker.md
View File

@@ -1,5 +1,7 @@
# Marker
[[toc]]
## Add marker to your components
With a marker, you can show specific locations on the map
```vue
<template>

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

@@ -1,2 +1,4 @@
# Polygon
[[toc]]
Polygon is a simple wrapper around google's polygon component.

1
docs/src/components/rectangle.md
View File

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

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

@@ -1,5 +1,5 @@
# Introduction
[[toc]]
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
The following components are currently supported:

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

@@ -1,60 +0,0 @@
# 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
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>
```

60
docs/src/docs/introduction.md
View File

@@ -1,60 +0,0 @@
# 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
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>
```