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

Merge remote-tracking branch 'refs/remotes/origin/main'

Browse Source
This commit is contained in:
NathanAP
2022-10-18 14:34:32 -03:00
parent 80e1164e18 9f70654edd
commit 849d00295a
26 changed files with 15648 additions and 911 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
.github/ISSUE_TEMPLATE/bug_report.md vendored
View File

@@ -1,46 +1,56 @@
--- ---
name: Bug report name: Report a new bug
about: Create a report to help us improve about: Create a bug report to help our library improve
title: '' title: ''
labels: '' labels: ''
assignees: '' assignees: ''
--- ---
**Are you asking a question?** **Read before opening a new issue**
If you are asking a question, please use Github discussions for that. **Are you asking a question or need help?**
Please use Github discussion, you will find better help there.
Notice that if you create a question issue, we will close it and create a new discussion for you.
**Event xyz is not working?** **Having problems with an event?**
You should enable events, before using them https://vue-google-maps-community-fork.netlify.app/docs/#registering-google-maps-events. You should trying enabling events before using them.
More details here: https://vue-map.netlify.app/docs/#register-google-maps-events.
**Describe the bug** **Codepen support**
A clear and concise description of what the bug is. You can use Codepen to report your bug!
In your Codepen, go to Settings, then select JS. In Add Packages section, search for vue-google-maps-community-fork
**To Reproduce** **You can delete whatever part you want in this issue, but please be clear and remember to use the Preview option**
Steps to reproduce the behavior: **Also, remember to look if this issue isn't already created**
**Describe what you're reporting**
Don't be ashamed to show what you're doing. Give us a clear and concise description of what the bug is.
**How can we reproduce it?**
Show us how to reproduce the bug.
Example:
1. Go to '...' 1. Go to '...'
2. Click on '....' 2. Click on '....'
3. Scroll down to '....' 3. Scroll down to '....'
4. See error 4. See error
**Expected behavior** **What were your expecting to happen?**
A clear and concise description of what you expected to happen. A description of the expected behavior.
**What happened?**
A description of the actual behavior.
**Screenshots** **Screenshots**
If applicable, add screenshots to help explain your problem. You can send screenshots to help express what you want to show us.
**Desktop (please complete the following information):** **Device or enviroment**
- OS: [e.g. iOS] - In which OS are you seeing this bug? Examples: Windows 11, Ubuntu, iOS.
- Browser [e.g. chrome, safari] - If it is relevant, what browser are you? Examples: Chrome, Safari, Opera.
- Version [e.g. 22] - What is your npm version? You can check using npm -v.
- What is your vue version? You can check using npm list.
**Smartphone (please complete the following information):** - What is your vue-google-maps-community-fork version? You can check using npm list.
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context** **Additional context**
Add any other context about the problem here. You also can add more context for your situation here. Feel free to express whatever you think its important.

29
.github/ISSUE_TEMPLATE/feature_request.md vendored
View File

@@ -1,20 +1,31 @@
--- ---
name: Feature request name: Feature request
about: Suggest an idea for this project about: Suggest a new feature to make our library better
title: '' title: ''
labels: '' labels: ''
assignees: '' assignees: ''
--- ---
**Is your feature request related to a problem? Please describe.** **Read before opening a new issue**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] **Are you asking a question or need help?**
Please use Github discussion, you will find better help there.
Notice that if you create a question issue, we will close it and create a new discussion for you.
**Describe the solution you'd like** **Codepen support**
A clear and concise description of what you want to happen. You can use Codepen to report your bug!
In your Codepen, go to Settings, then select JS. In Add Packages section, search for vue-google-maps-community-fork
**Describe alternatives you've considered** **You can delete whatever part you want in this issue, but please be clear and remember to use the Preview option**
A clear and concise description of any alternative solutions or features you've considered. **Also, remember to look if this feature request isn't already created**
**Does your feature has anything related to a problem?**
Please describe what the problem is related to. For example: I'm frustrated that I cannot do [...] easily.
**What is the best solution you'd like to see?**
Describe what you think should be happening to fix that situation.
**What did you try? Did you have some alternative to consider?**
Is there any other solution or feature it could help fixing this situation?
**Additional context** **Additional context**
Add any other context or screenshots about the feature request here. You also can add more context for your situation here. Feel free to express whatever you think its important.

14714
docs/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
docs/package.json
View File

