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/

No Comments