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

Move docs to a separate repo to decrease main repo size

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-14 14:16:47 +01:00
parent 6264a0263e
commit 0046415061
20 changed files with 0 additions and 11502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,20 +0,0 @@
# 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`, `Polygon` 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)
[Polygon](./polygon.md)
[Rectangle](./rectangle.md)

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

@@ -1,46 +0,0 @@
# 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>
```

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

@@ -1,36 +0,0 @@
# 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>
```

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

@@ -1,73 +0,0 @@
# 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 />
```
## Provide your own style
You can provide custom map styling as prop.
You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)
```vue
<GMapMap
:style="mapStyles"
/>
```
## Disable ui elements
You can disable all ui components at once
```vue
<GMapMap
:disableDefaultUI="true"
/>
```
You can also disable specific UI components
```vue
<GMapMap
: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
ref="myMapRef"
:disableDefaultUI="true"
/>
```
## Add custom button
You can use the map instance to add custom buttons to your map
```js
export function addMyButton(map) {
const controlDiv = document.createElement("div");
const controlUI = document.createElement("button");
controlUI.title = "Click to zoom the map";
controlDiv.appendChild(controlUI);
const controlText = document.createElement("div");
controlText.innerHTML = `Center`;
controlUI.appendChild(controlText);
controlUI.style.position = "relative"
controlUI.style.bottom = "80px"
controlUI.addEventListener("click", () => {
map.setZoom(map.getZoom() + 1);
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv); // eslint-disable-line no-undef
}
```

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

@@ -1,51 +0,0 @@
# 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
<template>
<GMapMap
ref="myMarker"
>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
/>
</GMapMap>
</template>
```

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

@@ -1,4 +0,0 @@
# Polygon
[[toc]]
Polygon is a simple wrapper around google's polygon component.

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

@@ -1,4 +0,0 @@
# Rectangle
[[toc]]
Polygon is a simple wrapper around google's polygon component.