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

Move docs to a separate repo to decrease main repo size

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-14 14:16:47 +01:00
parent 6264a0263e
commit 0046415061
20 changed files with 0 additions and 11502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/.gitignore vendored
View File

@@ -1,12 +0,0 @@
pids
logs
node_modules
npm-debug.log
coverage/
run
dist
.DS_Store
.nyc_output
.basement
config.local.js
basement_dist

10955
docs/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

19
docs/package.json
View File

@@ -1,19 +0,0 @@
{
"name": "@fawmi/vue-google-maps-docs",
"version": "0.6.2",
"description": "Google maps components for Vue.js",
"main": "index.js",
"authors": {
"name": "Fawad Mirzad",
"email": "hi@fawmi.com"
},
"repository": "https://github.com/fawmi/vue-google-maps.git",
"scripts": {
"dev": "vuepress dev src",
"build": "vuepress build src"
},
"license": "MIT",
"devDependencies": {
"vuepress": "^1.8.1"
}
}

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

@@ -1,65 +0,0 @@
const { description } = require('../../package.json')
module.exports = {
title: 'Vue 3 Google maps',
description: description,
base: '/',
head: [
['meta', { name: 'theme-color', content: '#000' }],
],
themeConfig: {
repo: 'fawmi/vue-google-maps',
editLinks: false,
docsDir: 'docs',
editLinkText: 'Edit on github',
lastUpdated: false,
logo: '/assets/logo.jpg',
nav: [
{
text: 'Docs',
link: '/docs/',
},
{
text: 'NPM',
link: 'https://www.npmjs.com/package/@fawmi/vue-google-maps'
}
],
sidebarDepth: 0,
collapsable: false,
sidebar: [
{
title: 'Getting started',
path: '/docs/',
},
{
title: 'Components',
collapsable: false,
path: '/components/',
children: [
'/components/map',
'/components/marker',
'/components/info-window',
'/components/cluster',
'/components/polygon',
'/components/rectangle',
]
},
{
title: 'Advanced',
path: '/advanced/',
sidebarDepth: 0,
children: [
'/advanced/introduction',
]
}
]
},
/**
* Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
*/
plugins: [
'@vuepress/plugin-back-to-top',
'@vuepress/plugin-medium-zoom',
]
}

14
docs/src/.vuepress/enhanceApp.js
View File

@@ -1,14 +0,0 @@
/**
* Client app enhancement file.
*
* https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
*/
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
// ...apply enhancements for the site.
}

BIN
docs/src/.vuepress/public/assets/logo.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

8
docs/src/.vuepress/styles/index.styl
View File

@@ -1,8 +0,0 @@
/**
* Custom Styles here.
*
* ref：https://v1.vuepress.vuejs.org/config/#index-styl
*/
.home .hero img
max-width 450px!important

10
docs/src/.vuepress/styles/palette.styl
View File

@@ -1,10 +0,0 @@
/**
* Custom palette here.
*
* ref：https://v1.vuepress.vuejs.org/zh/config/#palette-styl
*/
$accentColor = #000
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

10
docs/src/advanced/README.md
View File

@@ -1,10 +0,0 @@
# List
`@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.
Other components are still under development.
Checkout getting started to read, how to install and use vue-google-maps

10
docs/src/advanced/introduction.md
View File

@@ -1,10 +0,0 @@
# Advanced
`@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.
Other components are still under development.
Checkout getting started to read, how to install and use vue-google-maps

31
docs/src/advanced/map.md
View File

@@ -1,31 +0,0 @@
# Map
## Install
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
```javascript
import { createApp } from 'vue'
import googleMap from '@fawmi/vue-google-maps'
import App from './App.vue';
const googleMapOption = {
apiKey: 'here_comes_your_api_key',
}
const app = createApp(App);
app.use(googleMap, googleMapOption)
app.mount('#app')
```

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

@@ -1,20 +0,0 @@
# Components
[[toc]]
`@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)

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

@@ -1,46 +0,0 @@
# Cluster
[[toc]]
## Cluster your markers
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>
```

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

@@ -1,36 +0,0 @@
# 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>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
>
<GMapInfoWindow>
<div>I am in info window <MyComponent/>
</div>
</GMapInfoWindow>
</GMapMarker>
</GMapMap>
```
## Open/close info window
You can pass `opened` prop to open and close InfoWindows.
```vue{7}
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
>
<GMapInfoWindow
:opened="true"
>
<div>I am in info window <MyComponent/>
</div>
</GMapInfoWindow>
</GMapMarker>
</GMapMap>
```

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

@@ -1,73 +0,0 @@
# Map
[[toc]]
## Install
This is the base Map component. If no props are provided, it shows an empty map component with default controls.
```vue
<GMapMap />
```
## Provide your own style
You can provide custom map styling as prop.
You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)
```vue
<GMapMap
:style="mapStyles"
/>
```
## Disable ui elements
You can disable all ui components at once
```vue
<GMapMap
:disableDefaultUI="true"
/>
```
You can also disable specific UI components
```vue
<GMapMap
:options="{
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: true,
}"
/>
```
## Access google maps instance
You can easily access Map instance by accessing map ref in your component.
```vue
<GMapMap
ref="myMapRef"
:disableDefaultUI="true"
/>
```
## Add custom button
You can use the map instance to add custom buttons to your map
```js
export function addMyButton(map) {
const controlDiv = document.createElement("div");
const controlUI = document.createElement("button");
controlUI.title = "Click to zoom the map";
controlDiv.appendChild(controlUI);
const controlText = document.createElement("div");
controlText.innerHTML = `Center`;
controlUI.appendChild(controlText);
controlUI.style.position = "relative"
controlUI.style.bottom = "80px"
controlUI.addEventListener("click", () => {
map.setZoom(map.getZoom() + 1);
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv); // eslint-disable-line no-undef
}
```

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

@@ -1,51 +0,0 @@
# Marker
[[toc]]
## Add marker to your components
With a marker, you can show specific locations on the map
```vue
<template>
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
/>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
markers: [
{
position: {
lat: 51.093048, lng: 6.842120
},
}
]
}
},
}
</script>
```
## Enable/Disable events
You can enable or disable map events by passing props.
```vue
<template>
<GMapMap
ref="myMarker"
>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
/>
</GMapMap>
</template>
```

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

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

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

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

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

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

74
docs/src/index.md
View File

@@ -1,74 +0,0 @@
---
home: true
heroImage: 'assets/logo.jpg'
tagline: Vue 3 Google maps components
actionText: Read Docs →
actionLink: /docs/
---
## Installation
You can install it using npm
```
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
In your `main.js` or inside a Nuxt plugin:
```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="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>
```