- I am in info window {{ m.id }}
+```html
+
+ I am in info window {{ m.id }}
```
+
+- 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')
+```
diff --git a/docs/src/examples/README.md b/docs/src/examples/README.md
index 12c1972..e82c2ba 100644
--- a/docs/src/examples/README.md
+++ b/docs/src/examples/README.md
@@ -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)
diff --git a/docs/src/examples/how-to-access-google-maps-object.md b/docs/src/examples/how-to-access-google-maps-object.md
index 7d4e319..98028c4 100644
--- a/docs/src/examples/how-to-access-google-maps-object.md
+++ b/docs/src/examples/how-to-access-google-maps-object.md
@@ -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
-
-
```
diff --git a/docs/src/examples/how-to-add-a-custom-button-to-map.md b/docs/src/examples/how-to-add-a-custom-button-to-map.md
new file mode 100644
index 0000000..3a11db9
--- /dev/null
+++ b/docs/src/examples/how-to-add-a-custom-button-to-map.md
@@ -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
+
+
+
+
+
+```
diff --git a/docs/src/examples/how-to-add-custom-controls.md b/docs/src/examples/how-to-add-custom-controls.md
index 182f6e3..ba0f319 100644
--- a/docs/src/examples/how-to-add-custom-controls.md
+++ b/docs/src/examples/how-to-add-custom-controls.md
@@ -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
```
diff --git a/docs/src/examples/how-to-open-or-close-info-window-on-event.md b/docs/src/examples/how-to-open-or-close-info-window-on-event.md
new file mode 100644
index 0000000..94dd9c3
--- /dev/null
+++ b/docs/src/examples/how-to-open-or-close-info-window-on-event.md
@@ -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
+
+
+
+
+ I am in info window {{ m.id }}
+
+
+
+
+
+
+
+
+```
diff --git a/docs/src/examples/introduction.md b/docs/src/examples/introduction.md
index 201b960..bca6218 100644
--- a/docs/src/examples/introduction.md
+++ b/docs/src/examples/introduction.md
@@ -2,9 +2,8 @@
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
-Currently `Map`, `Marker`, `InfoWindow`, `Polyline`, `Polygon` and `Rectangle` are supported.
-
-Other components are still under development.
+Currently `Map`, `Marker`, `InfoWindow`, `Polyline`, `Polygon` and `Rectangle` are supported.
+Other components are still under development.
Checkout getting started to read, how to install and use vue-google-maps
diff --git a/docs/src/examples/points-in-polygon.md b/docs/src/examples/points-in-polygon.md
index 3525db7..98beb6c 100644
--- a/docs/src/examples/points-in-polygon.md
+++ b/docs/src/examples/points-in-polygon.md
@@ -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
+
+ style="width: 100vw; height: 20rem"
+ >
{
- let isWithinPolygon = res.containsLatLng(event.latLng.lat(), event.latLng.lng());
- console.log({isWithinPolygon})
- })
+ export default {
+ data() {
+ return {
+ center: { lat: 25.774, lng: -80.19 },
+ paths: [
+ { lat: 25.774, lng: -80.19 },
+ { lat: 18.466, lng: -66.118 },
+ { lat: 32.321, lng: -64.757 },
+ ],
}
- }
+ },
+ setup() {
+ const myMapRef = ref()
+ const mapPolygon = ref()
- onMounted(() => {
- myMapRef.value.$mapPromise.then(() => {
- setupContainsLatLng();
+ function handleClick(event) {
+ if (event.latLng?.lat) {
+ mapPolygon.value.$polygonPromise.then((res) => {
+ let isWithinPolygon = res.containsLatLng(event.latLng.lat(), event.latLng.lng())
+ console.log({ isWithinPolygon })
+ })
+ }
+ }
+
+ onMounted(() => {
+ myMapRef.value.$mapPromise.then(() => {
+ setupContainsLatLng()
+ })
})
- })
- return {
- myMapRef,
- mapPolygon,
- handleClick
- }
+ return {
+ myMapRef,
+ mapPolygon,
+ handleClick,
+ }
+ },
}
-};
-
```
diff --git a/docs/src/index.md b/docs/src/index.md
index 642bdd9..9c31a02 100644
--- a/docs/src/index.md
+++ b/docs/src/index.md
@@ -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,48 +17,57 @@ actionLink: /docs/
href="https://stackblitz.com/edit/vue-google-maps-marker?file=src%2Fcomponents%2FComponentWithMap.vue">View example
+## 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',
+ 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
-
+
@@ -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
+ ],
}
- }
+ },
}
```