How to create infowindow component in vuejs
Create vue Infowindow content component, pass data, subscribe to events using $on, $mount vue component and inject element into infowindow. Fire vue infowindow component events using $emit.
InfoWindow.vue
<template>
<div>
...
<v-btn @click="selectLocation(item)">Select Location {{item.Name}}</v-btn>
...
</div>
</template>
<script>
module.exports = {
name: 'infowindow',
props: [
'item',
],
methods: {
selectLocation(item) {
// emit click action in infowindow
this.$emit('action:selectedLocation', item);
},
},
}
</script>
And in the portion of the code that is required to create before opening the info-window:
...
import InfoWindowComponent from './InfoWindow.vue';
...
var InfoWindow = Vue.extend(InfoWindowComponent);
var instance = new InfoWindow({
propsData: {
item: item
}
});
instance.$mount();
// parent subscribes to event from infowindow
instance.$on('action:selectedLocation', (item) => {
// handle click action
});
var new_infowindow = new google.maps.InfoWindow({
content: instance.$el,
});
new_infowindow.open(<map object>, <marker>);
Sources:
- https://stackoverflow.com/a/50197706/556649
- https://css-tricks.com/creating-vue-js-component-instances-programmatically/