How to create infowindow component in vuejs

Tags: vuejs, google maps, infowindow

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.


        <v-btn @click="selectLocation(item)">Select Location {{item.Name}}</v-btn>

module.exports = {
    name: 'infowindow',
    props: [ 
    methods: {
        selectLocation(item) {
          // emit click action in infowindow
          this.$emit('action:selectedLocation', item);

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


// parent subscribes to event from infowindow
instance.$on('action:selectedLocation', (item) => {
    // handle click action

var new_infowindow = new google.maps.InfoWindow({
    content: instance.$el,
});<map object>, <marker>);


No Comments

Add a Comment