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

Update docs

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-14 13:59:30 +01:00
parent 9fc2b36f0e
commit 67413ba792
3 changed files with 72 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,36 +1,17 @@
const { description } = require('../../package.json') const { description } = require('../../package.json')
module.exports = { module.exports = {
/**
* Ref：https://v1.vuepress.vuejs.org/config/#title
*/
title: 'Vue 3 Google maps', title: 'Vue 3 Google maps',
/**
* Ref：https://v1.vuepress.vuejs.org/config/#description
*/
description: description, description: description,
base: '/', base: '/',
/**
* Extra tags to be injected to the page HTML `<head>`
*
* ref：https://v1.vuepress.vuejs.org/config/#head
*/
head: [ head: [
['meta', { name: 'theme-color', content: '#000' }], ['meta', { name: 'theme-color', content: '#000' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
], ],
/**
* Theme configuration, here is the default theme configuration for VuePress.
*
* ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html
*/
themeConfig: { themeConfig: {
repo: '', repo: 'fawmi/vue-google-maps',
editLinks: false, editLinks: false,
docsDir: '', docsDir: 'docs',
editLinkText: '', editLinkText: 'Edit on github',
lastUpdated: false, lastUpdated: false,
logo: '/assets/logo.jpg', logo: '/assets/logo.jpg',
nav: [ nav: [

83
docs/src/index.md
View File

@@ -1,19 +1,74 @@
--- ---
home: true home: true
heroImage: 'assets/logo.jpg' heroImage: 'assets/logo.jpg'
tagline: Google maps components for Vue.js tagline: Vue 3 Google maps components
actionText: Quick Start → actionText: Read Docs →
actionLink: /docs/ actionLink: /docs/
features:
- title: Lots of utilities
details: Center markers, add Cluster, add custom buttons, and a lot more with just props
- title: Supports most maps components
details: Most common Google map Components are implemented and are reactive out of box.
- title: Well documented
details: All the components come with documentations and examples, making it extremely easy to use.
- title: Well maintained
details: We heavily rely on this library in workplace. So this library is actively developed and improved.
- title: Well tested
details: The library is used in production in many apps and comes with automated test, more automated test is coming.
footer: Made by Fawad Mirzad with ❤️
--- ---
## 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>
```

189
readme.md
View File

@@ -1,189 +0,0 @@
# Google maps Components for Vue.js 3
Set of mostly used Google Maps components for Vue.js.
#### Why this library exists?
We heavily use Google Maps in our projects, so I wanted to have a well maintained Google Maps library.
## Documentation
Checkout https://vue-map.netlify.app for a detailed documentation
## 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="{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>
```
### Markers
If you need to gain access to the `Map` instance (e.g. to call `panToBounds`, `panTo`):
```vue
<template>
<GmapMap
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
/>
</GmapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
markers: [
{
position: {
lat: 51.093048, lng: 6.842120
},
}
]
}
}
}
```
### Cluster
If you have too many markers, it is helpfull to cluster markers. You can easily cluster maps by wrapping your markers with 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
]
}
}
}
```
If you need to gain access to the `google` object, you can access it by getting ref of the map object.
```vue
<template>
<GmapMarker ref="myMarker"
/>
</template>
<script>
import {gmapApi} from '@fawmi/vue-google-maps'
export default {
mounted() {
console.log(this.$refs.myMarker)
}
}
</script>
```
### Map options
You can pass Map options using options property:
See [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) for a complete list of available options.
```vue
<GmapMap
:options="{
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: true,
disableDefaultUi: false
}"
>
</GmapMap>
```
Add region and language localization:
Example for [Localization](https://developers.google.com/maps/documentation/javascript/localization):
```vue
Vue.use(VueGoogleMaps, {
load: {
region: 'VI',
language: 'vi',
},
})
```
## Contributions
The best way to contribute is to report reproducible bugs, but feature requests and improvement suggestions are always welcome too. And definitely bug fixes and PR are welcome.