My current code is

addpolygon: function(e) {
      var vm = this;
      var point = {
        lat: parseFloat(e.latLng.lat()),
        lng: parseFloat(e.latLng.lng())
      };
      vm.coord.push(point);
      vm.replot();
      vm.marker = new google.maps.Marker({
        position: point,
        map: vm.map,
        icon: "/fred.png"
      });
      vm.infowindow = new google.maps.InfoWindow({
        content:"<a class=\"btn btn-danger\" @click.native=\"removePoint("+vm.markerid+)\">Remove</a>",
        maxWidth: 300
      });
      vm.bindInfoWindow(vm.marker, vm.map, vm.infowindow);
      vm.markers[vm.markerid] = {
        marker: vm.marker,
        point: point
      };
      vm.markerid++;
    },

When I click on Remove, I need to trigger another function remove Point.

I defined it as

removePoint: function(id) {
      alert("adsf")
    },

But I am not able to trigger the same using the above code. Nothing happens when I click on the button remove. What is the problem regarding the same. Please help me to have a solution?

My current code is

addpolygon: function(e) {
      var vm = this;
      var point = {
        lat: parseFloat(e.latLng.lat()),
        lng: parseFloat(e.latLng.lng())
      };
      vm.coord.push(point);
      vm.replot();
      vm.marker = new google.maps.Marker({
        position: point,
        map: vm.map,
        icon: "/fred.png"
      });
      vm.infowindow = new google.maps.InfoWindow({
        content:"<a class=\"btn btn-danger\" @click.native=\"removePoint("+vm.markerid+)\">Remove</a>",
        maxWidth: 300
      });
      vm.bindInfoWindow(vm.marker, vm.map, vm.infowindow);
      vm.markers[vm.markerid] = {
        marker: vm.marker,
        point: point
      };
      vm.markerid++;
    },

When I click on Remove, I need to trigger another function remove Point.

I defined it as

removePoint: function(id) {
      alert("adsf")
    },

But I am not able to trigger the same using the above code. Nothing happens when I click on the button remove. What is the problem regarding the same. Please help me to have a solution?

• javascript
• google-maps
• vue.js
• vuejs2
• vue-ponent

• Looks like you have a syntax error here: vm.markerid+)\">Remove</a>" . There's no open quote for the last string. It should be vm.markerid + ")\">Remove</a>" – Dhruv Murarka Commented Nov 8, 2018 at 5:54
• Sir I tried <button type=\"button\" onclick=\"removePoint("+vm.markerid+")\">This is a button</button> – coder Commented Nov 8, 2018 at 6:02
• getting error as Uncaught ReferenceError: removePoint is not defined at HTMLButtonElement.onclick – coder Commented Nov 8, 2018 at 6:02
• Is removePoint defined in Vue object, like addPolygon? It should probably be outside of any Vue object, to be accessible from elements not managed by Vue (Map's infoWindow might not be attached the Vue root element) – Dhruv Murarka Commented Nov 8, 2018 at 6:52
• Sir, removePoint is a function which is defined just below addPolygon – coder Commented Nov 8, 2018 at 6:55

3 Answers 3

New Solution

Call a global method from InfoWindow using plain-old click handler.

`onclick="removePoint(${vm.markerId})"`

Then use a closure to access your vm from the global method.

const vm = this window.removePoint = function(id) { vm.removePoint(id) }

IF you have multiple instances, you will need to extend this approach.

Old Solution

There are 2 issues here.

First, fix the syntax error concerning the quote.

vm.markerid + ")\">Remove</a>"

Even better, take advantage of template strings to avoid this kind of quote insanity.

vm.infowindow = new google.maps.InfoWindow({ content:`
<a class="btn btn-danger" @click.native="removePoint(${vm.markerid})">Remove</a>`, maxWidth: 300 });

Second, any function inside a vue template is always within the scope of the ponent. Assume a this. object is placed in front. So calling removePoint is really calling this.removePoint.

Define function inside instance.

vm.removePoint = function(id) { console.log(`removing point ${id}...`) }

Or make sure your ponent options defines removePoint in the methods section.

You can also define removePoint globally (on the window object) and call $window.removePoint(" + vm.markerId + ")" from the template if using a plugin such as https://www.npmjs./package/window-plugin.

@click.native=\"$window.removePoint(" + vm.markerid ...

function removePoint(id) { console.log(`removing point ${id}...`) }

@StevenSpungin solution worked like a charm. Thanks.. Just to make it simple.

while creating marker content,

markerContent += `<button onclick='editVehicle(${vehicle.id});'>EDIT</button>`;

and on created(any ponent)

 created() {
    let that = this;
    window.editAppointment = function(vehicleId) {
        console.log("vehicleId", vehicleId);
    }
}

in your mounted method map the window method to the vue method:

mounted(){
    this.initMap();
    window.linkToKey = this.linkToKey;    // vue method wired to window method
},

and in the html for your infoWindow:

const contentString =`<img onClick="linkToKey('${video.key}')" src="images/${video.key}.png">`;
const infowindow = new google.maps.InfoWindow({
    content: contentString,
});

and then you can define your vue method as expected:

methods: {
    linkToKey(key) {
        console.log('key', key);            
        this.$router.push(`/video/${key}`);
    },

then the window method is wired to your vue method and you can do everything as expected on the click of any items in the InfoWindow