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

fixed a lot of details in the docs to make it better

Browse Source
This commit is contained in:
NathanAP
2022-10-18 09:21:56 -03:00
parent 749a090b5f
commit e81b96471f
22 changed files with 15548 additions and 886 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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)

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

@@ -1,52 +1,49 @@
# 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");
</script>
.mount('#app')
```
## Adding Autocomplete to your components
## Add autocomplete to your components
You can add autocomplete to your maps using GMapAutocomplete component.
```vue
You can add an Autocomplete to your `template` using `GMapAutocomplete` component:
```html
<template>
<GMapAutocomplete
placeholder="This is a placeholder"
@place_changed="setPlace"
>
</GMapAutocomplete>
<GMapAutocomplete placeholder="This is a placeholder" @place_changed="setPlace" />
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
methods: {
setPlace() {
}
}
}
</script>
<script>
export default {
name: 'App',
data() {
return {}
},
methods: {
setPlace() {},
},
}
</script>
```
## Custom options
You can pass google maps auto complete options using options prop
## Adding custom options
You can pass Google Maps Autocomplete options using the prop `options`:
```vue{9}
<template>

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

@@ -1,87 +1,86 @@
# 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"
:radius="Math.sqrt(city.population) * 100"
:center="{ lat: city.position.lat, lng: city.position.lng}"
:key="city.id"
v-for="city in germanCities"
:radius="Math.sqrt(city.population) * 100"
:center="{ lat: city.position.lat, lng: city.position.lng }"
/>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
germanCities: [
{
id: 'duesseldorf',
population: 612178,
position: {
lat: 51.233334, lng: 6.783333
export default {
name: 'App',
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
germanCities: [
{
id: 'Duesseldorf',
population: 612178,
position: {
lat: 51.233334,
lng: 6.783333,
},
},
},
{
id: 'koeln',
position: {
lat: 50.935173, lng: 6.953101
{
id: 'Koeln',
position: {
lat: 50.935173,
lng: 6.953101,
},
population: 1087863,
},
population: 1087863
},
{
id: 'Hamburg',
position: {
lat: 53.551086,
lng: 9.993682
{
id: 'Hamburg',
position: {
lat: 53.551086,
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>
export default {
name: 'App',
data() {
return {
circleOptions: {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
},
}
},
}
<script>
export default {
name: 'App',
data() {
return {
circleOptions: {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
},
}
},
}
</script>
```
```

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

@@ -1,70 +1,73 @@
# 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"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center = m.position"
/>
</GMapCluster>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
markers: [
{
position: {
lat: 51.093048, lng: 6.842120
},
}
, // Along list of clusters
]
}
export default {
name: 'App',
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
markers: [
{
position: {
lat: 51.093048,
lng: 6.84212,
},
}, // 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"
```js
:minimumClusterSize="2"
```
### styles
With styles prop, you can control style and icon of clusters.
``` js
Controls style and icon of clusters:
```js
:styles="clusterIcon"
```
### zoomOnClick
Defines whether clusters should zoom in, when clicked.
``` js
Defines whether clusters should zoom in, when clicked:
```js
:zoomOnClick="true"
```

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

@@ -1,127 +1,59 @@
# 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
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
>
<GMapInfoWindow>
<div>I am in info window <MyComponent/>
</div>
</GMapInfoWindow>
</GMapMarker>
## 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">
<GMapInfoWindow>
<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}
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
>
<GMapInfoWindow
:opened="true"
>
<div>I am in info window <MyComponent/>
</div>
</GMapInfoWindow>
</GMapMarker>
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</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}
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
>
<GMapInfoWindow
:opened="true"
:options=" {
```html
<GMapMap>
<GMapMarker :key="index" v-for="(m, index) in markers">
<GMapInfoWindow
:opened="true"
:options=" {
pixelOffset: {
width: 10, height: 0
},
maxWidth: 320,
maxHeight: 320,
}"
>
<div>I am in info window <MyComponent/>
</div>
</GMapInfoWindow>
</GMapMarker>
>
<div>I am in info window</div>
<MyComponent text="I am a custom component inside the info window!" />
</GMapInfoWindow>
</GMapMarker>
</GMapMap>
```

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

@@ -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
<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>
<template>
<GMapMap :center="center"
:options="options"
: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" />
</GMapCluster>
</GMapMap>
</template>
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"
:options="options"
: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"
/>
</GMapCluster>
</GMapMap>
</template>
<script>
export default {
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
options: {
styles: [
// here comes the styles your
],
},
};
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
options: {
styles: [
// 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>
<template>
<GMapMap :center="center"
:options="options"
:zoom="10"
map-type-id="terrain"
style="width: 100vw; height: 20rem">
</GMapMap>
</template>
```html
<template>
<GMapMap
:center="center"
:options="options"
:zoom="10"
map-type-id="terrain"
style="width: 100vw; height: 20rem"
>
</GMapMap>
</template>
<script>
export default {
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
options: {
mapId:'xxx' //here comes your map id
},
};
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
options: {
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}
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
:options="{
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: true,
}"
/>
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:
## Access google maps instance
You can easily access Map instance by accessing map ref in your component.
```vue
```html
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
ref="myMapRef"
:disableDefaultUI="true"
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
:options="{
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: true,
}"
/>
```
## Add custom button
You can use the map instance to add custom buttons to your map.
## Access Google Maps instance
```vue
<template>
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
ref="myMapRef"
:disableDefaultUI="true"
/>
</template>
<script >
import { ref, watch } from "vue";
You can easily access the Map instance by accessing `ref` in your component:
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>
```html
<GMapMap
:center="{ lat: 51.093048, lng: 6.84212 }"
:zoom="7"
ref="myMapRef"
:disableDefaultUI="true"
/>
```

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

