How to call a function inside methods when click a button in a Google Maps' InfoWindow?

vue-core

#1

I’m building a Google Maps app using Vue. (I use .vue instead of single file component)

i have a number of markers on the map and an InfoWindow tie to each of them with this code.

Markers section in the MapComponent.vue

this.markers[layer.lyr_id][node.nod_id] = new google.maps.Marker({
  icon: {
    scaledSize: configuration.marker.icon.scaledSize,
    url: layer.icon_nod_sub_url,
  },
  position: {
    lat: node.lat,
    lng: node.lon,
  },
  map: mapCanvas,
});

InfoWindow section in the MapComponent.vue

this.infoWindows[layer.lyr_id][node.nod_id] = new google.maps.InfoWindow({
  content: `<strong>${node.dflt_name}</strong>
            <p>${node.dflt_info}</p>
            <button v-on:click="this.addToPath(${node.nod_id})">Add this node to the path</button>`,
});

EventListener section in the MapComponent.vue

this.markers[layer.lyr_id][node.nod_id].addListener('click', () => {
  this.infoWindows[layer.lyr_id][node.nod_id].open(
    mapCanvas,
    this.markers[layer.lyr_id][node.nod_id]
  )
});

What I’m struggling right now is how to make the <button> in the InfoWindow section calls a function defined in the methods which looks like this

methods: {
  ...
  addToPath(nod_id) {
    alert(nod_id)
    console.log(nod_id)
  }
  ...
}

Right now when I click the button it does absolutely nothing, no warning, no error at all.

What should I do to get it work?


Note:

I have searched and found this similar question. However, it doesn’t work for my case because I use this way to import (which it would be too late to change the way to import). When I use the solution in that question, I got the error that says TypeError: vm is undefined. So it didn’t help me.


Thank you in advance!


#2

Got it to work. Please refer to this answer on S/O