How to trigger a function using @click inside infowindow of google maps in vue js?

Question

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?

Looks like you have a syntax error here: `vm.markerid+)\">Remove"` . There's no open quote for the last string. It should be `vm.markerid + ")\">Remove"` — Dhruv Murarka, Nov 08 '18 at 05:54
getting error as Uncaught ReferenceError: removePoint is not defined at HTMLButtonElement.onclick — coder, Nov 08 '18 at 06: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, Nov 08 '18 at 06:52
Sir, removePoint is a function which is defined just below addPolygon — coder, Nov 08 '18 at 06:55
The HTML is also required. Please see https://stackoverflow.com/help/mcve and post your code accordingly. — Dhruv Murarka, Nov 08 '18 at 07:11

Steven Spungin · Accepted Answer · 2018-11-08T09:50:48.583

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 component. 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 component 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.com/package/window-plugin.

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

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

score 1 · Answer 2 · answered Sep 03 '19 at 14:39

1

@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 component)

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

answered Sep 03 '19 at 14:39

Prashant

1,375
2
14
22

This didn't work for me. I also think `window.editAppointment` should be `window.editVehicle` per your `onclick` – Ajility Oct 05 '20 at 14:22
I tried `` and in `created()` the same as your sample except `window.editVehicle` – Ajility Oct 05 '20 at 14:24

score 0 · Answer 3 · answered Feb 26 '21 at 04:49

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

How to trigger a function using @click inside infowindow of google maps in vue js?

3 Answers3

New Solution

Old Solution

Linked