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

Add most of components and prepare for V1 Release

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-13 16:09:48 +01:00
parent 1a5cf0b075
commit decca38b67
47 changed files with 2556 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
test/test-pages/test-gmapApi.html Normal file
View File

@@ -0,0 +1,39 @@
<head>
<style>
.map-container {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="test">
<h2>Test 1</h2>
<gmap-map
:center="{lat: 1.38, lng: 103.8}"
:zoom="12"
class="map-container"
ref="map">
<gmap-marker ref="myMarker" :position="google && new google.maps.LatLng(1.38, 103.8)"></gmap-marker>
</gmap-map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="../../dist/vue-google-maps.js"></script>
<script>
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
}
})
document.addEventListener('DOMContentLoaded', () => {
window.vue = new Vue({
computed: {
google: VueGoogleMaps.gmapApi
},
el: '#test',
})
})
</script>
</body>

71
test/test-pages/test-marker-with-infowindow.html Normal file
View File

@@ -0,0 +1,71 @@
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<gmap-map
:center="randomInitialLatLng"
:zoom="7"
style="height: 400px; width: 100%;"
ref="map"
id="themap">
<gmap-marker
:position="randomInitialLatLng"
:clickable="true"
@click="openInfoWindowTemplate(randomInitialLatLng)"
ref="markers">
</gmap-marker>
<gmap-info-window
:options="{maxWidth: 300}"
:position="infoWindow.position"
:opened="infoWindow.open"
@closeclick="infoWindow.open = false">
<div id="thediv">hello</div>
</gmap-info-window>
</gmap-map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="../../dist/vue-google-maps.js"></script>
<script>
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
}
})
document.addEventListener('DOMContentLoaded', () => {
window.theVue = new Vue({
el: '#app',
data () {
return {
infoWindow: {
position: {lat: 50, lng: 90},
open: false,
template: ''
},
clicked: false,
}
},
computed: {
randomInitialLatLng () {
return ({lat: 50 + Math.random(), lng: 90 + Math.random()})
}
},
methods: {
openInfoWindowTemplate (pos) {
this.infoWindow.position = pos
this.infoWindow.open = true
this.clicked = true
}
}
})
})
</script>
</body>
</html>

28
test/test-pages/test-page-without-maps.html Normal file
View File

@@ -0,0 +1,28 @@
<head>
<style>
.map-container {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="test1">
<h2>Test 1</h2>
<gmap-map v-if="loadMap" ref="gmap"></gmap-map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="../../dist/vue-google-maps.js"></script>
<script>
// This page does not have maps, but we use Vue2-google-maps
// Must ensure that Google Maps library is NEVER loaded
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
}
})
</script>
</body>

30
test/test-pages/test-plain-map.html Normal file
View File

@@ -0,0 +1,30 @@
<head>
<style>
.map-container {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="test1">
<h2>Test 1</h2>
<gmap-map
:center="{lat: 1.38, lng: 103.8}"
:zoom="12"
class="map-container"
ref="map">
</gmap-map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="../../dist/vue-google-maps.js"></script>
<script>
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
}
})
</script>
</body>