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", "version": "0.0.1",
"description": "Vue.js 3 components for Google maps", "description": "Documentation for Vue Google Maps Community Fork",
"main": "index.js", "main": "index.js",
"authors": { "authors": {
"name": "Fawad Mirzad", "name": "Nathan A Paludo",
"email": "hi@fawmi.com" "email": "natspaludo@gmail.com"
}, },
"repository": "fawmi/vue-google-maps-docs/vue-google-maps-docs", "repository": "NathanAP/vue-google-maps-community-fork",
"scripts": { "scripts": {
"dev": "vuepress dev src", "dev": "vuepress dev src",
"build": "vuepress build 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 * 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 * Ref：https://v1.vuepress.vuejs.org/config/#description
*/ */
@@ -18,7 +18,7 @@ module.exports = {
head: [ head: [
['meta', { name: 'theme-color', content: '#2c3e50' }], ['meta', { name: 'theme-color', content: '#2c3e50' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }], ['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: '', docsDir: '',
editLinkText: '', editLinkText: '',
logo: '/assets/logo.jpg', logo: '/assets/logo.jpg',
head: [ head: [['meta', { name: 'theme-color', content: '#2c3e50' }]],
['meta', { name: 'theme-color', content: '#2c3e50' }],
],
lastUpdated: false, lastUpdated: false,
nav: [ nav: [
{ {
@@ -42,13 +40,13 @@ module.exports = {
link: '/docs/', link: '/docs/',
}, },
{ {
text: 'Github', text: 'GitHub',
link: 'https://github.com/fawmi/vue-google-maps' link: 'https://github.com/NathanAP/vue-google-maps-community-fork',
}, },
{ {
text: 'NPM', text: 'npm',
link: 'https://www.npmjs.com/package/@fawmi/vue-google-maps' link: 'https://www.npmjs.com/package/vue-google-maps-community-fork',
} },
], ],
sidebar: [ sidebar: [
{ {
@@ -73,7 +71,7 @@ module.exports = {
'/components/polyline', '/components/polyline',
'/components/rectangle', '/components/rectangle',
'/components/autocomplete', '/components/autocomplete',
] ],
}, },
{ {
title: 'Examples', title: 'Examples',
@@ -82,20 +80,18 @@ module.exports = {
sidebarDepth: 0, sidebarDepth: 0,
path: '/examples/', path: '/examples/',
children: [ children: [
'/examples/how-to-add-a-custom-button-to-map',
'/examples/points-in-polygon', '/examples/points-in-polygon',
'/examples/how-to-access-google-maps-object', '/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/ * Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
*/ */
plugins: [ plugins: ['@vuepress/plugin-back-to-top', '@vuepress/plugin-medium-zoom'],
'@vuepress/plugin-back-to-top',
'@vuepress/plugin-medium-zoom',
]
} }

23
docs/src/components/README.md
View File

@@ -1,24 +1,21 @@
# Components # 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) - [Rectangle](./rectangle.md)
[Polyline](./polyline.md)
[Rectangle](./rectangle.md)
[Autocomplete](./autocomplete.md) - [Autocomplete](./autocomplete.md)

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

@@ -1,52 +1,49 @@
# Autocomplete # Autocomplete
Here you will find some uses for Google Maps Autocomplete component:
[[toc]] [[toc]]
## Pre-requisite: load places library
## Load Google maps places Before using Autocomplete, you need to load the places library:
Before using Autocomplete, you should load the places library.
```vue{5} ```js
createApp(App) createApp(App)
.use(VueGoogleMaps, { .use(VueGoogleMaps, {
load: { load: {
key: "", key: 'YOUR_API_KEY_COMES_HERE',
libraries: "places" libraries: 'places',
} },
}) })
.mount("#app"); .mount('#app')
</script>
``` ```
## Adding Autocomplete to your components
## Add autocomplete to your components You can add an Autocomplete to your `template` using `GMapAutocomplete` component:
You can add autocomplete to your maps using GMapAutocomplete component.
```vue ```html
<template> <template>
<GMapAutocomplete <GMapAutocomplete placeholder="This is a placeholder" @place_changed="setPlace" />
placeholder="This is a placeholder"
@place_changed="setPlace"
>
</GMapAutocomplete>
</template> </template>
<script>
export default {
name: 'App',
data() {
return {
}
},
methods: {
setPlace() {
}
}
}
</script>
<script>
export default {
name: 'App',
data() {
return {}
},
methods: {
setPlace() {},
},
}
</script>
``` ```
## Custom options ## Adding custom options
You can pass google maps auto complete options using options prop
You can pass Google Maps Autocomplete options using the prop `options`:
```vue{9} ```vue{9}
<template> <template>

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

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

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

@@ -1,70 +1,73 @@
# Cluster # Cluster
Here you will find some uses for Google Maps Cluster component:
[[toc]] [[toc]]
## Cluster your markers ## 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> <template>
<GMapMap <GMapMap :center="center" :zoom="7" map-type-id="terrain" style="width: 500px; height: 300px">
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GMapCluster> <GMapCluster>
<GMapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
:position="m.position" :position="m.position"
:clickable="true" :clickable="true"
:draggable="true" :draggable="true"
@click="center=m.position" @click="center = m.position"
/> />
</GMapCluster> </GMapCluster>
</GMapMap> </GMapMap>
</template> </template>
<script> <script>
export default { export default {
name: 'App', name: 'App',
data() { data() {
return { return {
center: {lat: 51.093048, lng: 6.842120}, center: { lat: 51.093048, lng: 6.84212 },
markers: [ markers: [
{ {
position: { position: {
lat: 51.093048, lng: 6.842120 lat: 51.093048,
}, lng: 6.84212,
} },
, // Along list of clusters }, // Along list of clusters
] ],
} }
},
} }
}
</script> </script>
``` ```
## Props ## Props
The following props can be passed to control behavior of clusters.
You can pass the following props to control behavior of clusters:
### minimumClusterSize ### minimumClusterSize
Defines the minimum distance of markers to cluster them Defines the minimum distance of markers to cluster them:
``` js ```js
:minimumClusterSize="2" :minimumClusterSize="2"
``` ```
### styles ### styles
With styles prop, you can control style and icon of clusters.
``` js Controls style and icon of clusters:
```js
:styles="clusterIcon" :styles="clusterIcon"
``` ```
### zoomOnClick ### zoomOnClick
Defines whether clusters should zoom in, when clicked.
``` js Defines whether clusters should zoom in, when clicked:
```js
:zoomOnClick="true" :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]] [[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. ## Adding info window to your Google Maps components
```vue
<GMapMap> You can create info window by passing a custom HTML or Vue components as the child of `GMapInfoWindow` component:
<GMapMarker
:key="index" ```html
v-for="(m, index) in markers" <GMapMap>
> <GMapMarker :key="index" v-for="(m, index) in markers">
<GMapInfoWindow> <GMapInfoWindow>
<div>I am in info window <MyComponent/> <div>I am in info window</div>
</div> <MyComponent text="I am a custom component inside the info window!" />
</GMapInfoWindow> </GMapInfoWindow>
</GMapMarker> </GMapMarker>
</GMapMap> </GMapMap>
``` ```
## Open/close info window ## Opening or closing an Info window
You can pass `opened` prop to open and close InfoWindows.
```vue{7} You can pass the `opened` prop to open or close a `GMapInfoWindow`:
<GMapMap>
<GMapMarker ```html
:key="index" <GMapMap>
v-for="(m, index) in markers" <GMapMarker :key="index" v-for="(m, index) in markers">
> <GMapInfoWindow :opened="true">
<GMapInfoWindow <div>I am in info window</div>
:opened="true" <MyComponent text="I am a custom component inside the info window!" />
> </GMapInfoWindow>
<div>I am in info window <MyComponent/> </GMapMarker>
</div>
</GMapInfoWindow>
</GMapMarker>
</GMapMap> </GMapMap>
``` ```
## Adding custom options
### Open/close info window on marker click You can pass any Google Maps Info Window component using the prop `options`:
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.
```html
Check out [this interactive example on stackblitz](https://stackblitz.com/edit/vue-google-maps-marker-w4hxvd?file=src/components/ComponentWithMap.vue). <GMapMap>
<GMapMarker :key="index" v-for="(m, index) in markers">
Example: <GMapInfoWindow
```vue :opened="true"
<template> :options=" {
<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=" {
pixelOffset: { pixelOffset: {
width: 10, height: 0 width: 10, height: 0
}, },
maxWidth: 320, maxWidth: 320,
maxHeight: 320, maxHeight: 320,
}" }"
> >
<div>I am in info window <MyComponent/> <div>I am in info window</div>
</div> <MyComponent text="I am a custom component inside the info window!" />
</GMapInfoWindow> </GMapInfoWindow>
</GMapMarker> </GMapMarker>
</GMapMap> </GMapMap>
``` ```

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

@@ -1,167 +1,132 @@
# Map # Map
Here is where you start. Here you will find some uses for Google Maps component:
[[toc]] [[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`:
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}" ```html
:zoom="7" <!-- 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) Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-basic-example)
## Provide your own style ## Styling your Google Maps component
You can provide custom map styling by providing `style` property to the `options` prop.
You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/) You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/).
```vue{4}
<script> You can provide custom styles by providing `style` property to the `options` prop:
<template>
<GMapMap :center="center" ```html
:options="options" <template>
:zoom="10" map-type-id="terrain" style="width: 100vw; height: 20rem"> <GMapMap
<GMapCluster :zoomOnClick="true"> :center="center"
<GMapMarker :key="index" v-for="(m, index) in markers" :position="m.position" :clickable="true" :draggable="true" :options="options"
@click="center = m.position" /> :zoom="10"
</GMapCluster> map-type-id="terrain"
</GMapMap> style="width: 100vw; height: 20rem"
</template> >
<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> <script>
export default { export default {
data() { data() {
return { return {
center: { lat: 51.093048, lng: 6.84212 }, center: { lat: 51.093048, lng: 6.84212 },
options: { options: {
styles: [ styles: [
// here comes the styles your // here comes the styles your
], ],
}, },
}; }
},
} }
};
</script> </script>
``` ```
Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-marker-ssnfbn?file=src/components/ComponentWithMap.vue) 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) 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) [Documentation: Maps JavaScript API - Using Cloud-based maps styling](https://developers.google.com/maps/documentation/javascript/cloud-based-map-styling)
```vue{4} ```html
<script> <template>
<template> <GMapMap
<GMapMap :center="center" :center="center"
:options="options" :options="options"
:zoom="10" :zoom="10"
map-type-id="terrain" map-type-id="terrain"
style="width: 100vw; height: 20rem"> style="width: 100vw; height: 20rem"
</GMapMap> >
</template> </GMapMap>
</template>
<script> <script>
export default { export default {
data() { data() {
return { return {
center: { lat: 51.093048, lng: 6.84212 }, center: { lat: 51.093048, lng: 6.84212 },
options: { options: {
mapId:'xxx' //here comes your map id mapId: 'xxx', //here comes your map id
}, },
}; }
},
} }
};
</script> </script>
``` ```
## Disable ui elements ## 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
```vue{4-11} You can disable all UI components at once:
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}" ```html
:zoom="7" <GMapMap :center="{lat: 51.093048, lng: 6.842120}" :zoom="7" :disableDefaultUI="true" />
:options="{
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: true,
}"
/>
``` ```
You can also disable specific UI components:
## Access google maps instance ```html
You can easily access Map instance by accessing map ref in your component.
```vue
<GMapMap <GMapMap
:center="{lat: 51.093048, lng: 6.842120}" :center="{lat: 51.093048, lng: 6.842120}"
:zoom="7" :zoom="7"
ref="myMapRef" :options="{
:disableDefaultUI="true" zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: true,
}"
/> />
``` ```
## Add custom button ## Access Google Maps instance
You can use the map instance to add custom buttons to your map.
```vue You can easily access the Map instance by accessing `ref` in your component:
<template>
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
ref="myMapRef"
:disableDefaultUI="true"
/>
</template>
<script >
import { ref, watch } from "vue";
function addMyButton(map) { ```html
const controlUI = document.createElement("button"); <GMapMap
controlUI.title = "Click to zoom the map"; :center="{ lat: 51.093048, lng: 6.84212 }"
const controlText = document.createElement("div"); :zoom="7"
controlText.innerHTML = `Center`; ref="myMapRef"
controlUI.appendChild(controlText); :disableDefaultUI="true"
/>
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>
``` ```

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

@@ -1,44 +1,46 @@
# Marker # Marker
Here you will find some uses for Google Maps Marker component:
[[toc]] [[toc]]
## Add marker to your components ## Adding marker to your components
With a marker, you can show specific locations on the map
```vue You can add markers to your Maps using `GMapMarker` component inside of `GMapMap` component:
```html
<template> <template>
<GMapMap> <GMapMap>
<GMapMarker <GMapMarker :key="index" v-for="(m, index) in markers" />
:key="index"
v-for="(m, index) in markers"
/>
</GMapMap> </GMapMap>
</template> </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 ## Enabling or disabling events
You can enable or disable map events by passing props.
```vue{9,10} You can enable or disable the Google Maps Marker events by passing `props`:
```html
<template> <template>
<GMapMap <GMapMap ref="myMarker">
ref="myMarker"
>
<GMapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
@@ -50,14 +52,13 @@ You can enable or disable map events by passing props.
</template> </template>
``` ```
## Register events ## Registering events
You can register events like click, the same as you do in your vue components
```vue{9} You can register events (like click) in the same way as you do in your Vue components:
```html
<template> <template>
<GMapMap <GMapMap ref="myMarker">
ref="myMarker"
>
<GMapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" 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> </template>
``` ```
## Add custom icon ## Adding a custom icon
To use custom icon, pass `:icon` prop. You can pass a local resource or an image from internet.
```vue{9} 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> <template>
<GMapMap <GMapMap ref="myMarker">
ref="myMarker"
>
<GMapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" 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> </GMapMap>
</template> </template>
``` ```
Local resources can be passed in using `require`, for example: `:icon="require('@/assets/images/place-icon.svg').default"`. 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> <template>
<GMapMap <GMapMap ref="myMarker">
ref="myMarker"
>
<GMapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
:position="m.position" :position="m.position"
:icon= '{ :icon='{
url: "https://image.flaticon.com/teams/slug/google.jpg", url: "https://image.flaticon.com/teams/slug/google.jpg",
scaledSize: {width: 77, height: 77}, scaledSize: {width: 77, height: 77},
labelOrigin: {x: 16, y: -10} labelOrigin: {x: 16, y: -10}

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

@@ -1,63 +1,61 @@
# Polygon # Polygon
Here you will find some uses for Google Maps Polygon component:
[[toc]] [[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> <template>
<GMapMap <GMapMap :center="center" :zoom="4" style="width: 100vw; height: 100vh">
:center="center" <GMapPolygon :paths="paths" />
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapPolygon
:paths="paths"
/>
</GMapMap> </GMapMap>
</template> </template>
<script> <script>
export default { export default {
name: 'App', name: 'App',
data() { data() {
return { return {
center: {lat: 25.774, lng: -80.19}, center: { lat: 25.774, lng: -80.19 },
paths: [ paths: [
{ lat: 25.774, lng: -80.19 }, { lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 }, { lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 }, { lat: 32.321, lng: -64.757 },
], ],
} }
}, },
} }
</script> </script>
``` ```
## Adding custom options
## Set polygon options You can pass Google Maps Polygon options using the prop `options`:
You can set polygon style and other options using `options` prop.
```vue ```html
<template> <template>
<GMapMap> <GMapMap>
<GMapPolygon :paths="paths"/> <GMapPolygon :options="options" />
</GMapMap> </GMapMap>
</template> </template>
<script> <script>
export default { export default {
name: 'App', name: 'App',
data() { data() {
return { return {
options: { options: {
strokeColor: "#FF0000", strokeColor: '#FF0000',
strokeOpacity: 0.8, strokeOpacity: 0.8,
strokeWeight: 3, strokeWeight: 3,
fillColor: "#FF0000", fillColor: '#FF0000',
fillOpacity: 0.35, fillOpacity: 0.35,
},
} }
} },
}, }
}
</script> </script>
``` ```

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

@@ -1,73 +1,74 @@
# Polyline # Polyline
Here you will find some uses for Google Maps Polyline component:
[[toc]] [[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> <template>
<GMapPolyline <GMapPolyline :path="path" ref="polyline" />
:path="path"
:editable="true"
ref="polyline" />
</template> </template>
<script> <script>
export default { export default {
name: 'App', name: 'App',
data() { data() {
return { return {
center: {lat: 1.38, lng: 103.8}, center: { lat: 1.38, lng: 103.8 },
path: [ path: [
{lat: 1.33, lng: 103.75}, { lat: 1.33, lng: 103.75 },
{lat: 1.43, lng: 103.85}, { 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: {
} }
} },
}, }
} </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> </script>
``` ```

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

@@ -1,81 +1,70 @@
# Rectangle # Rectangle
Here you will find some uses for Google Maps Rectangle component:
[[toc]] [[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:
```html
```vue
<template> <template>
<GMapMap <GMapMap :center="center" :zoom="4" style="width: 100vw; height: 100vh">
:center="center" <GMapRectangle :bounds="bounds" />
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapRectangle
:bounds="bounds"
/>
</GMapMap> </GMapMap>
</template> </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> <template>
<GMapMap <GMapMap :center="center" :zoom="4" style="width: 100vw; height: 100vh">
:center="center" <GMapRectangle :bounds="bounds" :options="options" />
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapRectangle
:bounds="bounds"
:options="options"
/>
</GMapMap> </GMapMap>
</template> </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 # Getting started
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
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 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).
```bash
npm install -S @fawmi/vue-google-maps ## Installation
You can install this library using npm:
```
npm install vue-google-maps-community-fork
``` ```
## Basic usage ### Pre-requisites
You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
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`: Initialise the plugin in your `main.js`:
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import VueGoogleMaps from '@fawmi/vue-google-maps' import VueGoogleMaps from 'vue-google-maps-community-fork'
const app = createApp(App); const app = createApp(App)
app.use(VueGoogleMaps, { app
.use(VueGoogleMaps, {
load: { load: {
key: 'YOUR_API_KEY_COMES_HERE', key: 'YOUR_API_KEY_COMES_HERE',
// language: 'de',
}, },
}).mount('#app') })
.mount('#app')
``` ```
Use it anywhere in your components ### Great! Now you can use anywhere in your components
Here are some examples:
```vue ```vue
<template> <template>
<GMapMap <GMapMap
:center="{lat: 51.093048, lng: 6.842120}" :center="{ lat: 51.093048, lng: 6.84212 }"
:zoom="7" :zoom="7"
map-type-id="terrain" map-type-id="terrain"
style="width: 100vw; height: 900px" style="width: 100vw; height: 900px"
> >
</GMapMap> </GMapMap>
</template> </template>
<script > <script>
export default { export default {
name: 'App', name: 'App',
data() { data() {
return { return {
center: {lat: 51.093048, lng: 6.842120}, center: { lat: 51.093048, lng: 6.84212 },
} }
} },
} }
</script> </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.
``` In this example, we enable `closeclick` event for `GMapInfoWindow` component and register the event.
app.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY_COMES_HERE',
},
autobindAllEvents: true,
}).mount('#app')
```
Or better yet, they should be activated when needed. ```html
<GMapInfoWindow :closeclick="true" @closeclick="closeMarker" :opened="openedMarkerID === m.id">
<div>I am in info window {{ m.id }}</div>
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>
</GMapInfoWindow> </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. # How to access Google Maps object
[Interactive example on Condesandbox](https://stackblitz.com/edit/vue-google-maps-marker-khyhfk?file=src/components/ComponentWithMap.vue)
[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. To access Google maps object, or do something when map is loaded, use a ref on the `GMapMap` object.
## Example ## Example
```bash ```html
<template> <template>
<GMapMap <GMapMap
:center="center" :center="center"
@@ -31,51 +29,49 @@ To access Google maps object, or do something when map is loaded, use a ref on t
</template> </template>
<script> <script>
export default { export default {
mounted() { mounted() {
this.$refs.myMapRef.$mapPromise.then((mapObject) => { this.$refs.myMapRef.$mapPromise.then((mapObject) => {
console.log('map is loaded now', mapObject); console.log('map is loaded now', mapObject)
}); })
}, },
data() { data() {
return { return {
center: { lat: 51.093048, lng: 6.84212 }, center: { lat: 51.093048, lng: 6.84212 },
markers: [ markers: [
{ {
position: { position: {
lat: 51.093048, lat: 51.093048,
lng: 6.84212, lng: 6.84212,
},
}, },
}, {
{ position: {
position: { lat: 51.198429,
lat: 51.198429, lng: 6.69529,
lng: 6.69529, },
}, },
}, {
{ position: {
position: { lat: 51.165218,
lat: 51.165218, lng: 7.067116,
lng: 7.067116, },
}, },
}, {
{ position: {
position: { lat: 51.09256,
lat: 51.09256, lng: 6.84074,
lng: 6.84074, },
}, },
}, ],
], }
}; },
}, }
};
</script> </script>
<style> <style>
body { body {
margin: 0; margin: 0;
} }
</style> </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 # How to add custom controls
[Interactive example on Condesandbox](https://stackblitz.com/edit/vue-google-maps-marker-ry3zf7?file=src/components/ComponentWithMap.vue) [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 condesandbox above.
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 ## Example
```bash ```html
<template> <template>
<GMapMap <GMapMap
:center="center" :center="center"
@@ -31,75 +29,73 @@ To add custom controls, you can access google maps object and add controls to it
</template> </template>
<script> <script>
export default { export default {
mounted() { mounted() {
this.$refs.myMapRef.$mapPromise.then((map) => { this.$refs.myMapRef.$mapPromise.then((map) => {
// Create the DIV to hold the control and call the CenterControl() // Create the DIV to hold the control and call the CenterControl()
// constructor passing in this DIV. // constructor passing in this DIV.
const centerControlDiv = document.createElement('div'); const centerControlDiv = document.createElement('div')
this.addCenterControl(centerControlDiv, map); this.addCenterControl(centerControlDiv, map)
map.controls[google.maps.ControlPosition.TOP_CENTER].push( map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv)
centerControlDiv })
); },
}); methods: {
}, addCenterControl(controlDiv, map) {
methods: { const controlUI = document.createElement('div')
addCenterControl(controlDiv, map) {
const controlUI = document.createElement('div');
controlUI.innerHTML = ` controlUI.innerHTML = `
<div style="color: white; background: red; padding: 1rem;"> <div style="color: white; background: red; padding: 1rem;">
You can click me, i can also be a vue component You can click me, i can also be a vue component
</div> </div>
`; `
controlDiv.appendChild(controlUI); controlDiv.appendChild(controlUI)
controlUI.addEventListener('click', () => { controlUI.addEventListener('click', () => {
// Do what ever you want to happen on click event // Do what ever you want to happen on click event
map.setCenter({ map.setCenter({
lat: 53.57532, lat: 53.57532,
lng: 10.01534, lng: 10.01534,
}); })
}); })
},
}, },
}, data() {
data() { return {
return { center: { lat: 51.093048, lng: 6.84212 },
center: { lat: 51.093048, lng: 6.84212 }, markers: [
markers: [ {
{ position: {
position: { lat: 51.093048,
lat: 51.093048, lng: 6.84212,
lng: 6.84212, },
}, },
}, {
{ position: {
position: { lat: 51.198429,
lat: 51.198429, lng: 6.69529,
lng: 6.69529, },
}, },
}, {
{ position: {
position: { lat: 51.165218,
lat: 51.165218, lng: 7.067116,
lng: 7.067116, },
}, },
}, {
{ position: {
position: { lat: 51.09256,
lat: 51.09256, lng: 6.84074,
lng: 6.84074, },
}, },
}, ],
], }
}; },
}, }
};
</script> </script>
<style> <style>
body { body {
margin: 0; margin: 0;
} }
</style> </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. `@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. Currently `Map`, `Marker`, `InfoWindow`, `Polyline`, `Polygon` and `Rectangle` are supported.
Other components are still under development.
Other components are still under development.
Checkout getting started to read, how to install and use vue-google-maps 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. # 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)
[Interactive example on CodeSandbox](https://stackblitz.com/edit/vue-google-maps-marker-fnzw4j?file=src%2Fcomponents%2FComponentWithMap.vue)
## Example ## Example
```bash ```html
<!-- Source of JS implementation https://github.com/mattwilliamson/Google-Maps-Point-in-Polygon/blob/master/maps.google.polygon.containsLatLng.js -->
// Source of JS implementation: https://github.com/mattwilliamson/Google-Maps-Point-in-Polygon/blob/master/maps.google.polygon.containsLatLng.js
<template> <template>
<GMapMap <GMapMap
ref="myMapRef" ref="myMapRef"
@@ -19,7 +14,8 @@
:center="center" :center="center"
:zoom="10" :zoom="10"
map-type-id="terrain" map-type-id="terrain"
style="width: 100vw; height: 20rem"> style="width: 100vw; height: 20rem"
>
<GMapPolygon <GMapPolygon
:options="{ :options="{
clickable: false clickable: false
@@ -32,46 +28,45 @@
</template> </template>
<script> <script>
import {ref, onMounted} from "vue"; import { ref, onMounted } from 'vue'
import {setupContainsLatLng} from '../util/is-point-within-polygon.js' import { setupContainsLatLng } from '../util/is-point-within-polygon.js'
export default { export default {
data() { data() {
return { return {
center: {lat: 25.774, lng: -80.19}, center: { lat: 25.774, lng: -80.19 },
paths: [ paths: [
{lat: 25.774, lng: -80.19}, { lat: 25.774, lng: -80.19 },
{lat: 18.466, lng: -66.118}, { lat: 18.466, lng: -66.118 },
{lat: 32.321, lng: -64.757}, { 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})
})
} }
} },
setup() {
const myMapRef = ref()
const mapPolygon = ref()
onMounted(() => { function handleClick(event) {
myMapRef.value.$mapPromise.then(() => { if (event.latLng?.lat) {
setupContainsLatLng(); 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 { return {
myMapRef, myMapRef,
mapPolygon, mapPolygon,
handleClick handleClick,
} }
},
} }
};
</script> </script>
``` ```

71
docs/src/index.md
View File

@@ -1,7 +1,7 @@
--- ---
home: true home: true
heroImage: 'assets/logo.jpg' 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 actionText: Read Docs
actionLink: /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> href="https://stackblitz.com/edit/vue-google-maps-marker?file=src%2Fcomponents%2FComponentWithMap.vue">View example</a>
</div> </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 ## 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 ### Pre-requisites
You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
### 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: In your `main.js` or inside a Nuxt plugin:
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import VueGoogleMaps from '@fawmi/vue-google-maps' import VueGoogleMaps from 'vue-google-maps-community-fork'
const app = createApp(App); const app = createApp(App)
app.use(VueGoogleMaps, { app
.use(VueGoogleMaps, {
load: { 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 ```vue
<template> <template>
<GMapMap <GMapMap :center="center" :zoom="7" map-type-id="terrain" style="width: 500px; height: 300px">
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GMapCluster> <GMapCluster>
<GMapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
:position="m.position" :position="m.position"
:clickable="true" :clickable="true"
:draggable="true" :draggable="true"
@click="center=m.position" @click="center = m.position"
/> />
</GMapCluster> </GMapCluster>
</GMapMap> </GMapMap>
@@ -68,17 +77,17 @@ export default {
name: 'App', name: 'App',
data() { data() {
return { return {
center: {lat: 51.093048, lng: 6.842120}, center: { lat: 51.093048, lng: 6.84212 },
markers: [ markers: [
{ {
position: { position: {
lat: 51.093048, lng: 6.842120 lat: 51.093048,
lng: 6.84212,
}, },
} }, // Along list of clusters
, // Along list of clusters ],
]
} }
} },
} }
</script> </script>
``` ```