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
about: Create a report to help us improve
name: Report a new bug
about: Create a bug report to help our library improve
title: ''
labels: ''
assignees: ''
---
**Are you asking a question?**
If you are asking a question, please use Github discussions for that.
**Read before opening a new issue**
**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?**
You should enable events, before using them https://vue-google-maps-community-fork.netlify.app/docs/#registering-google-maps-events.
**Having problems with an event?**
You should trying enabling events before using them.
More details here: https://vue-map.netlify.app/docs/#register-google-maps-events.
**Describe the bug**
A clear and concise description of what the bug is.
**Codepen support**
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**
Steps to reproduce the behavior:
**You can delete whatever part you want in this issue, but please be clear and remember to use the Preview option**
**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 '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**What were your expecting to happen?**
A description of the expected behavior.
**What happened?**
A description of the actual behavior.
**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]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
- In which OS are you seeing this bug? Examples: Windows 11, Ubuntu, iOS.
- If it is relevant, what browser are you? Examples: Chrome, Safari, Opera.
- What is your npm version? You can check using npm -v.
- What is your vue version? You can check using npm list.
- What is your vue-google-maps-community-fork version? You can check using npm list.
**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
about: Suggest an idea for this project
about: Suggest a new feature to make our library better
title: ''
labels: ''
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Read before opening a new issue**
**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**
A clear and concise description of what you want to happen.
**Codepen support**
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**
A clear and concise description of any alternative solutions or features you've considered.
**You can delete whatever part you want in this issue, but please be clear and remember to use the Preview option**
**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**
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",
"description": "Vue.js 3 components for Google maps",
"description": "Documentation for Vue Google Maps Community Fork",
"main": "index.js",
"authors": {
"name": "Fawad Mirzad",
"email": "hi@fawmi.com"
"name": "Nathan A Paludo",
"email": "natspaludo@gmail.com"
},
"repository": "fawmi/vue-google-maps-docs/vue-google-maps-docs",
"repository": "NathanAP/vue-google-maps-community-fork",
"scripts": {
"dev": "vuepress dev 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
*/
title: 'Vue 3 Google maps',
title: 'Vue 3 Google Maps - Community Fork',
/**
* Ref：https://v1.vuepress.vuejs.org/config/#description
*/
@@ -18,7 +18,7 @@ module.exports = {
head: [
['meta', { name: 'theme-color', content: '#2c3e50' }],
['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: '',
editLinkText: '',
logo: '/assets/logo.jpg',
head: [
['meta', { name: 'theme-color', content: '#2c3e50' }],
],
head: [['meta', { name: 'theme-color', content: '#2c3e50' }]],
lastUpdated: false,
nav: [
{
@@ -42,13 +40,13 @@ module.exports = {
link: '/docs/',
},
{
text: 'Github',
link: 'https://github.com/fawmi/vue-google-maps'
text: 'GitHub',
link: 'https://github.com/NathanAP/vue-google-maps-community-fork',
},
{
text: 'NPM',
link: 'https://www.npmjs.com/package/@fawmi/vue-google-maps'
}
text: 'npm',
link: 'https://www.npmjs.com/package/vue-google-maps-community-fork',
},
],
sidebar: [
{
@@ -73,7 +71,7 @@ module.exports = {
'/components/polyline',
'/components/rectangle',
'/components/autocomplete',
]
],
},
{
title: 'Examples',
@@ -82,20 +80,18 @@ module.exports = {
sidebarDepth: 0,
path: '/examples/',
children: [
'/examples/how-to-add-a-custom-button-to-map',
'/examples/points-in-polygon',
'/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/
*/
plugins: [
'@vuepress/plugin-back-to-top',
'@vuepress/plugin-medium-zoom',
]
plugins: ['@vuepress/plugin-back-to-top', '@vuepress/plugin-medium-zoom'],
}

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

@@ -1,24 +1,21 @@
# 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)
[Polyline](./polyline.md)
[Rectangle](./rectangle.md)
- [Rectangle](./rectangle.md)
[Autocomplete](./autocomplete.md)
- [Autocomplete](./autocomplete.md)

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

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

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

@@ -1,16 +1,16 @@
# 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>
<GMapMap
:center="center"
:zoom="6"
map-type-id="terrain"
style="width: 100vw; height: 100vh"
>
<GMapMap :center="center" :zoom="6" map-type-id="terrain" style="width: 100vw; height: 100vh">
<GMapCircle
:key="city.id"
v-for="city in germanCities"
@@ -21,63 +21,62 @@ To add circles, just add the `GMapCircle` component inside `GMapMap` component.
</template>
<script>
export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
center: { lat: 51.093048, lng: 6.84212 },
germanCities: [
{
id: 'duesseldorf',
id: 'Duesseldorf',
population: 612178,
position: {
lat: 51.233334, lng: 6.783333
lat: 51.233334,
lng: 6.783333,
},
},
{
id: 'koeln',
id: 'Koeln',
position: {
lat: 50.935173, lng: 6.953101
lat: 50.935173,
lng: 6.953101,
},
population: 1087863
population: 1087863,
},
{
id: 'Hamburg',
position: {
lat: 53.551086,
lng: 9.993682
lng: 9.993682,
},
population: 1899160
}
]
population: 1899160,
},
],
}
},
}
</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`:
```vue
```html
<GMapMap>
<GMapCircle
:options="circleOptions" />
<GMapCircle :options="circleOptions" />
</GMapMap>
<script>
<script>
export default {
name: 'App',
data() {
return {
circleOptions: {
strokeColor: "#FF0000",
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillColor: '#FF0000',
fillOpacity: 0.35,
},
}

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

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

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

@@ -1,114 +1,46 @@
# Info Window
# Info window
Here you will find some uses for Google Maps Info Window component:
[[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
## Adding info window to your Google Maps components
You can create info window by passing a custom HTML or Vue components as the child of `GMapInfoWindow` component:
```html
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
>
<GMapMarker :key="index" v-for="(m, index) in markers">
<GMapInfoWindow>
<div>I am in info window <MyComponent/>
</div>
<div>I am in info window</div>
<MyComponent text="I am a custom component inside the info window!" />
</GMapInfoWindow>
</GMapMarker>
</GMapMap>
```
## Open/close info window
You can pass `opened` prop to open and close InfoWindows.
## Opening or closing an Info window
```vue{7}
You can pass the `opened` prop to open or close a `GMapInfoWindow`:
```html
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
>
<GMapInfoWindow
:opened="true"
>
<div>I am in info window <MyComponent/>
</div>
<GMapMarker :key="index" v-for="(m, index) in markers">
<GMapInfoWindow :opened="true">
<div>I am in info window</div>
<MyComponent text="I am a custom component inside the info window!" />
</GMapInfoWindow>
</GMapMarker>
</GMapMap>
```
## Adding custom options
### 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.
You can pass any Google Maps Info Window component using the prop `options`:
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}
```html
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
>
<GMapMarker :key="index" v-for="(m, index) in markers">
<GMapInfoWindow
:opened="true"
:options=" {
@@ -119,8 +51,8 @@ You can pass any Google map InfoWindow component using `options` prop
maxHeight: 320,
}"
>
<div>I am in info window <MyComponent/>
</div>
<div>I am in info window</div>
<MyComponent text="I am a custom component inside the info window!" />
</GMapInfoWindow>
</GMapMarker>
</GMapMap>

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

@@ -1,30 +1,44 @@
# Map
Here is where you start. Here you will find some uses for Google Maps component:
[[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
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
/>
You can create a Google Map component using `GMapMap`:
```html
<!-- 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)
## Provide your own style
You can provide custom map styling by providing `style` property to the `options` prop.
## Styling your Google Maps component
You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)
```vue{4}
<script>
You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/).
You can provide custom styles by providing `style` property to the `options` prop:
```html
<template>
<GMapMap :center="center"
<GMapMap
:center="center"
:options="options"
:zoom="10" map-type-id="terrain" style="width: 100vw; height: 20rem">
: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" />
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center = m.position"
/>
</GMapCluster>
</GMapMap>
</template>
@@ -39,28 +53,29 @@ You can generate custom map styles at [https://mapstyle.withgoogle.com/](https:
// here comes the styles your
],
},
};
}
};
},
}
</script>
```
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)
[Documentation: Maps JavaScript API - Using Cloud-based maps styling](https://developers.google.com/maps/documentation/javascript/cloud-based-map-styling)
```vue{4}
<script>
```html
<template>
<GMapMap :center="center"
<GMapMap
:center="center"
:options="options"
:zoom="10"
map-type-id="terrain"
style="width: 100vw; height: 20rem">
style="width: 100vw; height: 20rem"
>
</GMapMap>
</template>
@@ -70,26 +85,25 @@ You can manage your cloud-based styles on [Google Maps Platform: Map Styles](htt
return {
center: { lat: 51.093048, lng: 6.84212 },
options: {
mapId:'xxx' //here comes your map id
mapId: 'xxx', //here comes your map id
},
}
},
};
}
};
</script>
```
## 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
## Disable UI elements
```vue{4-11}
You can disable all UI components at once:
```html
<GMapMap :center="{lat: 51.093048, lng: 6.842120}" :zoom="7" :disableDefaultUI="true" />
```
You can also disable specific UI components:
```html
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
@@ -104,64 +118,15 @@ You can also disable specific UI components
/>
```
## Access Google Maps instance
## Access google maps instance
You can easily access Map instance by accessing map ref in your component.
You can easily access the Map instance by accessing `ref` in your component:
```vue
```html
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:center="{ lat: 51.093048, lng: 6.84212 }"
: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>
```

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

