72 lines
1.7 KiB
HTML
72 lines
1.7 KiB
HTML
<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>
|