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

Improve code

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-14 11:12:14 +01:00
parent 880e8219bb
commit 16ad627d9b
9 changed files with 51 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,14 +4,14 @@ To cluster objects you simply wrap your markers with the cluster component.
```vue
<template>
<GmapMap
<GMapMap
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapCluster>
<GmapMarker
<GMapCluster>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
@@ -19,8 +19,8 @@ To cluster objects you simply wrap your markers with the cluster component.
:draggable="true"
@click="center=m.position"
/>
</GmapCluster>
</GmapMap>
</GMapCluster>
</GMapMap>
</template>
<script>
export default {

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

@@ -1,34 +1,34 @@
# Info Window
You can create info window by passing custom HTML or Vue components as the child of `Marker` component.
```vue
<GmapMap>
<GmapMarker
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
>
<GmapInfoWindow>
<GMapInfoWindow>
<div>I am in info window <MyComponent/>
</div>
</GmapInfoWindow>
</GmapMarker>
</GmapMap>
</GMapInfoWindow>
</GMapMarker>
</GMapMap>
```
## Open/close info window
You can pass `opened` prop to open and close InfoWindows.
```vue{7}
<GmapMap>
<GmapMarker
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
>
<GmapInfoWindow
<GMapInfoWindow
:opened="true"
>
<div>I am in info window <MyComponent/>
</div>
</GmapInfoWindow>
</GmapMarker>
</GmapMap>
</GMapInfoWindow>
</GMapMarker>
</GMapMap>
```

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

@@ -5,7 +5,7 @@
This is the base Map component. If no props are provided, it shows an empty map component with default controls.
```vue
<GmapMap />
<GMapMap />
```
## Provide your own style
@@ -13,7 +13,7 @@ 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
<GMapMap
:style="mapStyles"
/>
```
@@ -21,14 +21,14 @@ You can generate custom map styles at [https://mapstyle.withgoogle.com/](https:
## Disable ui elements
You can disable all ui components at once
```vue
<GmapMap
<GMapMap
:disableDefaultUI="true"
/>
```
You can also disable specific UI components
```vue
<GmapMap
<GMapMap
:options="{
zoomControl: true,
mapTypeControl: true,
@@ -45,7 +45,7 @@ You can also disable specific UI components
You can easily access Map instance by accessing map ref in your component.
```vue
<GmapMap
<GMapMap
ref="myMapRef"
:disableDefaultUI="true"
/>

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

@@ -3,12 +3,12 @@
With a marker, you can show specific locations on the map
```vue
<template>
<GmapMap>
<GmapMarker
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
/>
</GmapMap>
</GMapMap>
</template>
<script>
export default {
@@ -34,16 +34,16 @@ You can enable or disable map events by passing props.
```vue
<template>
<GmapMap
<GMapMap
ref="myMarker"
>
<GmapMarker
<GMapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
/>
</GmapMap>
</GMapMap>
</template>
```

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

@@ -38,13 +38,13 @@ app.use(VueGoogleMaps, {
```vue
<template>
<GmapMap
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
map-type-id="terrain"
style="width: 100vw; height: 900px"
>
</GmapMap>
</GMapMap>
</template>
<script >

4
docs/src/docs/getting-started.md
View File

@@ -38,13 +38,13 @@ app.use(VueGoogleMaps, {
```vue
<template>
<GmapMap
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
map-type-id="terrain"
style="width: 100vw; height: 900px"
>
</GmapMap>
</GMapMap>
</template>
<script >

4
docs/src/docs/introduction.md
View File

@@ -38,13 +38,13 @@ app.use(VueGoogleMaps, {
```vue
<template>
<GmapMap
<GMapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
map-type-id="terrain"
style="width: 100vw; height: 900px"
>
</GmapMap>
</GMapMap>
</template>
<script >