@@ -1,17 +1,20 @@
# Marker
Here you will find some uses for Google Maps Marker component:
[[toc]]
## Add marker to your components
With a marker, you can show specific locations on the map
```vue
## Adding marker to your components
You can add markers to your Maps using `GMapMarker` component inside of `GMapMap` component:
```html
<template>
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
/>
<GMapMarker :key="index" v-for="(m, index) in markers" />
</GMapMap>
</template>
<script>
export default {
name: 'App',
@@ -20,25 +23,24 @@ export default {
markers: [
{
position: {
lat: 51.093048, lng: 6.842120
lat: 51.093048,
lng: 6.84212,
},
}
]
},
],
}
},
}
</script>
```
## Enable/Disable events
You can enable or disable map events by passing props.
## Enabling or disabling events
```vue{9,10}
You can enable or disable the Google Maps Marker events by passing `props`:
```html
<template>
<GMapMap
ref="myMarker"
>
<GMapMap ref="myMarker">
<GMapMarker
:key="index"
v-for="(m, index) in markers"
@@ -50,14 +52,13 @@ You can enable or disable map events by passing props.
</template>
```
## Register events
You can register events like click, the same as you do in your vue components
## Registering events
```vue{9}
You can register events (like click) in the same way as you do in your Vue components:
```html
<template>
<GMapMap
ref="myMarker"
>
<GMapMap ref="myMarker">
<GMapMarker
:key="index"
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>
```
## Add custom icon
To use custom icon, pass `:icon` prop. You can pass a local resource or an image from internet.
```vue{9}
## Adding a custom icon
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>
<GMapMap
ref="myMarker"
>
<GMapMap ref="myMarker">
<GMapMarker
:key="index"
v-for="(m, index) in markers"
@@ -87,15 +88,14 @@ To use custom icon, pass `:icon` prop. You can pass a local resource or an image
</GMapMap>
</template>
```
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>
<GMapMap
ref="myMarker"
>
<GMapMap ref="myMarker">
<GMapMarker
:key="index"
v-for="(m, index) in markers"

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

@@ -1,20 +1,17 @@
# Polygon
Here you will find some uses for Google Maps Polygon component:
[[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>
<GMapMap
:center="center"
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapPolygon
:paths="paths"
/>
<GMapMap :center="center" :zoom="4" style="width: 100vw; height: 100vh">
<GMapPolygon :paths="paths" />
</GMapMap>
</template>
<script>
@@ -34,28 +31,29 @@ export default {
</script>
```
## Adding custom options
## Set polygon options
You can set polygon style and other options using `options` prop.
You can pass Google Maps Polygon options using the prop `options`:
```vue
```html
<template>
<GMapMap>
<GMapPolygon :paths="paths"/>
<GMapPolygon :options="options" />
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
options: {
strokeColor: "#FF0000",
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillColor: '#FF0000',
fillOpacity: 0.35,
}
},
}
},
}

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

