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 ```vue
<template> <template>
<GmapMap <GMapMap
:center="center" :center="center"
:zoom="7" :zoom="7"
map-type-id="terrain" map-type-id="terrain"
style="width: 500px; height: 300px" 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"
@@ -19,8 +19,8 @@ To cluster objects you simply wrap your markers with the cluster component.
:draggable="true" :draggable="true"
@click="center=m.position" @click="center=m.position"
/> />
</GmapCluster> </GMapCluster>
</GmapMap> </GMapMap>
</template> </template>
<script> <script>
export default { export default {

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

@@ -1,34 +1,34 @@
# Info Window # Info Window
You can create info window by passing custom HTML or Vue components as the child of `Marker` component. You can create info window by passing custom HTML or Vue components as the child of `Marker` component.
```vue ```vue
<GmapMap> <GMapMap>
<GmapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
> >
<GmapInfoWindow> <GMapInfoWindow>
<div>I am in info window <MyComponent/> <div>I am in info window <MyComponent/>
</div> </div>
</GmapInfoWindow> </GMapInfoWindow>
</GmapMarker> </GMapMarker>
</GmapMap> </GMapMap>
``` ```
## Open/close info window ## Open/close info window
You can pass `opened` prop to open and close InfoWindows. You can pass `opened` prop to open and close InfoWindows.
```vue{7} ```vue{7}
<GmapMap> <GMapMap>
<GmapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
> >
<GmapInfoWindow <GMapInfoWindow
:opened="true" :opened="true"
> >
<div>I am in info window <MyComponent/> <div>I am in info window <MyComponent/>
</div> </div>
</GmapInfoWindow> </GMapInfoWindow>
</GmapMarker> </GMapMarker>
</GmapMap> </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. This is the base Map component. If no props are provided, it shows an empty map component with default controls.
```vue ```vue
<GmapMap /> <GMapMap />
``` ```
## Provide your own style ## 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/) You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)
```vue ```vue
<GmapMap <GMapMap
:style="mapStyles" :style="mapStyles"
/> />
``` ```
@@ -21,14 +21,14 @@ You can generate custom map styles at [https://mapstyle.withgoogle.com/](https:
## Disable ui elements ## Disable ui elements
You can disable all ui components at once You can disable all ui components at once
```vue ```vue
<GmapMap <GMapMap
:disableDefaultUI="true" :disableDefaultUI="true"
/> />
``` ```
You can also disable specific UI components You can also disable specific UI components
```vue ```vue
<GmapMap <GMapMap
:options="{ :options="{
zoomControl: true, zoomControl: true,
mapTypeControl: 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. You can easily access Map instance by accessing map ref in your component.
```vue ```vue
<GmapMap <GMapMap
ref="myMapRef" ref="myMapRef"
:disableDefaultUI="true" :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 With a marker, you can show specific locations on the map
```vue ```vue
<template> <template>
<GmapMap> <GMapMap>
<GmapMarker <GMapMarker
:key="index" :key="index"
v-for="(m, index) in markers" v-for="(m, index) in markers"
/> />
</GmapMap> </GMapMap>
</template> </template>
<script> <script>
export default { export default {
@@ -34,16 +34,16 @@ You can enable or disable map events by passing props.
```vue ```vue
<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"
:clickable="true" :clickable="true"
:draggable="true" :draggable="true"
/> />
</GmapMap> </GMapMap>
</template> </template>
``` ```

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

@@ -38,13 +38,13 @@ app.use(VueGoogleMaps, {
```vue ```vue
<template> <template>
<GmapMap <GMapMap
:center="{lat: 51.093048, lng: 6.842120}" :center="{lat: 51.093048, lng: 6.842120}"
: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 >

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

@@ -38,13 +38,13 @@ app.use(VueGoogleMaps, {
```vue ```vue
<template> <template>
<GmapMap <GMapMap
:center="{lat: 51.093048, lng: 6.842120}" :center="{lat: 51.093048, lng: 6.842120}"
: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 >

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

@@ -38,13 +38,13 @@ app.use(VueGoogleMaps, {
```vue ```vue
<template> <template>
<GmapMap <GMapMap
:center="{lat: 51.093048, lng: 6.842120}" :center="{lat: 51.093048, lng: 6.842120}"
: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 >

2
package.json
View File

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

36
src/main.js
View File

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