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

Updated version and docs to prepare for 0.1.5. Also fixed the README and the issue template to be more organic.

Browse Source
This commit is contained in:
NathanAP
2022-11-17 19:12:31 -03:00
parent 08b742c7c6
commit 04c3555bab
11 changed files with 139 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ labels: ''
assignees: ''
---
**Read before opening a new issue**
**Read before opening a new issue (I suggest you read in preview mode)**
**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.
@@ -15,12 +15,20 @@ Notice that if you create a question issue, we will close it and create a new di
You should trying enabling events before using them.
More details here: https://vue-map.netlify.app/docs/#register-google-maps-events.
**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
**Playcode support**
We strongly recommend you to use Playcode to reproduce your code!
You can find a small template [here](https://playcode.io/1012771).
Following the steps on the template will make things really, really easier!
**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**
**Codepen support**
You can use Codepen to report your bug as well!
In your Codepen, go to Settings, then select JS. In Add Packages section, search for vue-google-maps-community-fork.
TBH Codepen isn't a really good option because of the file structure, but feel free to use if you prefer it!
**Lastly, remember to look if this issue isn't already created**
**OK! You can delete everything until here!**
**You can also delete whatever part you want in this issue, but please make it clear**
**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.

22
README.md
View File

@@ -54,11 +54,16 @@ app
.mount('#app')
```
### IMPORTANT ABOUT CONFIGURATION
### AN IMPORTANT POINT ABOUT YOUR CONFIGURATION
If you are getting a "Requested module 'fast-deep-equal' does not provide an export named 'default'" error, please notice:
You might be getting the following error:
- We are are aware of [this error](https://github.com/NathanAP/vue-google-maps-community-fork/issues/4) and we hope that it will be fixed soon.
`Requested module 'fast-deep-equal' does not provide an export named 'default'`
Please notice:
- [We are aware](https://github.com/NathanAP/vue-google-maps-community-fork/issues/4) of this problem.
- We hope that it will be fixed soon enough.
- To avoid it right now, you need to do this configuration in your `vite.config.js`:
```js
@@ -70,7 +75,8 @@ If you are getting a "Requested module 'fast-deep-equal' does not provide an exp
},
```
- This **WILL NOT** fix it. This is a hack, please follow the issue to keep track of the situation.
- This **IS NOT** a fix. This is just a hack we are using to avoid the problem.
- Please subscribe to the issue to stay in touch with this problem
### Use it anywhere in your components
@@ -129,6 +135,8 @@ export default {
If you have too many markers, it is helpful to cluster markers. You can easily cluster markers by wrapping your markers with `GMapCluster` component.
Note: clusters were not working in the original version of this package. All of the clusters are here because of the community fixes. If you're having trouble with it please [try using the docs](https://vue-google-maps-community-fork.netlify.app/components/cluster.html). Also, feel free to open discussions or issues to get help.
```vue
<template>
<GMapMap :center="center" :zoom="7" map-type-id="terrain" style="width: 500px; height: 300px">
@@ -156,7 +164,7 @@ export default {
lat: 51.093048,
lng: 6.84212,
},
}, // Along list of clusters
}, // A long list of clusters
],
}
},
@@ -295,3 +303,7 @@ export default defineNuxtPlugin((nuxtApp) => {
})
})
```
## Sponsorship
Please read [this discussion](https://github.com/NathanAP/vue-google-maps-community-fork/discussions/1) where we talk about sponsorships.

20
docs/package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "vue-google-maps-community-fork-docs",
"version": "0.0.1",
"version": "0.1.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "vue-google-maps-community-fork-docs",
"version": "0.0.1",
"version": "0.1.0",
"license": "MIT",
"devDependencies": {
"vuepress": "^1.9.7"
@@ -8742,9 +8742,9 @@
}
},
"node_modules/loader-utils": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"dependencies": {
"big.js": "^5.2.2",
@@ -13861,7 +13861,7 @@
"node_modules/vuepress-html-webpack-plugin/node_modules/loader-utils": {
"version": "0.2.17",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
"integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
"integrity": "sha512-tiv66G0SmiOx+pLWMtGEkfSEejxvb6N6uRrQjfWJIT79W9GMpgKeCAmm9aVBKtd4WEgntciI8CsGqjpDoCWJug==",
"dev": true,
"dependencies": {
"big.js": "^3.1.3",
@@ -21527,9 +21527,9 @@
"dev": true
},
"loader-utils": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
@@ -25767,7 +25767,7 @@
"loader-utils": {
"version": "0.2.17",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
"integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
"integrity": "sha512-tiv66G0SmiOx+pLWMtGEkfSEejxvb6N6uRrQjfWJIT79W9GMpgKeCAmm9aVBKtd4WEgntciI8CsGqjpDoCWJug==",
"dev": true,
"requires": {
"big.js": "^3.1.3",

4
docs/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "vue-google-maps-community-fork-docs",
"version": "0.0.1",
"version": "0.1.0",
"description": "Documentation for Vue Google Maps Community Fork",
"main": "index.js",
"authors": {
@@ -9,7 +9,7 @@
},
"repository": "NathanAP/vue-google-maps-community-fork",
"scripts": {
"dev": "vuepress dev src",
"dev": "NODE_OPTIONS=--openssl-legacy-provider vuepress dev src",
"build": "vuepress build src"
},
"license": "MIT",

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

@@ -85,6 +85,7 @@ module.exports = {
'/examples/how-to-access-google-maps-object',
'/examples/how-to-add-custom-controls',
'/examples/how-to-open-or-close-info-window-on-event',
'/examples/using-custom-renderer-function-and-clustering-algorithm',
],
},
],

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

@@ -1,9 +1,13 @@
# Cluster
Here you will find some uses for Google Maps Cluster component:
Here you will find some uses for Google Maps Clusterers.
[[toc]]
## Before everything
Clustering your markers are only possible because of `@googlemaps/markerclusterer`! The community is thankful for your effort!
## Cluster your markers
You can add clusters to your `GMapMarker` using `GMapCluster` component inside of `GMapMap` component:
@@ -36,7 +40,7 @@ You can add clusters to your `GMapMarker` using `GMapCluster` component inside o
lat: 51.093048,
lng: 6.84212,
},
}, // Along list of clusters
}, // A long list of clusters
],
}
},

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

@@ -11,3 +11,5 @@ Here you will find some basic examples that might be useful for you.
- [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)
- [Using custom renderer function and clustering algorithm](./using-custom-renderer-function-and-clustering-algorithm.md)

71
docs/src/examples/using-custom-renderer-function-and-clustering-algorithm.md Normal file
View File

@@ -0,0 +1,71 @@
# Using custom renderer function and clustering algorithm
In order to use custom renderer function and clustering algorithm, you will need to do the following step before:
## Install `@googlemaps/makerclusterer` package into your own project
Use `npm install @googlemaps/markerclusterer` to install the library into your project.
Note: this is required because it was the best option for us to make Clustering viable. The original version of this library wasn't supporting the new MarkerClustering package version, so we had to make adjustments. You can read more about it in [this PR](https://github.com/NathanAP/vue-google-maps-community-fork/pull/19).
## Example
Following this example will help you create your own render function and clustering algorithm.
```html
<template>
<GMapMap
ref="google"
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GMapCluster :algorithm="algorithm" :renderer="{ renderer: renderer }">
<GMapMarker
v-for="(m, index) in markers"
:key="index"
:clickable="true"
:draggable="true"
:position="m.position"
@click="center = m.position"
/>
</GMapCluster>
</GMapMap>
</template>
<script>
import { GridAlgorithm } from '@googlemaps/markerclusterer'
export default {
name: 'App',
data() {
return {
algorithm: new GridAlgorithm({}),
center: { lat: 51.093048, lng: 6.84212 },
google: null,
markers: [
{
position: {
lat: 51.093048,
lng: 6.84212,
},
}, // A long list of clusters
],
}
},
methods: {
renderer: ({ count, position }) =>
new this.google.maps.Marker({
label: {
text: String(count),
color: 'white',
fontSize: '10px',
},
position,
// adjust zIndex to be above other markers
zIndex: Number(this.google.maps.Marker.MAX_ZINDEX) + count,
}),
},
}
</script>
```

2
docs/src/index.md
View File

@@ -100,7 +100,7 @@ export default {
lat: 51.093048,
lng: 6.84212,
},
}, // Along list of clusters
}, // A long list of clusters
],
}
},

28
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "vue-google-maps-community-fork",
"version": "0.1.4",
"version": "0.1.5",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "vue-google-maps-community-fork",
"version": "0.1.4",
"version": "0.1.5",
"license": "MIT",
"dependencies": {
"@googlemaps/markerclusterer": "^2.0.3"
@@ -3685,9 +3685,9 @@
}
},
"node_modules/loader-utils": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"dependencies": {
"big.js": "^5.2.2",
@@ -5149,9 +5149,9 @@
}
},
"node_modules/vue-style-loader/node_modules/loader-utils": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"dependencies": {
"big.js": "^5.2.2",
@@ -8046,9 +8046,9 @@
"dev": true
},
"loader-utils": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
@@ -9059,9 +9059,9 @@
}
},
"loader-utils": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"requires": {
"big.js": "^5.2.2",

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "vue-google-maps-community-fork",
"description": "Google Maps components for VueJS 3 maintained by the community",
"version": "0.1.4",
"version": "0.1.5",
"private": false,
"main": "src/main.js",
"keywords": [