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



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: {
    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>
            <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', () => {

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) {

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?


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!


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