@@ -1,17 +1,18 @@
# Polyline
Here you will find some uses for Google Maps Polyline component:
[[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>
<GMapPolyline
:path="path"
:editable="true"
ref="polyline" />
<GMapPolyline :path="path" ref="polyline" />
</template>
<script>
export default {
name: 'App',
@@ -28,44 +29,44 @@ export default {
</script>
```
## Make polyline editable
You can make Polyline editable using `editable` prop.
## Making polyline editable
```vue
You can make your `GMapPolyline` component editable using `editable` prop:
```html
<template>
<GMapMap>
<GMapPolygon
:editable="true"
:paths="paths"/>
<GMapPolyline :editable="true" :paths="paths" />
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
return {}
},
}
</script>
```
## Polyline options
You can set Polyline options using `options` prop.
## Adding custom options
```vue
You can pass Google Maps Polyline options using the prop `options`:
```html
<template>
<GMapMap>
<GMapPolygon :paths="paths"/>
<GMapPolyline :options="options" />
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
options: {
}
options: {},
}
},
}

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

@@ -1,23 +1,20 @@
# Rectangle
Here you will find some uses for Google Maps Rectangle component:
[[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:
```vue
```html
<template>
<GMapMap
:center="center"
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapRectangle
:bounds="bounds"
/>
<GMapMap :center="center" :zoom="4" style="width: 100vw; height: 100vh">
<GMapRectangle :bounds="bounds" />
</GMapMap>
</template>
<script>
export default {
name: 'App',
@@ -34,26 +31,19 @@ export default {
},
}
</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>
<GMapMap
:center="center"
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapRectangle
:bounds="bounds"
:options="options"
/>
<GMapMap :center="center" :zoom="4" style="width: 100vw; height: 100vh">
<GMapRectangle :bounds="bounds" :options="options" />
</GMapMap>
</template>
<script>
export default {
name: 'App',
@@ -67,15 +57,14 @@ export default {
west: -116.251,
},
options: {
strokeColor: "#FF0000",
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillColor: '#FF0000',
fillOpacity: 0.35,
}
},
}
},
}
</script>
```

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

@@ -1,40 +1,51 @@
# Introduction
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
# Getting started
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
```bash
npm install -S @fawmi/vue-google-maps
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).
## Installation
You can install this library using npm:
```
npm install vue-google-maps-community-fork
```
## Basic usage
You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
### Pre-requisites
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`:
```js
import { createApp } from 'vue'
import VueGoogleMaps from '@fawmi/vue-google-maps'
import VueGoogleMaps from 'vue-google-maps-community-fork'
const app = createApp(App);
app.use(VueGoogleMaps, {
const app = createApp(App)
app
.use(VueGoogleMaps, {
load: {
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
<template>
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:center="{ lat: 51.093048, lng: 6.84212 }"
:zoom="7"
map-type-id="terrain"
style="width: 100vw; height: 900px"
@@ -47,38 +58,40 @@ export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
}
center: { lat: 51.093048, lng: 6.84212 },
}
},
}
</script>
```
## Registering Google Maps events
## 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.
To use Google Maps events you have two options:
- 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.
```
<GMapInfoWindow
:closeclick="true"
@closeclick="closeMarker"
:opened="openedMarkerID === m.id"
>
```html
<GMapInfoWindow :closeclick="true" @closeclick="closeMarker" :opened="openedMarkerID === m.id">
<div>I am in info window {{ m.id }}</div>
</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)

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

@@ -1,14 +1,12 @@
# How to access Google Maps object.
[Interactive example on Condesandbox](https://stackblitz.com/edit/vue-google-maps-marker-khyhfk?file=src/components/ComponentWithMap.vue)
# How to access Google Maps object
[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.
## Example
```bash
```html
<template>
<GMapMap
:center="center"
@@ -34,8 +32,8 @@ To access Google maps object, or do something when map is loaded, use a ref on t
export default {
mounted() {
this.$refs.myMapRef.$mapPromise.then((mapObject) => {
console.log('map is loaded now', mapObject);
});
console.log('map is loaded now', mapObject)
})
},
data() {
return {
@@ -66,9 +64,9 @@ export default {
},
},
],
};
}
},
};
}
</script>
<style>
@@ -76,6 +74,4 @@ body {
margin: 0;
}
</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>
```

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

@@ -1,14 +1,12 @@
# How to add custom controls
[Interactive example on Condesandbox](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.
[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 CodeSandbox above.
## Example
```bash
```html
<template>
<GMapMap
:center="center"
@@ -36,31 +34,29 @@ export default {
this.$refs.myMapRef.$mapPromise.then((map) => {
// Create the DIV to hold the control and call the CenterControl()
// constructor passing in this DIV.
const centerControlDiv = document.createElement('div');
this.addCenterControl(centerControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(
centerControlDiv
);
});
const centerControlDiv = document.createElement('div')
this.addCenterControl(centerControlDiv, map)
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv)
})
},
methods: {
addCenterControl(controlDiv, map) {
const controlUI = document.createElement('div');
const controlUI = document.createElement('div')
controlUI.innerHTML = `
<div style="color: white; background: red; padding: 1rem;">
You can click me, i can also be a vue component
</div>
`;
`
controlDiv.appendChild(controlUI);
controlDiv.appendChild(controlUI)
controlUI.addEventListener('click', () => {
// Do what ever you want to happen on click event
map.setCenter({
lat: 53.57532,
lng: 10.01534,
});
});
})
})
},
},
data() {
@@ -92,9 +88,9 @@ export default {
},
},
],
};
}
},
};
}
</script>
<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>
```

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

@@ -6,5 +6,4 @@ Currently `Map`, `Marker`, `InfoWindow`, `Polyline`, `Polygon` and `Rectangle`
Other components are still under development.
Checkout getting started to read, how to install and use vue-google-maps

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

57
docs/src/index.md
View File

@@ -1,7 +1,7 @@
---
home: true
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
actionLink: /docs/
---
@@ -17,40 +17,49 @@ actionLink: /docs/
href="https://stackblitz.com/edit/vue-google-maps-marker?file=src%2Fcomponents%2FComponentWithMap.vue">View example</a>
</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
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
You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
### Pre-requisites
### 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:
```js
import { createApp } from 'vue'
import VueGoogleMaps from '@fawmi/vue-google-maps'
import VueGoogleMaps from 'vue-google-maps-community-fork'
const app = createApp(App);
app.use(VueGoogleMaps, {
const app = createApp(App)
app
.use(VueGoogleMaps, {
load: {
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
<template>
<GMapMap
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GMapMap :center="center" :zoom="7" map-type-id="terrain" style="width: 500px; height: 300px">
<GMapCluster>
<GMapMarker
:key="index"
@@ -68,17 +77,17 @@ export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
center: { lat: 51.093048, lng: 6.84212 },
markers: [
{
position: {
lat: 51.093048, lng: 6.842120
lat: 51.093048,
lng: 6.84212,
},
}, // Along list of clusters
],
}
, // Along list of clusters
]
}
}
},
}
</script>
```

27
src/components/autocomplete.vue
View File

@@ -1,5 +1,16 @@
<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>
<script>
@@ -38,9 +49,19 @@ const props = {
export default {
mounted() {
const _this = this;
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) {
downArrowSimulator(this.$refs.input)
downArrowSimulator(refInput)
}
if (typeof google.maps.places.Autocomplete !== 'function') {
@@ -55,7 +76,7 @@ export default {
...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)
this.$watch('componentRestrictions', (v) => {

2
src/components/cluster.vue
View File

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