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 >

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@fawmi/vue-google-maps",
"description": "Google Map components for Vue.js 3",
"version": "0.7.2",
"version": "0.7.3",
"private": false,
"main": "src/main.js",
"keywords": [

36
src/main.js
View File

@@ -6,7 +6,7 @@ import Polygon from './components/polygon'
import Circle from './components/circle'
import Rectangle from './components/rectangle'
import Marker from './components/marker.vue'
import GmapCluster from './components/cluster.vue'
import GMapCluster from './components/cluster.vue'
import InfoWindow from './components/infoWindow.vue'
import Map from './components/map.vue'
import Autocomplete from './components/autocomplete.vue'
@@ -15,7 +15,7 @@ import MapElementMixin from './components/mapElementMixin'
import buildComponent from './components/build-component'
import MountableMixin from './utils/mountableMixin'
import {Env} from "./utils/env";
let GmapApi = null
let GMapApi = null;
export {
loadGMapApi,
@@ -23,7 +23,7 @@ export {
Polyline,
Polygon,
Circle,
GmapCluster,
GMapCluster,
Rectangle,
InfoWindow,
Map,
@@ -40,7 +40,7 @@ export function install(Vue, options) {
...options,
}
GmapApi = createApp({
GMapApi = createApp({
data: function () {
return { gmapApi: null }
},
@@ -50,7 +50,7 @@ export function install(Vue, options) {
// Use a lazy to only load the API when
// a VGM component is loaded
let gmapApiPromiseLazy = makeGmapApiPromiseLazy(options)
let gmapApiPromiseLazy = makeGMapApiPromiseLazy(options)
Vue.mixin({
created() {
@@ -63,22 +63,22 @@ export function install(Vue, options) {
Vue.$gmapApiPromiseLazy = gmapApiPromiseLazy
if (options.installComponents) {
Vue.component('GmapMap', Map)
Vue.component('GmapMarker', Marker)
Vue.component('GmapInfoWindow', InfoWindow)
Vue.component('GmapCluster', GmapCluster)
Vue.component('GmapPolyline', Polyline)
Vue.component('GmapPolygon', Polygon)
Vue.component('GmapCircle', Circle)
Vue.component('GmapRectangle', Rectangle)
Vue.component('GmapAutocomplete', Autocomplete)
Vue.component('GMapMap', Map)
Vue.component('GMapMarker', Marker)
Vue.component('GMapInfoWindow', InfoWindow)
Vue.component('GMapCluster', GMapCluster)
Vue.component('GMapPolyline', Polyline)
Vue.component('GMapPolygon', Polygon)
Vue.component('GMapCircle', Circle)
Vue.component('GMapRectangle', Rectangle)
Vue.component('GMapAutocomplete', Autocomplete)
}
}
function makeGmapApiPromiseLazy(options) {
function makeGMapApiPromiseLazy(options) {
// Things to do once the API is loaded
function onApiLoaded() {
GmapApi.gmapApi = {}
GMapApi.gmapApi = {}
return window.google
}
@@ -114,7 +114,3 @@ function makeGmapApiPromiseLazy(options) {
return lazy(() => promise)
}
}
export function gmapApi() {
return GmapApi.gmapApi && window.google
}