-
-
+
+## 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
+
+
+
+
I am in info window
+
+
+
```
-## Open/close info window
-You can pass `opened` prop to open and close InfoWindows.
+## Opening or closing an Info window
-```vue{7}
-
-
-
-
I am in info window
-
-
-
+You can pass the `opened` prop to open or close a `GMapInfoWindow`:
+
+```html
+
+
+
+
I am in info window
+
+
+
```
+## 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
-
-
-
-
-
I am in info window {{ m.id }}
-
-
-
-
-
-
-
-
-```
-
-
-## Options
-You can pass any Google map InfoWindow component using `options` prop
-
-
-```vue{8-14}
-
-
-
+
-
I am in info window
-
-
-
+ >
+
I am in info window
+
+
+
```
diff --git a/docs/src/components/map.md b/docs/src/components/map.md
index d42eeee..08cc3cc 100644
--- a/docs/src/components/map.md
+++ b/docs/src/components/map.md
@@ -1,167 +1,132 @@
# 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
-
+You can create a Google Map component using `GMapMap`:
+
+```html
+
+
```
+
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}
-
```
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}
-
```
-## Disable ui elements
-You can disable all ui components at once
-```vue{4}
-
-```
-You can also disable specific UI components
+## Disable UI elements
-```vue{4-11}
-
+You can disable all UI components at once:
+
+```html
+
```
+You can also disable specific UI components:
-## Access google maps instance
-You can easily access Map instance by accessing map ref in your component.
-
-```vue
+```html
```
-## Add custom button
-You can use the map instance to add custom buttons to your map.
+## Access Google Maps instance
-```vue
-
-
-
-
+```html
+
```
diff --git a/docs/src/components/marker.md b/docs/src/components/marker.md
index 86b9b90..715f8c6 100644
--- a/docs/src/components/marker.md
+++ b/docs/src/components/marker.md
@@ -1,44 +1,46 @@
# 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
-
+
-
+
```
-## 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
-
+
```
-## 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
-
+
```
-## 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
-
+
```
+
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
-
+
-
-
+
+
```
+## 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
-
+
+
-```
\ No newline at end of file
+```
diff --git a/docs/src/components/polyline.md b/docs/src/components/polyline.md
index 8add8b6..e3a6594 100644
--- a/docs/src/components/polyline.md
+++ b/docs/src/components/polyline.md
@@ -1,73 +1,74 @@
# 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
-
+
+
-```
-
-## Make polyline editable
-You can make Polyline editable using `editable` prop.
-
-```vue
-
-
-
-
-
-
-```
-
-## Polyline options
-You can set Polyline options using `options` prop.
-
-```vue
-
-
-
-
-
-
+```
+
+## Making polyline editable
+
+You can make your `GMapPolyline` component editable using `editable` prop:
+
+```html
+
+
+
+
+
+
+
+```
+
+## Adding custom options
+
+You can pass Google Maps Polyline options using the prop `options`:
+
+```html
+
+
+
+
+
+
+
```
diff --git a/docs/src/components/rectangle.md b/docs/src/components/rectangle.md
index 4d83b3c..3f18e45 100644
--- a/docs/src/components/rectangle.md
+++ b/docs/src/components/rectangle.md
@@ -1,81 +1,70 @@
# 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
-
-
+
+
-
+
```
-## 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
-
-
+
+
-
+
```
diff --git a/docs/src/docs/README.md b/docs/src/docs/README.md
index 03daa54..56c75cb 100644
--- a/docs/src/docs/README.md
+++ b/docs/src/docs/README.md
@@ -1,84 +1,97 @@
-# 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',
+ 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
-
```
+## 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.
-```
-app.use(VueGoogleMaps, {
- load: {
- key: 'YOUR_API_KEY_COMES_HERE',
- },
- autobindAllEvents: true,
-}).mount('#app')
-```
+In this example, we enable `closeclick` event for `GMapInfoWindow` component and register the event.
-Or better yet, they should be activated when needed.
-
-
-In this example, we enable `closeclick` event for `GMapInfoWindow` component and register the event.
-
-```
-
-
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
+ ],
}
- }
+ },
}
```
diff --git a/src/components/autocomplete.vue b/src/components/autocomplete.vue
index c5ab04f..7ee1279 100644
--- a/src/components/autocomplete.vue
+++ b/src/components/autocomplete.vue
@@ -1,5 +1,16 @@
-
+
+
+
+