@@ -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
<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',
data() {
return {
markers: [
{
position: {
lat: 51.093048, lng: 6.842120
},
}
]
}
},
}
</script>
<script>
export default {
name: 'App',
data() {
return {
markers: [
{
position: {
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,20 +88,19 @@ 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"
:position="m.position"
:icon= '{
:icon='{
url: "https://image.flaticon.com/teams/slug/google.jpg",
scaledSize: {width: 77, height: 77},
labelOrigin: {x: 16, y: -10}

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

@@ -1,63 +1,61 @@
# 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>
export default {
name: 'App',
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 },
],
}
},
}
export default {
name: 'App',
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 },
],
}
},
}
</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",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35,
export default {
name: 'App',
data() {
return {
options: {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
},
}
}
},
}
},
}
</script>
```
```

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

@@ -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
<template>
<GMapPolyline
:path="path"
:editable="true"
ref="polyline" />
<GMapPolyline :path="path" ref="polyline" />
</template>
<script>
export default {
name: 'App',
data() {
return {
center: {lat: 1.38, lng: 103.8},
path: [
{lat: 1.33, lng: 103.75},
{lat: 1.43, lng: 103.85},
],
}
},
}
</script>
```
## Make polyline editable
You can make Polyline editable using `editable` prop.
```vue
<template>
<GMapMap>
<GMapPolygon
:editable="true"
:paths="paths"/>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
}
</script>
```
## Polyline options
You can set Polyline options using `options` prop.
```vue
<template>
<GMapMap>
<GMapPolygon :paths="paths"/>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
options: {
export default {
name: 'App',
data() {
return {
center: { lat: 1.38, lng: 103.8 },
path: [
{ lat: 1.33, lng: 103.75 },
{ lat: 1.43, lng: 103.85 },
],
}
}
},
}
},
}
</script>
```
## Making polyline editable
You can make your `GMapPolyline` component editable using `editable` prop:
```html
<template>
<GMapMap>
<GMapPolyline :editable="true" :paths="paths" />
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {}
},
}
</script>
```
## Adding custom options
You can pass Google Maps Polyline options using the prop `options`:
```html
<template>
<GMapMap>
<GMapPolyline :options="options" />
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
options: {},
}
},
}
</script>
```

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

@@ -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
<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',
data() {
return {
center: {lat: 33.685, lng: 33.671},
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
}
},
}
</script>
<script>
export default {
name: 'App',
data() {
return {
center: { lat: 33.685, lng: 33.671 },
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
}
},
}
</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',
data() {
return {
center: {lat: 33.685, lng: 33.671},
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
options: {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
}
}
},
}
</script>
<script>
export default {
name: 'App',
data() {
return {
center: { lat: 33.685, lng: 33.671 },
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
options: {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
},
}
},
}
</script>
```

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