@@ -1,13 +1,13 @@
{ {
"name": "vue-google-maps-docs", "name": "vue-google-maps-community-fork-docs",
"version": "0.0.1", "version": "0.0.1",
"description": "Vue.js 3 components for Google maps", "description": "Documentation for Vue Google Maps Community Fork",
"main": "index.js", "main": "index.js",
"authors": { "authors": {
"name": "Fawad Mirzad", "name": "Nathan A Paludo",
"email": "hi@fawmi.com" "email": "natspaludo@gmail.com"
}, },
"repository": "fawmi/vue-google-maps-docs/vue-google-maps-docs", "repository": "NathanAP/vue-google-maps-community-fork",
"scripts": { "scripts": {
"dev": "vuepress dev src", "dev": "vuepress dev src",
"build": "vuepress build src" "build": "vuepress build src"

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

@@ -4,7 +4,7 @@ module.exports = {
/** /**
* Ref：https://v1.vuepress.vuejs.org/config/#title * Ref：https://v1.vuepress.vuejs.org/config/#title
*/ */
title: 'Vue 3 Google maps', title: 'Vue 3 Google Maps - Community Fork',
/** /**
* Ref：https://v1.vuepress.vuejs.org/config/#description * Ref：https://v1.vuepress.vuejs.org/config/#description
*/ */
@@ -18,7 +18,7 @@ module.exports = {
head: [ head: [
['meta', { name: 'theme-color', content: '#2c3e50' }], ['meta', { name: 'theme-color', content: '#2c3e50' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }], ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }] ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
], ],
/** /**
@@ -32,9 +32,7 @@ module.exports = {
docsDir: '', docsDir: '',
editLinkText: '', editLinkText: '',
logo: '/assets/logo.jpg', logo: '/assets/logo.jpg',
head: [ head: [['meta', { name: 'theme-color', content: '#2c3e50' }]],
['meta', { name: 'theme-color', content: '#2c3e50' }],
],
lastUpdated: false, lastUpdated: false,
nav: [ nav: [
{ {
@@ -42,13 +40,13 @@ module.exports = {
link: '/docs/', link: '/docs/',
}, },
{ {
text: 'Github', text: 'GitHub',
link: 'https://github.com/fawmi/vue-google-maps' link: 'https://github.com/NathanAP/vue-google-maps-community-fork',
}, },
{ {
text: 'NPM', text: 'npm',
link: 'https://www.npmjs.com/package/@fawmi/vue-google-maps' link: 'https://www.npmjs.com/package/vue-google-maps-community-fork',
} },
], ],
sidebar: [ sidebar: [
{ {
@@ -73,7 +71,7 @@ module.exports = {
'/components/polyline', '/components/polyline',
'/components/rectangle', '/components/rectangle',
'/components/autocomplete', '/components/autocomplete',
] ],
}, },
{ {
title: 'Examples', title: 'Examples',
@@ -82,20 +80,18 @@ module.exports = {
sidebarDepth: 0, sidebarDepth: 0,
path: '/examples/', path: '/examples/',
children: [ children: [
'/examples/how-to-add-a-custom-button-to-map',
'/examples/points-in-polygon', '/examples/points-in-polygon',
'/examples/how-to-access-google-maps-object', '/examples/how-to-access-google-maps-object',
'/examples/how-to-add-custom-controls' '/examples/how-to-add-custom-controls',
] '/examples/how-to-open-or-close-info-window-on-event',
],
}, },
],
]
}, },
/** /**
* Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/ * Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
*/ */
plugins: [ plugins: ['@vuepress/plugin-back-to-top', '@vuepress/plugin-medium-zoom'],
'@vuepress/plugin-back-to-top',
'@vuepress/plugin-medium-zoom',
]
} }

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

@@ -1,24 +1,21 @@
# Components # Components
[[toc]]
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3. In this section you will find everything about the currently supported components:
Currently `Map`, `Marker`, `InfoWindow`, `Cluster`, `Circle`, `Polygon`, `Polyline` and `Rectangle` are supported. - [Map](./map.md)
Checkout the docs page for each component to see how to use it. - [Marker](./marker.md)
[Map](./map.md) - [InfoWindow](./info-window.md)
[Marker](./marker.md) - [Cluster](./cluster.md)
[InfoWindow](./info-window.md) - [Circle](./circle.md)
[Cluster](./cluster.md) - [Polygon](./polygon.md)
[Circle](./circle.md) - [Polyline](./polyline.md)
[Polygon](./polygon.md) - [Rectangle](./rectangle.md)
[Polyline](./polyline.md)
[Rectangle](./rectangle.md)
[Autocomplete](./autocomplete.md) - [Autocomplete](./autocomplete.md)

68
docs/src/components/autocomplete.md
View File

@@ -1,34 +1,64 @@
# Autocomplete # Autocomplete
Here you will find some uses for Google Maps Autocomplete component:
[[toc]] [[toc]]
## Pre-requisite: load places library
## Load Google maps places Before using Autocomplete, you need to load the places library:
Before using Autocomplete, you should load the places library.
```vue{5} ```js
createApp(App) createApp(App)
.use(VueGoogleMaps, { .use(VueGoogleMaps, {
load: { load: {
key: "", key: 'YOUR_API_KEY_COMES_HERE',
libraries: "places" libraries: 'places',
} },
}) })
.mount("#app"); .mount('#app')
```
## Adding Autocomplete to your components
You can add an Autocomplete to your `template` using `GMapAutocomplete` component:
```html
<template>
<GMapAutocomplete placeholder="This is a placeholder" @place_changed="setPlace" />
</template>
<script>
export default {
name: 'App',
data() {
return {}
},
methods: {
setPlace() {},
},
}
</script> </script>
``` ```
## Adding a custom input for autocomplete
## Add autocomplete to your components You can customize input for autocomplete.
You can add autocomplete to your maps using GMapAutocomplete component.
```vue ```html
<template> <template>
<GMapAutocomplete <GMapAutocomplete @place_changed="setPlace">
placeholder="This is a placeholder" <template #input="slotProps">
@place_changed="setPlace" <v-text-field
> v-bind="slotProps"
ref="input"
prepend-inner-icon="mdi-map-marker"
hide-details
/>
</template>
</GMapAutocomplete> </GMapAutocomplete>
</template> </template>
<script> <script>
export default { export default {
name: 'App', name: 'App',
@@ -42,13 +72,13 @@ export default {
} }
} }
</script> </script>
``` ```
## Custom options ## Adding custom options
You can pass google maps auto complete options using options prop
```vue{9} You can pass Google Maps Autocomplete options using the prop `options`:
```html
<template> <template>
<GMapAutocomplete <GMapAutocomplete
placeholder="This is a placeholder" placeholder="This is a placeholder"

131
docs/src/components/circle.md
View File

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

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

@@ -1,70 +1,73 @@
# Cluster # Cluster
Here you will find some uses for Google Maps Cluster component:
[[toc]] [[toc]]
## Cluster your markers ## Cluster your markers
To cluster objects you simply wrap your markers with the cluster component.
You can add clusters to your `GMapMarker` using `GMapCluster` component inside of `GMapMap` component:
```vue ```html
<template> <template>
<GMapMap <GMapMap :center="center" :zoom="7" map-type-id="terrain" style="width: 500px; height: 300px">
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GMapCluster> <GMapCluster>
<GMapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
:position="m.position" :position="m.position"
:clickable="true" :clickable="true"
:draggable="true" :draggable="true"
@click="center=m.position" @click="center = m.position"
/> />
</GMapCluster> </GMapCluster>
</GMapMap> </GMapMap>
</template> </template>
<script> <script>
export default { export default {
name: 'App', name: 'App',
data() { data() {
return { return {
center: {lat: 51.093048, lng: 6.842120}, center: { lat: 51.093048, lng: 6.84212 },
markers: [ markers: [
{ {
position: { position: {
lat: 51.093048, lng: 6.842120 lat: 51.093048,
}, lng: 6.84212,
} },
, // Along list of clusters }, // Along list of clusters
] ],
} }
},
} }
}
</script> </script>
``` ```
## Props ## Props
The following props can be passed to control behavior of clusters.
You can pass the following props to control behavior of clusters:
### minimumClusterSize ### minimumClusterSize
Defines the minimum distance of markers to cluster them Defines the minimum distance of markers to cluster them:
``` js ```js
:minimumClusterSize="2" :minimumClusterSize="2"
``` ```
### styles ### styles
With styles prop, you can control style and icon of clusters.
``` js Controls style and icon of clusters:
```js
:styles="clusterIcon" :styles="clusterIcon"
``` ```
### zoomOnClick ### zoomOnClick
Defines whether clusters should zoom in, when clicked.
``` js Defines whether clusters should zoom in, when clicked:
```js
:zoomOnClick="true" :zoomOnClick="true"
``` ```

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

@@ -1,127 +1,59 @@
# Info Window # Info window
Here you will find some uses for Google Maps Info Window component:
[[toc]] [[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. ## Adding info window to your Google Maps components
```vue
<GMapMap> You can create info window by passing a custom HTML or Vue components as the child of `GMapInfoWindow` component:
<GMapMarker
:key="index" ```html
v-for="(m, index) in markers" <GMapMap>
> <GMapMarker :key="index" v-for="(m, index) in markers">
<GMapInfoWindow> <GMapInfoWindow>
<div>I am in info window <MyComponent/> <div>I am in info window</div>
</div> <MyComponent text="I am a custom component inside the info window!" />
</GMapInfoWindow> </GMapInfoWindow>
</GMapMarker> </GMapMarker>
</GMapMap> </GMapMap>
``` ```
## Open/close info window ## Opening or closing an Info window
You can pass `opened` prop to open and close InfoWindows.
```vue{7} You can pass the `opened` prop to open or close a `GMapInfoWindow`:
<GMapMap>
<GMapMarker ```html
:key="index" <GMapMap>
v-for="(m, index) in markers" <GMapMarker :key="index" v-for="(m, index) in markers">
> <GMapInfoWindow :opened="true">
<GMapInfoWindow <div>I am in info window</div>
:opened="true" <MyComponent text="I am a custom component inside the info window!" />
> </GMapInfoWindow>
<div>I am in info window <MyComponent/> </GMapMarker>
</div>
</GMapInfoWindow>
</GMapMarker>
</GMapMap> </GMapMap>
``` ```
## Adding custom options
### Open/close info window on marker click You can pass any Google Maps Info Window component using the prop `options`:
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.
```html
Check out [this interactive example on stackblitz](https://stackblitz.com/edit/vue-google-maps-marker-w4hxvd?file=src/components/ComponentWithMap.vue). <GMapMap>
<GMapMarker :key="index" v-for="(m, index) in markers">
Example: <GMapInfoWindow
```vue :opened="true"
<template> :options=" {
<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: { pixelOffset: {
width: 10, height: 0 width: 10, height: 0
}, },
maxWidth: 320, maxWidth: 320,
maxHeight: 320, maxHeight: 320,
}" }"
> >
<div>I am in info window <MyComponent/> <div>I am in info window</div>
</div> <MyComponent text="I am a custom component inside the info window!" />
</GMapInfoWindow> </GMapInfoWindow>
</GMapMarker> </GMapMarker>
</GMapMap> </GMapMap>
``` ```

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

@@ -1,167 +1,132 @@
# Map # Map
Here is where you start. Here you will find some uses for Google Maps component:
[[toc]] [[toc]]
## Install
This is the base Map component. If no props are provided, it shows an empty map component with default controls. ## My first Google Maps component
```vue You can create a Google Map component using `GMapMap`:
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}" ```html
:zoom="7" <!-- Notice that if no props are provided, the component will show an empty map component with default controls -->
/> <GMapMap :center="{ lat: 51.093048, lng: 6.84212 }" :zoom="7" />
``` ```
Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-basic-example) Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-basic-example)
## Provide your own style ## Styling your Google Maps component
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/) You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/).
```vue{4}
<script> You can provide custom styles by providing `style` property to the `options` prop:
<template>
<GMapMap :center="center" ```html
:options="options" <template>
:zoom="10" map-type-id="terrain" style="width: 100vw; height: 20rem"> <GMapMap
<GMapCluster :zoomOnClick="true"> :center="center"
<GMapMarker :key="index" v-for="(m, index) in markers" :position="m.position" :clickable="true" :draggable="true" :options="options"
@click="center = m.position" /> :zoom="10"
</GMapCluster> map-type-id="terrain"
</GMapMap> style="width: 100vw; height: 20rem"
</template> >
<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> <script>
export default { export default {
data() { data() {
return { return {
center: { lat: 51.093048, lng: 6.84212 }, center: { lat: 51.093048, lng: 6.84212 },
options: { options: {
styles: [ styles: [
// here comes the styles your // here comes the styles your
], ],
}, },
}; }
},
} }
};
</script> </script>
``` ```
Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-marker-ssnfbn?file=src/components/ComponentWithMap.vue) Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-marker-ssnfbn?file=src/components/ComponentWithMap.vue)
### Cloud-based Styling with Map ID ### Cloud-based styles with Map ID
You can manage your cloud-based styles on [Google Maps Platform: Map Styles](https://console.cloud.google.com/google/maps-apis/studio/styles), and your map ids on [Google Maps Platform: Map Management](https://console.cloud.google.com/google/maps-apis/studio/maps) You can manage your cloud-based styles on [Google Maps Platform: Map Styles](https://console.cloud.google.com/google/maps-apis/studio/styles), and your map ids on [Google Maps Platform: Map Management](https://console.cloud.google.com/google/maps-apis/studio/maps)
[Documentation: Maps JavaScript API - Using Cloud-based maps styling](https://developers.google.com/maps/documentation/javascript/cloud-based-map-styling) [Documentation: Maps JavaScript API - Using Cloud-based maps styling](https://developers.google.com/maps/documentation/javascript/cloud-based-map-styling)
```vue{4} ```html
<script> <template>
<template> <GMapMap
<GMapMap :center="center" :center="center"
:options="options" :options="options"
:zoom="10" :zoom="10"
map-type-id="terrain" map-type-id="terrain"
style="width: 100vw; height: 20rem"> style="width: 100vw; height: 20rem"
</GMapMap> >
</template> </GMapMap>
</template>
<script> <script>
export default { export default {
data() { data() {
return { return {
center: { lat: 51.093048, lng: 6.84212 }, center: { lat: 51.093048, lng: 6.84212 },
options: { options: {
mapId:'xxx' //here comes your map id mapId: 'xxx', //here comes your map id
}, },
}; }
},
} }
};
</script> </script>
``` ```
## Disable ui elements ## 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} You can disable all UI components at once:
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}" ```html
:zoom="7" <GMapMap :center="{lat: 51.093048, lng: 6.842120}" :zoom="7" :disableDefaultUI="true" />
:options="{
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: true,
}"
/>
``` ```
You can also disable specific UI components:
## Access google maps instance ```html
You can easily access Map instance by accessing map ref in your component.
```vue
<GMapMap <GMapMap
:center="{lat: 51.093048, lng: 6.842120}" :center="{lat: 51.093048, lng: 6.842120}"
:zoom="7" :zoom="7"
ref="myMapRef" :options="{
:disableDefaultUI="true" zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: true,
}"
/> />
``` ```
## Add custom button ## Access Google Maps instance
You can use the map instance to add custom buttons to your map.
```vue You can easily access the Map instance by accessing `ref` in your component:
<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) { ```html
const controlUI = document.createElement("button"); <GMapMap
controlUI.title = "Click to zoom the map"; :center="{ lat: 51.093048, lng: 6.84212 }"
const controlText = document.createElement("div"); :zoom="7"
controlText.innerHTML = `Center`; ref="myMapRef"
controlUI.appendChild(controlText); :disableDefaultUI="true"
/>
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>
``` ```

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

@@ -1,44 +1,46 @@
# Marker # Marker
Here you will find some uses for Google Maps Marker component:
[[toc]] [[toc]]
## Add marker to your components ## Adding marker to your components
With a marker, you can show specific locations on the map
```vue You can add markers to your Maps using `GMapMarker` component inside of `GMapMap` component:
```html
<template> <template>
<GMapMap> <GMapMap>
<GMapMarker <GMapMarker :key="index" v-for="(m, index) in markers" />
:key="index"
v-for="(m, index) in markers"
/>
</GMapMap> </GMapMap>
</template> </template>
<script>
export default {
name: 'App',
data() {
return {
markers: [
{
position: {
lat: 51.093048, lng: 6.842120
},
}
]
}
},
}
</script>
<script>
export default {
name: 'App',
data() {
return {
markers: [
{
position: {
lat: 51.093048,
lng: 6.84212,
},
},
],
}
},
}
</script>
``` ```
## Enable/Disable events ## Enabling or disabling events
You can enable or disable map events by passing props.
```vue{9,10} You can enable or disable the Google Maps Marker events by passing `props`:
```html
<template> <template>
<GMapMap <GMapMap ref="myMarker">
ref="myMarker"
>
<GMapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
@@ -50,14 +52,13 @@ You can enable or disable map events by passing props.
</template> </template>
``` ```
## Register events ## Registering events
You can register events like click, the same as you do in your vue components
```vue{9} You can register events (like click) in the same way as you do in your Vue components:
```html
<template> <template>
<GMapMap <GMapMap ref="myMarker">
ref="myMarker"
>
<GMapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
@@ -69,13 +70,13 @@ You can register events like click, the same as you do in your vue components
</template> </template>
``` ```
## Add custom icon ## Adding a custom icon
To use custom icon, pass `:icon` prop. You can pass a local resource or an image from internet.
```vue{9} You can use `:icon` prop to pass a custom icon to your `GMapMarker`. Also, you can pass a local resource or an image from internet:
```html
<template> <template>
<GMapMap <GMapMap ref="myMarker">
ref="myMarker"
>
<GMapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
@@ -87,20 +88,19 @@ To use custom icon, pass `:icon` prop. You can pass a local resource or an image
</GMapMap> </GMapMap>
</template> </template>
``` ```
Local resources can be passed in using `require`, for example: `:icon="require('@/assets/images/place-icon.svg').default"`. Local resources can be passed in using `require`, for example: `:icon="require('@/assets/images/place-icon.svg').default"`.
You can also pass an object to the icon `prop` to define custom size and label origin: The `icon` prop also can receive an object to define custom size and label origin:
```vue{9-13} ```html
<template> <template>
<GMapMap <GMapMap ref="myMarker">
ref="myMarker"
>
<GMapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
:position="m.position" :position="m.position"
:icon= '{ :icon='{
url: "https://image.flaticon.com/teams/slug/google.jpg", url: "https://image.flaticon.com/teams/slug/google.jpg",
scaledSize: {width: 77, height: 77}, scaledSize: {width: 77, height: 77},
labelOrigin: {x: 16, y: -10} labelOrigin: {x: 16, y: -10}

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

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

125
docs/src/components/polyline.md
View File

@@ -1,73 +1,74 @@
# Polyline # Polyline
Here you will find some uses for Google Maps Polyline component:
[[toc]] [[toc]]
## Add Polyline to the map ## Adding Polyline to your Maps
You can add Polyline to the map using `GMapPolyline` component. You can add polygons to your Maps using `GMapPolyline` component inside of `GMapMap` component:
```vue ```html
<template> <template>
<GMapPolyline <GMapPolyline :path="path" ref="polyline" />
:path="path"
:editable="true"
ref="polyline" />
</template> </template>
<script> <script>
export default { export default {
name: 'App', name: 'App',
data() { data() {
return { return {
center: {lat: 1.38, lng: 103.8}, center: { lat: 1.38, lng: 103.8 },
path: [ path: [
{lat: 1.33, lng: 103.75}, { lat: 1.33, lng: 103.75 },
{lat: 1.43, lng: 103.85}, { 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>
```
## Making polyline editable
You can make your `GMapPolyline` component editable using `editable` prop:
```html
<template>
<GMapMap>
<GMapPolyline :editable="true" :paths="paths" />
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {}
},
}
</script>
```
## Adding custom options
You can pass Google Maps Polyline options using the prop `options`:
```html
<template>
<GMapMap>
<GMapPolyline :options="options" />
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
options: {},
}
},
}
</script> </script>
``` ```

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

@@ -1,81 +1,70 @@
# Rectangle # Rectangle
Here you will find some uses for Google Maps Rectangle component:
[[toc]] [[toc]]
## Add Rectangle to your map ## Adding Rectangle to your Maps
You can add rectangles to your map using `GMapRectangle` component You can add polygons to your Maps using `GMapRectangle` component inside of `GMapMap` component:
```html
```vue
<template> <template>
<GMapMap <GMapMap :center="center" :zoom="4" style="width: 100vw; height: 100vh">
:center="center" <GMapRectangle :bounds="bounds" />
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapRectangle
:bounds="bounds"
/>
</GMapMap> </GMapMap>
</template> </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>
<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 ## Adding custom options
Like almost all components, you can pass all available Google maps rectangle options as prop. You can pass Google Maps Rectangle options using the prop `options`:
```vue ```html
<template> <template>
<GMapMap <GMapMap :center="center" :zoom="4" style="width: 100vw; height: 100vh">
:center="center" <GMapRectangle :bounds="bounds" :options="options" />
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapRectangle
:bounds="bounds"
:options="options"
/>
</GMapMap> </GMapMap>
</template> </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>
<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>
``` ```

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

@@ -1,84 +1,97 @@
# Introduction # Getting started
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
The following components are currently supported: Welcome! In `vue-google-maps-community-fork` will you find a set of VueJS 3 components wrapping the Google Maps API.
`Map`, `Marker`, `Cluster`, `InfoWindow`, `Circle`, `Polygon`, `Polyline`, `Rectangle`, `Autocomplete` ## Before starting
## Install It is important to notice that this repository was forked by the community to keep the library alive. You can get more infor about our decision [in this GitHub discussion](https://github.com/NathanAP/vue-google-maps-community-fork/discussions/1).
To install it via NPM Since this library is currently maintained by the community, every help is needed and appreciated! You can follow everything in our [GitHub repository](https://github.com/NathanAP/vue-google-maps-community-fork).
```bash
npm install -S @fawmi/vue-google-maps ## Installation
You can install this library using npm:
```
npm install vue-google-maps-community-fork
``` ```
## Basic usage ### Pre-requisites
You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
To use this library you will need an API Key. You can learn how to get one [here](https://developers.google.com/maps/documentation/javascript/get-api-key).
### Configure your enviroment
Initialise the plugin in your `main.js`: Initialise the plugin in your `main.js`:
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import VueGoogleMaps from '@fawmi/vue-google-maps' import VueGoogleMaps from 'vue-google-maps-community-fork'
const app = createApp(App); const app = createApp(App)
app.use(VueGoogleMaps, { app
.use(VueGoogleMaps, {
load: { load: {
key: 'YOUR_API_KEY_COMES_HERE', key: 'YOUR_API_KEY_COMES_HERE',
// language: 'de',
}, },
}).mount('#app') })
.mount('#app')
``` ```
Use it anywhere in your components ### Great! Now you can use anywhere in your components
Here are some examples:
```vue ```vue
<template> <template>
<GMapMap <GMapMap
:center="{lat: 51.093048, lng: 6.842120}" :center="{ lat: 51.093048, lng: 6.84212 }"
:zoom="7" :zoom="7"
map-type-id="terrain" map-type-id="terrain"
style="width: 100vw; height: 900px" style="width: 100vw; height: 900px"
> >
</GMapMap> </GMapMap>
</template> </template>
<script > <script>
export default { export default {
name: 'App', name: 'App',
data() { data() {
return { return {
center: {lat: 51.093048, lng: 6.842120}, center: { lat: 51.093048, lng: 6.84212 },
} }
} },
} }
</script> </script>
``` ```
## Registering Google Maps events
## Register google maps events To use Google Maps events you have two options:
In order to use Google maps events, they should either be enabled globally - The first (and better) option is to activate them when you need.
``` In this example, we enable `closeclick` event for `GMapInfoWindow` component and register the event.
app.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY_COMES_HERE',
},
autobindAllEvents: true,
}).mount('#app')
```
Or better yet, they should be activated when needed. ```html
<GMapInfoWindow :closeclick="true" @closeclick="closeMarker" :opened="openedMarkerID === m.id">
<div>I am in info window {{ m.id }}</div>
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> </GMapInfoWindow>
``` ```
- The second option is to enable them globally.
```js
import { createApp } from 'vue'
import VueGoogleMaps from 'vue-google-maps-community-fork'
const app = createApp(App)
app
.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY_COMES_HERE',
},
autobindAllEvents: true, // Add this to enable the events
})
.mount('#app')
```

