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

Add docs folder

Browse Source
This commit is contained in:
Fawad Mirzad
2021-09-13 15:30:46 +02:00
parent db827d7607
commit 86f25061de
28 changed files with 1302 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/src/components/README.md Normal file
View File

@@ -0,0 +1,24 @@
# Components
[[toc]]
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
Currently `Map`, `Marker`, `InfoWindow`, `Cluster`, `Circle`, `Polygon`, `Polyline` and `Rectangle` are supported.
Checkout the docs page for each component to see how to use it.
[Map](./map.md)
[Marker](./marker.md)
[InfoWindow](./info-window.md)
[Cluster](./cluster.md)
[Circle](./circle.md)
[Polygon](./polygon.md)
[Polyline](./polyline.md)
[Rectangle](./rectangle.md)
[Autocomplete](./autocomplete.md)

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

@@ -0,0 +1,61 @@
# Autocomplete
[[toc]]
## Load Google maps places
Before using Autocomplete, you should load the places library.
```vue{5}
createApp(App)
.use(VueGoogleMaps, {
load: {
key: "",
libraries: "places"
}
})
.mount("#app");
</script>
```
## Add autocomplete to your components
You can add autocomplete to your maps using GMapAutocomplete component.
```vue
<template>
<GMapAutocomplete
placeholder="This is a placeholder"
@place_changed="setPlace"
>
</GMapAutocomplete>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
methods: {
setPlace() {
}
}
}
</script>
```
## Custom options
You can pass google maps auto complete options using options prop
```vue{9}
<template>
<GMapAutocomplete
placeholder="This is a placeholder"
:options="{
bounds: {north: 1.4, south: 1.2, east: 104, west: 102},
strictBounds: true
}"
/>
</template>
```

87
docs/src/components/circle.md Normal file
View File

@@ -0,0 +1,87 @@
# Circle
[[toc]]
## Add circle to your maps
To add circles, just add the `GMapCircle` component inside `GMapMap` component.
```vue
<template>
<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}"
/>
</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
},
},
{
id: 'koeln',
position: {
lat: 50.935173, lng: 6.953101
},
population: 1087863
},
{
id: 'Hamburg',
position: {
lat: 53.551086,
lng: 9.993682
},
population: 1899160
}
]
}
},
}
</script>
```
## Add custom circle style
Circle style and all other circle options can be added using `options` prop.
```vue
<GMapMap>
<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>
```

70
docs/src/components/cluster.md Normal file
View File

@@ -0,0 +1,70 @@
# Cluster
[[toc]]
## Cluster your markers
To cluster objects you simply wrap your markers with the cluster component.
```vue
<template>
<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"
/>
</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
]
}
}
}
</script>
```
## Props
The following props can be passed to control behavior of clusters.
### minimumClusterSize
Defines the minimum distance of markers to cluster them
``` js
:minimumClusterSize="2"
```
### styles
With styles prop, you can control style and icon of clusters.
``` js
:styles="clusterIcon"
```
### zoomOnClick
Defines whether clusters should zoom in, when clicked.
``` js
:zoomOnClick="true"
```

127
docs/src/components/info-window.md Normal file
View File

@@ -0,0 +1,127 @@
# Info Window
[[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>
</GMapMap>
```
## Open/close info window
You can pass `opened` prop to open and close InfoWindows.
```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>
</GMapMap>
```
### 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.
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=" {
pixelOffset: {
width: 10, height: 0
},
maxWidth: 320,
maxHeight: 320,
}"
>
<div>I am in info window <MyComponent/>
</div>
</GMapInfoWindow>
</GMapMarker>
</GMapMap>
```

137
docs/src/components/map.md Normal file
View File

@@ -0,0 +1,137 @@
# Map
[[toc]]
## Install
This is the base Map component. If no props are provided, it shows an empty map component with default controls.
```vue
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
: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.
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>
<script>
export default {
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)
## 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}
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
:options="{
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: true,
}"
/>
```
## Access google maps instance
You can easily access Map instance by accessing map ref in your component.
```vue
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
ref="myMapRef"
:disableDefaultUI="true"
/>
```
## Add custom button
You can use the map instance to add custom buttons to your map.
```vue
<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) {
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>
```

113
docs/src/components/marker.md Normal file
View File

@@ -0,0 +1,113 @@
# Marker
[[toc]]
## Add marker to your components
With a marker, you can show specific locations on the map
```vue
<template>
<GMapMap>
<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>
```
## Enable/Disable events
You can enable or disable map events by passing props.
```vue{9,10}
<template>
<GMapMap
ref="myMarker"
>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
/>
</GMapMap>
</template>
```
## Register events
You can register events like click, the same as you do in your vue components
```vue{9}
<template>
<GMapMap
ref="myMarker"
>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
@click="openInfoWindow(marker.id)"
:clickable="true"
/>
</GMapMap>
</template>
```
## Add custom icon
To use custom icon, pass `:icon` prop. You can pass a local resource or an image from internet.
```vue{9}
<template>
<GMapMap
ref="myMarker"
>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:icon="'https://developers.google.com/maps/documentation/javascript/examples/full/images/info-i_maps.png'"
:clickable="true"
:draggable="true"
/>
</GMapMap>
</template>
```
You can also pass an object to the icon `prop` to define custom size and label origin:
```vue{9-13}
<template>
<GMapMap
ref="myMarker"
>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:icon= '{
url: "https://image.flaticon.com/teams/slug/google.jpg",
scaledSize: {width: 77, height: 77},
labelOrigin: {x: 16, y: -10}
}'
:clickable="true"
:draggable="true"
/>
</GMapMap>
</template>
```

63
docs/src/components/polygon.md Normal file
View File

@@ -0,0 +1,63 @@
# Polygon
[[toc]]
## Add polygon to the map
You can add polygons to the map using polygon component.
```vue
<template>
<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 },
],
}
},
}
</script>
```
## Set polygon options
You can set polygon style and other options using `options` prop.
```vue
<template>
<GMapMap>
<GMapPolygon :paths="paths"/>
</GMapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
options: {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35,
}
}
},
}
</script>
```

73
docs/src/components/polyline.md Normal file
View File

@@ -0,0 +1,73 @@
# Polyline
[[toc]]
## Add Polyline to the map
You can add Polyline to the map using `GMapPolyline` component.
```vue
<template>
<GMapPolyline
:path="path"
:editable="true"
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: {
}
}
},
}
</script>
```

81
docs/src/components/rectangle.md Normal file
View File

@@ -0,0 +1,81 @@
# Rectangle
[[toc]]
## Add Rectangle to your map
You can add rectangles to your map using `GMapRectangle` component
```vue
<template>
<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>
```
## Add custom Rectangle options
Like almost all components, you can pass all available Google maps rectangle options as prop.
```vue
<template>
<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>
```

9
docs/src/components/using-vue.md Normal file
View File

@@ -0,0 +1,9 @@
# Using Vue in Markdown
## Browser API Access Restrictions
Because VuePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the [universal code requirements](https://ssr.vuejs.org/en/universal.html). In short, make sure to only access Browser / DOM APIs in `beforeMount` or `mounted` hooks.
If you are using or demoing components that are not SSR friendly (for example containing custom directives), you can wrap them inside the built-in `<ClientOnly>` component:
##