CODEWITHSUNDEEP
javascriptgoogle-mapsvue.jsvuejs2vue-component
coder
coder

Reputation: 642

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

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?

Upvotes: 3

Views: 2895

Answers (3)

contractorwolf
contractorwolf

Reputation: 448

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

Upvotes: 0

Prashant
Prashant

Reputation: 1385

@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);
    }
}

Upvotes: 1

Steven Spungin
Steven Spungin

Reputation: 29071

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}...`) }

Upvotes: 8

Related Questions