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

Add docs folder

Browse Source
This commit is contained in:
Fawad Mirzad
2021-09-13 15:30:46 +02:00
parent db827d7607
commit 86f25061de
28 changed files with 1302 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.npmignore
View File

@@ -10,3 +10,4 @@ babel.config.js
build-copy.js build-copy.js
CONTRIBUTING.md CONTRIBUTING.md
jsconfig.json jsconfig.json
docs

12
docs/.npmignore Normal file
View File

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

15
docs/src/.vuepress/components/Foo/Bar.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<p class="demo">
{{ msg }}
</p>
</template>
<script>
export default {
data () {
return {
msg: 'Hello this is <Foo-Bar>'
}
}
}
</script>

3
docs/src/.vuepress/components/OtherComponent.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<p class="demo">This is another component</p>
</template>

15
docs/src/.vuepress/components/demo-component.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<p class="demo">
{{ msg }}
</p>
</template>
<script>
export default {
data() {
return {
msg: 'Hello this is <demo-component>'
}
}
}
</script>

99
docs/src/.vuepress/config.js Normal file
View File

@@ -0,0 +1,99 @@
const { description } = require('../../package')
module.exports = {
/**
* Ref：https://v1.vuepress.vuejs.org/config/#title
*/
title: 'Vue 3 Google maps',
/**
* Ref：https://v1.vuepress.vuejs.org/config/#description
*/
description: description,
/**
* Extra tags to be injected to the page HTML `<head>`
*
* ref：https://v1.vuepress.vuejs.org/config/#head
*/
head: [
['meta', { name: 'theme-color', content: '#3eaf7c' }],
['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: {
repo: '',
editLinks: true,
docsDir: '',
editLinkText: '',
logo: '/assets/logo.jpg',
head: [
['meta', { name: 'theme-color', content: '#000' }],
],
lastUpdated: false,
nav: [
{
text: 'Docs',
link: '/docs/',
},
{
text: 'Github',
link: 'https://github.com/fawmi/vue-google-maps'
},
{
text: 'NPM',
link: 'https://www.npmjs.com/package/@fawmi/vue-google-maps'
}
],
sidebar: [
{
title: 'Getting started',
path: '/docs/',
collapsable: false,
sidebarDepth: 0,
},
{
title: 'Components',
collapsable: false,
path: '/components/',
collapsable: false,
sidebarDepth: 0,
children: [
'/components/map',
'/components/marker',
'/components/info-window',
'/components/cluster',
'/components/circle',
'/components/polygon',
'/components/polyline',
'/components/rectangle',
'/components/autocomplete',
]
},
{
title: 'Examples',
collapsable: false,
collapsable: false,
sidebarDepth: 0,
path: '/examples/',
children: [
'/examples/points-in-polygon',
]
},
]
},
/**
* 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 Normal file
View File

@@ -0,0 +1,14 @@
/**
* 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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

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

@@ -0,0 +1,8 @@
/**
* 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 Normal file
View File

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

24
docs/src/components/README.md Normal file
View File

@@ -0,0 +1,24 @@
# 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`, `Circle`, `Polygon`, `Polyline` 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)
[Circle](./circle.md)
[Polygon](./polygon.md)
[Polyline](./polyline.md)
[Rectangle](./rectangle.md)
[Autocomplete](./autocomplete.md)

61
docs/src/components/autocomplete.md Normal file
View File

@@ -0,0 +1,61 @@
# Autocomplete
[[toc]]
## Load Google maps places
Before using Autocomplete, you should load the places library.
```vue{5}
createApp(App)
.use(VueGoogleMaps, {
load: {
key: "",
libraries: "places"
}
})
.mount("#app");
</script>
```
## Add autocomplete to your components
You can add autocomplete to your maps using GMapAutocomplete component.
```vue
<template>
<GMapAutocomplete
placeholder="This is a placeholder"
@place_changed="setPlace"
>
</GMapAutocomplete>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
methods: {
setPlace() {
}
}
}
</script>
```
## Custom options
You can pass google maps auto complete options using options prop
```vue{9}
<template>
<GMapAutocomplete
placeholder="This is a placeholder"
:options="{
bounds: {north: 1.4, south: 1.2, east: 104, west: 102},
strictBounds: true
}"
/>
</template>
```

87
docs/src/components/circle.md Normal file
View File

@@ -0,0 +1,87 @@
# Circle
[[toc]]
## Add circle to your maps
To add circles, just add the `GMapCircle` component inside `GMapMap` component.
```vue
<template>
<GMapMap
:center="center"
:zoom="6"
map-type-id="terrain"
style="width: 100vw; height: 100vh"
>
<GMapCircle
:key="city.id"
v-for="city in germanCities"
:radius="Math.sqrt(city.population) * 100"
:center="{ lat: city.position.lat, lng: city.position.lng}"
/>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
germanCities: [
{
id: 'duesseldorf',
population: 612178,
position: {
lat: 51.233334, lng: 6.783333
},
},
{
id: 'koeln',
position: {
lat: 50.935173, lng: 6.953101
},
population: 1087863
},
{
id: 'Hamburg',
position: {
lat: 53.551086,
lng: 9.993682
},
population: 1899160
}
]
}
},
}
</script>
```
## Add custom circle style
Circle style and all other circle options can be added using `options` prop.
```vue
<GMapMap>
<GMapCircle
:options="circleOptions" />
</GMapMap>
<script>
export default {
name: 'App',
data() {
return {
circleOptions: {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
},
}
},
}
</script>
```

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

@@ -0,0 +1,70 @@
# 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>
```
## Props
The following props can be passed to control behavior of clusters.
### minimumClusterSize
Defines the minimum distance of markers to cluster them
``` js
:minimumClusterSize="2"
```
### styles
With styles prop, you can control style and icon of clusters.
``` js
:styles="clusterIcon"
```
### zoomOnClick
Defines whether clusters should zoom in, when clicked.
``` js
:zoomOnClick="true"
```

127
docs/src/components/info-window.md Normal file
View File

@@ -0,0 +1,127 @@
# 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>
```
### Open/close info window on marker click
You can open open and close info windows after marker click, by modifying the `:opened` prop and maintaining a state variable containing ID of the opened marker.
Check out [this interactive example on stackblitz](https://stackblitz.com/edit/vue-google-maps-marker-w4hxvd?file=src/components/ComponentWithMap.vue).
Example:
```vue
<template>
<GMapMap :center="center" :zoom="10" map-type-id="terrain" style="width: 100vw; height: 20rem">
<GMapMarker :key="index" v-for="(m, index) in markers" :position="m.position" :clickable="true" :draggable="true"
@click="openMarker(m.id)" >
<GMapInfoWindow
:closeclick="true"
@closeclick="openMarker(null)"
:opened="openedMarkerID === m.id"
>
<div>I am in info window {{ m.id }} </div>
</GMapInfoWindow>
</GMapMarker>
</GMapMap>
</template>
<script>
export default {
data() {
return {
openedMarkerID: null,
center: { lat: 51.093048, lng: 6.84212 },
markers: [
{
id: 1,
position: {
lat: 51.093048,
lng: 6.84212
}
},
{
id: 2,
position: {
lat: 51.198429,
lng: 6.69529
}
}
]
};
},
methods: {
openMarker(id) {
this.openedMarkerID = id
}
}
};
</script>
<style>
body {
margin: 0;
}
</style>
```
## Options
You can pass any Google map InfoWindow component using `options` prop
```vue{8-14}
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
>
<GMapInfoWindow
:opened="true"
:options=" {
pixelOffset: {
width: 10, height: 0
},
maxWidth: 320,
maxHeight: 320,
}"
>
<div>I am in info window <MyComponent/>
</div>
</GMapInfoWindow>
</GMapMarker>
</GMapMap>
```

137
docs/src/components/map.md Normal file
View File

@@ -0,0 +1,137 @@
# 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
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
/>
```
Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-basic-example)
## Provide your own style
You can provide custom map styling by providing `style` property to the `options` prop.
You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)
```vue{4}
<script>
<template>
<GMapMap :center="center"
:options="options"
:zoom="10" map-type-id="terrain" style="width: 100vw; height: 20rem">
<GMapCluster :zoomOnClick="true">
<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 {
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
options: {
styles: [
// here comes the styles your
],
},
};
}
};
</script>
```
Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-marker-ssnfbn?file=src/components/ComponentWithMap.vue)
## Disable ui elements
You can disable all ui components at once
```vue{4}
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
:disableDefaultUI="true"
/>
```
You can also disable specific UI components
```vue{4-11}
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
: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
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
ref="myMapRef"
:disableDefaultUI="true"
/>
```
## Add custom button
You can use the map instance to add custom buttons to your map.
```vue
<template>
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
ref="myMapRef"
:disableDefaultUI="true"
/>
</template>
<script >
import { ref, watch } from "vue";
function addMyButton(map) {
const controlUI = document.createElement("button");
controlUI.title = "Click to zoom the map";
const controlText = document.createElement("div");
controlText.innerHTML = `Center`;
controlUI.appendChild(controlText);
controlUI.addEventListener("click", () => {
map.setZoom(map.getZoom() + 1);
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlUI); // eslint-disable-line no-undef
}
export default {
setup() {
const myMapRef = ref();
watch(myMapRef, googleMap => {
if (googleMap) {
googleMap.$mapPromise.then(map=> {
addMyButton(map);
})
}
});
return {
myMapRef
}
}
}
</script>
```

113
docs/src/components/marker.md Normal file
View File

@@ -0,0 +1,113 @@
# 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{9,10}
<template>
<GMapMap
ref="myMarker"
>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
/>
</GMapMap>
</template>
```
## Register events
You can register events like click, the same as you do in your vue components
```vue{9}
<template>
<GMapMap
ref="myMarker"
>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
@click="openInfoWindow(marker.id)"
:clickable="true"
/>
</GMapMap>
</template>
```
## Add custom icon
To use custom icon, pass `:icon` prop. You can pass a local resource or an image from internet.
```vue{9}
<template>
<GMapMap
ref="myMarker"
>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:icon="'https://developers.google.com/maps/documentation/javascript/examples/full/images/info-i_maps.png'"
:clickable="true"
:draggable="true"
/>
</GMapMap>
</template>
```
You can also pass an object to the icon `prop` to define custom size and label origin:
```vue{9-13}
<template>
<GMapMap
ref="myMarker"
>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:icon= '{
url: "https://image.flaticon.com/teams/slug/google.jpg",
scaledSize: {width: 77, height: 77},
labelOrigin: {x: 16, y: -10}
}'
:clickable="true"
:draggable="true"
/>
</GMapMap>
</template>
```

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

@@ -0,0 +1,63 @@
# Polygon
[[toc]]
## Add polygon to the map
You can add polygons to the map using polygon component.
```vue
<template>
<GMapMap
:center="center"
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapPolygon
:paths="paths"
/>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
center: {lat: 25.774, lng: -80.19},
paths: [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
],
}
},
}
</script>
```
## Set polygon options
You can set polygon style and other options using `options` prop.
```vue
<template>
<GMapMap>
<GMapPolygon :paths="paths"/>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
options: {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35,
}
}
},
}
</script>
```

73
docs/src/components/polyline.md Normal file
View File

@@ -0,0 +1,73 @@
# Polyline
[[toc]]
## Add Polyline to the map
You can add Polyline to the map using `GMapPolyline` component.
```vue
<template>
<GMapPolyline
:path="path"
:editable="true"
ref="polyline" />
</template>
<script>
export default {
name: 'App',
data() {
return {
center: {lat: 1.38, lng: 103.8},
path: [
{lat: 1.33, lng: 103.75},
{lat: 1.43, lng: 103.85},
],
}
},
}
</script>
```
## Make polyline editable
You can make Polyline editable using `editable` prop.
```vue
<template>
<GMapMap>
<GMapPolygon
:editable="true"
:paths="paths"/>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
}
</script>
```
## Polyline options
You can set Polyline options using `options` prop.
```vue
<template>
<GMapMap>
<GMapPolygon :paths="paths"/>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
options: {
}
}
},
}
</script>
```

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

@@ -0,0 +1,81 @@
# Rectangle
[[toc]]
## Add Rectangle to your map
You can add rectangles to your map using `GMapRectangle` component
```vue
<template>
<GMapMap
:center="center"
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapRectangle
:bounds="bounds"
/>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
center: {lat: 33.685, lng: 33.671},
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
}
},
}
</script>
```
## Add custom Rectangle options
Like almost all components, you can pass all available Google maps rectangle options as prop.
```vue
<template>
<GMapMap
:center="center"
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapRectangle
:bounds="bounds"
:options="options"
/>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
center: {lat: 33.685, lng: 33.671},
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
options: {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
}
}
},
}
</script>
```

9
docs/src/components/using-vue.md Normal file
View File

@@ -0,0 +1,9 @@
# Using Vue in Markdown
## Browser API Access Restrictions
Because VuePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the [universal code requirements](https://ssr.vuejs.org/en/universal.html). In short, make sure to only access Browser / DOM APIs in `beforeMount` or `mounted` hooks.
If you are using or demoing components that are not SSR friendly (for example containing custom directives), you can wrap them inside the built-in `<ClientOnly>` component:
##

15
docs/src/config/README.md Normal file
View File

@@ -0,0 +1,15 @@
---
sidebar: auto
---
# Config
## foo
- Type: `string`
- Default: `/`
## bar
- Type: `string`
- Default: `/`

83
docs/src/docs/README.md Normal file
View File

@@ -0,0 +1,83 @@
# 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`, `Circle`, `Polygon`, `Polyline`, `Rectangle`, `Autocomplete`
## Install
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).
Initialise the plugin in your `main.js`:
```js
import { createApp } from 'vue'
import 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>
```
## Register google maps events
In order to use Google maps events, they should either be enabled globally
```
app.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY_COMES_HERE',
},
autobindAllEvents: true,
}).mount('#app')
```
Or better yet, they should be activated when needed.
In this example, we enable `closeclick` event for `GMapInfoWindow` component and register the event.
```
<GMapInfoWindow
:closeclick="true"
@closeclick="closeMarker"
:opened="openedMarkerID === m.id"
>
<div>I am in info window {{ m.id }}</div>
</GMapInfoWindow>
```

10
docs/src/examples/README.md Normal file
View File

@@ -0,0 +1,10 @@
# List
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
Currently `Map`, `Marker`, `InfoWindow`, `Polyline`, `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/examples/introduction.md Normal file
View File

@@ -0,0 +1,10 @@
# Advanced
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
Currently `Map`, `Marker`, `InfoWindow`, `Polyline`, `Polygon` and `Rectangle` are supported.
Other components are still under development.
Checkout getting started to read, how to install and use vue-google-maps

77
docs/src/examples/points-in-polygon.md Normal file
View File

@@ -0,0 +1,77 @@
# How to get if a clicked area is within polygon in Google Maps.
[Interactive example on Condesandbox](https://stackblitz.com/edit/vue-google-maps-marker-fnzw4j?file=src%2Fcomponents%2FComponentWithMap.vue)
## Example
```bash
// Source of JS implementation: https://github.com/mattwilliamson/Google-Maps-Point-in-Polygon/blob/master/maps.google.polygon.containsLatLng.js
<template>
<GMapMap
ref="myMapRef"
:click="true"
@click="handleClick"
:center="center"
:zoom="10"
map-type-id="terrain"
style="width: 100vw; height: 20rem">
<GMapPolygon
:options="{
clickable: false
}"
:clickable="false"
ref="mapPolygon"
:paths="paths"
/>
</GMapMap>
</template>
<script>
import {ref, onMounted} from "vue";
import {setupContainsLatLng} from '../util/is-point-within-polygon.js'
export default {
data() {
return {
center: {lat: 25.774, lng: -80.19},
paths: [
{lat: 25.774, lng: -80.19},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
],
};
},
setup() {
const myMapRef = ref();
const mapPolygon = ref();
function handleClick(event) {
if (event.latLng?.lat) {
mapPolygon.value.$polygonPromise.then(res => {
let isWithinPolygon = res.containsLatLng(event.latLng.lat(), event.latLng.lng());
console.log({isWithinPolygon})
})
}
}
onMounted(() => {
myMapRef.value.$mapPromise.then(() => {
setupContainsLatLng();
})
})
return {
myMapRef,
mapPolygon,
handleClick
}
}
};
</script>
```

84
docs/src/index.md Normal file
View File

@@ -0,0 +1,84 @@
---
home: true
heroImage: 'assets/logo.jpg'
tagline: Reactive Vue 3 components for Google maps.
actionText: Read Docs →
actionLink: /docs/
---
<div style="display: flex; align-content: center;justify-content: center;">
<a target="_blank"
style="display: inline-block;
font-size: 1.2rem;
padding: .8rem 1.6rem;
border-radius: 4px;
box-sizing: border-box;
border: 1px solid #000;"
href="https://stackblitz.com/edit/vue-google-maps-marker?file=src%2Fcomponents%2FComponentWithMap.vue">View example</a>
</div>
## 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 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>
```

2
package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "@fawmi/vue-google-maps", "name": "@fawmi/vue-google-maps",
"description": "Google Map components for Vue.js 3", "description": "Google Map components for Vue.js 3",
"version": "0.9.2", "version": "0.9.3",
"private": false, "private": false,
"main": "src/main.js", "main": "src/main.js",
"keywords": [ "keywords": [