Documentation for 0.1.5

.github/ISSUE_TEMPLATE/bug_report.md

@@ -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.
 
+**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!
+
 **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
+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**
 
-**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**
+**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.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -11,12 +11,20 @@ assignees: ''
 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.
 
+**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!
+
 **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
+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**
 
-**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**
+**OK! You can delete everything until here!**
+**You can also delete whatever part you want in this issue, but please make it clear**
 
 **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.

README.md

@@ -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.

docs/package.json

@@ -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",

docs/src/.vuepress/config.js

@@ -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',
         ],
       },
     ],

docs/src/components/cluster.md

@@ -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
         ],
       }
     },

docs/src/examples/README.md

@@ -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)

docs/src/examples/using-custom-renderer-function-and-clustering-algorithm.md

@@ -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>
+```

docs/src/index.md

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

package.json

@@ -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": [