@@ -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
<template>
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
map-type-id="terrain"
style="width: 100vw; height: 900px"
:center="{ lat: 51.093048, lng: 6.84212 }"
:zoom="7"
map-type-id="terrain"
style="width: 100vw; height: 900px"
>
</GMapMap>
</template>
<script >
<script>
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
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.
```
<GMapInfoWindow
:closeclick="true"
@closeclick="closeMarker"
:opened="openedMarkerID === m.id"
>
<div>I am in info window {{ m.id }}</div>
```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)

84
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"
@@ -31,51 +29,49 @@ To access Google maps object, or do something when map is loaded, use a ref on t
</template>
<script>
export default {
mounted() {
this.$refs.myMapRef.$mapPromise.then((mapObject) => {
console.log('map is loaded now', mapObject);
});
},
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
markers: [
{
position: {
lat: 51.093048,
lng: 6.84212,
export default {
mounted() {
this.$refs.myMapRef.$mapPromise.then((mapObject) => {
console.log('map is loaded now', mapObject)
})
},
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
markers: [
{
position: {
lat: 51.093048,
lng: 6.84212,
},
},
},
{
position: {
lat: 51.198429,
lng: 6.69529,
{
position: {
lat: 51.198429,
lng: 6.69529,
},
},
},
{
position: {
lat: 51.165218,
lng: 7.067116,
{
position: {
lat: 51.165218,
lng: 7.067116,
},
},
},
{
position: {
lat: 51.09256,
lng: 6.84074,
{
position: {
lat: 51.09256,
lng: 6.84074,
},
},
},
],
};
},
};
],
}
},
}
</script>
<style>
body {
margin: 0;
}
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>
```

120
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"
@@ -31,75 +29,73 @@ To add custom controls, you can access google maps object and add controls to it
</template>
<script>
export default {
mounted() {
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
);
});
},
methods: {
addCenterControl(controlDiv, map) {
const controlUI = document.createElement('div');
export default {
mounted() {
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)
})
},
methods: {
addCenterControl(controlDiv, map) {
const controlUI = document.createElement('div')
controlUI.innerHTML = `
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);
controlUI.addEventListener('click', () => {
// Do what ever you want to happen on click event
map.setCenter({
lat: 53.57532,
lng: 10.01534,
});
});
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() {
return {
center: { lat: 51.093048, lng: 6.84212 },
markers: [
{
position: {
lat: 51.093048,
lng: 6.84212,
data() {
return {
center: { lat: 51.093048, lng: 6.84212 },
markers: [
{
position: {
lat: 51.093048,
lng: 6.84212,
},
},
},
{
position: {
lat: 51.198429,
lng: 6.69529,
{
position: {
lat: 51.198429,
lng: 6.69529,
},
},
},
{
position: {
lat: 51.165218,
lng: 7.067116,
{
position: {
lat: 51.165218,
lng: 7.067116,
},
},
},
{
position: {
lat: 51.09256,
lng: 6.84074,
{
position: {
lat: 51.09256,
lng: 6.84074,
},
},
},
],
};
},
};
],
}
},
}
</script>
<style>
body {
margin: 0;
}
body {
margin: 0;
}
</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>
```

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

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

85
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,46 +28,45 @@
</template>
<script>
import {ref, onMounted} from "vue";
import {setupContainsLatLng} from '../util/is-point-within-polygon.js'
import { ref, onMounted } from 'vue'
import { setupContainsLatLng } from '../util/is-point-within-polygon.js'
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();
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})
})
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,
}
},
}
};
</script>
```

71
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,48 +17,57 @@ 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',
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"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center = m.position"
/>
</GMapCluster>
</GMapMap>
@@ -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>
```