13
docs/src/examples/README.md
View File

@@ -1,10 +1,13 @@
# List # Examples
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3. Here you will find some basic examples that might be useful for you.
Currently `Map`, `Marker`, `InfoWindow`, `Polyline`, `Polygon` and `Rectangle` are supported. - [How to add a custom button to my map](./how-to-add-a-custom-button-to-map.md)
Other components are still under development. - [How to get if a clicked area is within polygon in Google Maps](./points-in-polygon.md)
- [How to access Google Maps object](./how-to-access-google-maps-object.md)
Checkout getting started to read, how to install and use vue-google-maps - [How to add custom controls](./how-to-add-custom-controls.md)
- [How to open or close an Info window on event](./how-to-open-or-close-info-window-on-event.md)

84
docs/src/examples/how-to-access-google-maps-object.md
View File

@@ -1,14 +1,12 @@
# How to access Google Maps object. # How to access Google Maps object
[Interactive example on Condesandbox](https://stackblitz.com/edit/vue-google-maps-marker-khyhfk?file=src/components/ComponentWithMap.vue)
[Interactive example on CodeSandbox](https://stackblitz.com/edit/vue-google-maps-marker-khyhfk?file=src/components/ComponentWithMap.vue)
To access Google maps object, or do something when map is loaded, use a ref on the `GMapMap` object. To access Google maps object, or do something when map is loaded, use a ref on the `GMapMap` object.
## Example ## Example
```bash ```html
<template> <template>
<GMapMap <GMapMap
:center="center" :center="center"
@@ -31,51 +29,49 @@ To access Google maps object, or do something when map is loaded, use a ref on t
</template> </template>
<script> <script>
export default { export default {
mounted() { mounted() {
this.$refs.myMapRef.$mapPromise.then((mapObject) => { this.$refs.myMapRef.$mapPromise.then((mapObject) => {
console.log('map is loaded now', mapObject); console.log('map is loaded now', mapObject)
}); })
}, },
data() { data() {
return { return {
center: { lat: 51.093048, lng: 6.84212 }, center: { lat: 51.093048, lng: 6.84212 },
markers: [ markers: [
{ {
position: { position: {
lat: 51.093048, lat: 51.093048,
lng: 6.84212, lng: 6.84212,
},
}, },
}, {
{ position: {
position: { lat: 51.198429,
lat: 51.198429, lng: 6.69529,
lng: 6.69529, },
}, },
}, {
{ position: {
position: { lat: 51.165218,
lat: 51.165218, lng: 7.067116,
lng: 7.067116, },
}, },
}, {
{ position: {
position: { lat: 51.09256,
lat: 51.09256, lng: 6.84074,
lng: 6.84074, },
}, },
}, ],
], }
}; },
}, }
};
</script> </script>
<style> <style>
body { body {
margin: 0; margin: 0;
} }
</style> </style>
``` ```

50
docs/src/examples/how-to-add-a-custom-button-to-map.md Normal file
View File

@@ -0,0 +1,50 @@
# Adding a custom button to my map
You can use the map instance to add custom buttons to your map:
```html
<template>
<GMapMap
:center="{ lat: 51.093048, lng: 6.84212 }"
: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>
```

120
docs/src/examples/how-to-add-custom-controls.md
View File

@@ -1,14 +1,12 @@
# How to add custom controls # How to add custom controls
[Interactive example on Condesandbox](https://stackblitz.com/edit/vue-google-maps-marker-ry3zf7?file=src/components/ComponentWithMap.vue) [Interactive example on CodeSandbox](https://stackblitz.com/edit/vue-google-maps-marker-ry3zf7?file=src/components/ComponentWithMap.vue)
To add custom controls, you can access google maps object and add controls to it, look at this example or follow the interactive example on condesandbox above.
To add custom controls, you can access google maps object and add controls to it, look at this example or follow the interactive example on CodeSandbox above.
## Example ## Example
```bash ```html
<template> <template>
<GMapMap <GMapMap
:center="center" :center="center"
@@ -31,75 +29,73 @@ To add custom controls, you can access google maps object and add controls to it
</template> </template>
<script> <script>
export default { export default {
mounted() { mounted() {
this.$refs.myMapRef.$mapPromise.then((map) => { this.$refs.myMapRef.$mapPromise.then((map) => {
// Create the DIV to hold the control and call the CenterControl() // Create the DIV to hold the control and call the CenterControl()
// constructor passing in this DIV. // constructor passing in this DIV.
const centerControlDiv = document.createElement('div'); const centerControlDiv = document.createElement('div')
this.addCenterControl(centerControlDiv, map); this.addCenterControl(centerControlDiv, map)
map.controls[google.maps.ControlPosition.TOP_CENTER].push( map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv)
centerControlDiv })
); },
}); methods: {
}, addCenterControl(controlDiv, map) {
methods: { const controlUI = document.createElement('div')
addCenterControl(controlDiv, map) {
const controlUI = document.createElement('div');
controlUI.innerHTML = ` controlUI.innerHTML = `
<div style="color: white; background: red; padding: 1rem;"> <div style="color: white; background: red; padding: 1rem;">
You can click me, i can also be a vue component You can click me, i can also be a vue component
</div> </div>
`; `
controlDiv.appendChild(controlUI); controlDiv.appendChild(controlUI)
controlUI.addEventListener('click', () => { controlUI.addEventListener('click', () => {
// Do what ever you want to happen on click event // Do what ever you want to happen on click event
map.setCenter({ map.setCenter({
lat: 53.57532, lat: 53.57532,
lng: 10.01534, lng: 10.01534,
}); })
}); })
},
}, },
}, data() {
data() { return {
return { center: { lat: 51.093048, lng: 6.84212 },
center: { lat: 51.093048, lng: 6.84212 }, markers: [
markers: [ {
{ position: {
position: { lat: 51.093048,
lat: 51.093048, lng: 6.84212,
lng: 6.84212, },
}, },
}, {
{ position: {
position: { lat: 51.198429,
lat: 51.198429, lng: 6.69529,
lng: 6.69529, },
}, },
}, {
{ position: {
position: { lat: 51.165218,
lat: 51.165218, lng: 7.067116,
lng: 7.067116, },
}, },
}, {
{ position: {
position: { lat: 51.09256,
lat: 51.09256, lng: 6.84074,
lng: 6.84074, },
}, },
}, ],
], }
}; },
}, }
};
</script> </script>
<style> <style>
body { body {
margin: 0; margin: 0;
} }
</style> </style>
``` ```

66
docs/src/examples/how-to-open-or-close-info-window-on-event.md Normal file
View File

@@ -0,0 +1,66 @@
# How to open or close an info window on event
[Interactive example on CodeSandbox](https://stackblitz.com/edit/vue-google-maps-marker-w4hxvd?file=src/components/ComponentWithMap.vue).
To open or close info windows after marker click, you can modify the `:opened` prop and maintain a state variable containing ID of the opened marker.
```html
<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>
```

5
docs/src/examples/introduction.md
View File

@@ -2,9 +2,8 @@
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3. `@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. Currently `Map`, `Marker`, `InfoWindow`, `Polyline`, `Polygon` and `Rectangle` are supported.
Other components are still under development.
Other components are still under development.
Checkout getting started to read, how to install and use vue-google-maps Checkout getting started to read, how to install and use vue-google-maps

85
docs/src/examples/points-in-polygon.md
View File

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

71
docs/src/index.md
View File

@@ -1,7 +1,7 @@
--- ---
home: true home: true
heroImage: 'assets/logo.jpg' heroImage: 'assets/logo.jpg'
tagline: Reactive Vue 3 components for Google maps. tagline: A library that contains Google Maps reactive components for VueJS 3
actionText: Read Docs actionText: Read Docs
actionLink: /docs/ actionLink: /docs/
--- ---
@@ -17,48 +17,57 @@ actionLink: /docs/
href="https://stackblitz.com/edit/vue-google-maps-marker?file=src%2Fcomponents%2FComponentWithMap.vue">View example</a> href="https://stackblitz.com/edit/vue-google-maps-marker?file=src%2Fcomponents%2FComponentWithMap.vue">View example</a>
</div> </div>
## Before starting
It is important to notice that this repository was forked by the community to keep the library alive. You can get more infor about our decision [in this GitHub discussion](https://github.com/NathanAP/vue-google-maps-community-fork/discussions/1).
Since this library is currently maintained by the community, every help is needed and appreciated! You can follow everything in our [GitHub](https://github.com/NathanAP/vue-google-maps-community-fork).
## Installation ## Installation
You can install it using npm
You can install this library using npm:
``` ```
npm install -S @fawmi/vue-google-maps npm install vue-google-maps-community-fork
``` ```
## Basic usage ### Pre-requisites
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 To use this library you will need an API Key. You can learn how to get one [here](https://developers.google.com/maps/documentation/javascript/get-api-key).
### Configure your enviroment
In your `main.js` or inside a Nuxt plugin: In your `main.js` or inside a Nuxt plugin:
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import VueGoogleMaps from '@fawmi/vue-google-maps' import VueGoogleMaps from 'vue-google-maps-community-fork'
const app = createApp(App); const app = createApp(App)
app.use(VueGoogleMaps, { app
.use(VueGoogleMaps, {
load: { load: {
key: 'YOUR_API_KEY_COMES_HERE', key: 'YOUR_API_KEY_COMES_HERE',
}, },
}).mount('#app') })
.mount('#app')
``` ```
### Use it anywhere in your components
### Great! Now you can use anywhere in your components
Here are some examples:
```vue ```vue
<template> <template>
<GMapMap <GMapMap :center="center" :zoom="7" map-type-id="terrain" style="width: 500px; height: 300px">
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GMapCluster> <GMapCluster>
<GMapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
:position="m.position" :position="m.position"
:clickable="true" :clickable="true"
:draggable="true" :draggable="true"
@click="center=m.position" @click="center = m.position"
/> />
</GMapCluster> </GMapCluster>
</GMapMap> </GMapMap>
@@ -68,17 +77,17 @@ export default {
name: 'App', name: 'App',
data() { data() {
return { return {
center: {lat: 51.093048, lng: 6.842120}, center: { lat: 51.093048, lng: 6.84212 },
markers: [ markers: [
{ {
position: { position: {
lat: 51.093048, lng: 6.842120 lat: 51.093048,
lng: 6.84212,
}, },
} }, // Along list of clusters
, // Along list of clusters ],
]
} }
} },
} }
</script> </script>
``` ```

27
src/components/autocomplete.vue
View File

@@ -1,5 +1,16 @@
<template> <template>
<input ref="input" v-bind="$attrs" v-on="$attrs" /> <template v-if="$slots['input']">
<slot
name="input"
v-bind="$attrs"
></slot>
</template>
<input
v-else-if="!$slots['input']"
ref="input"
v-bind="$attrs"
v-on="$attrs"
/>
</template> </template>
<script> <script>
@@ -38,9 +49,19 @@ const props = {
export default { export default {
mounted() { mounted() {
const _this = this;
this.$gmapApiPromiseLazy().then(() => { this.$gmapApiPromiseLazy().then(() => {
// get correct input from fallback or slot
let refInput = _this.$refs.input
if (_this.$slots.input) {
const refName = _this.$slots.input()[0].props.ref;
const scopedInput = _this.$slots.input()[0].ref.i.ctx.$refs[refName];
if (scopedInput) {
refInput = scopedInput.$el.getElementsByTagName('input')[0];
}
}
if (this.selectFirstOnEnter) { if (this.selectFirstOnEnter) {
downArrowSimulator(this.$refs.input) downArrowSimulator(refInput)
} }
if (typeof google.maps.places.Autocomplete !== 'function') { if (typeof google.maps.places.Autocomplete !== 'function') {
@@ -55,7 +76,7 @@ export default {
...this.options, ...this.options,
} }
this.$autocomplete = new google.maps.places.Autocomplete(this.$refs.input, finalOptions) this.$autocomplete = new google.maps.places.Autocomplete(refInput, finalOptions)
bindProps(this, this.$autocomplete, mappedProps) bindProps(this, this.$autocomplete, mappedProps)
this.$watch('componentRestrictions', (v) => { this.$watch('componentRestrictions', (v) => {

2
src/components/cluster.vue
View File

@@ -98,7 +98,7 @@ export default buildComponent({
}, },
updated() { updated() {
if (this.$clusterObject) { if (this.$clusterObject) {
this.$clusterObject.repaint() this.$clusterObject.render()
} }
}, },
beforeUnmount() { beforeUnmount() {