What is the best method for activating a function with @click within an infowindow on Google Maps in Vue.js?

Question

What is the best method for activating a function with @click within an infowindow on Google Maps in Vue.js?

Here's the current code snippet:

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 want to trigger another function called removePoint.

I have defined it like this:

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

However, I'm unable to make it work with the above code. Nothing happens when I click on the remove button. Can you help me find a solution?

javascript google-maps vue.js vuejs2 vue-component

Answer 1

Answer №1

Revamped Solution

In order to integrate a global method from InfoWindow, implement a basic click handler function.

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

To access your vm within the global method, create a closure via code.


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

If dealing with multiple instances, further enhancements may be required in extending this strategy.

Prior Method

There exist 2 pivotal issues at play here.

To start with, rectify the syntax error related to quotes.

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

A more efficient alternative is leveraging template strings to evade quote complications.

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

Secondly, any function embedded within a vue template operates under the component's scope. Assume a this. object precedes it. Therefore, calling removePoint essentially invokes this.removePoint.

Define the function inside the instance itself.


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

Alternatively, ensure that the component options explicitly define removePoint within the methods section.

You also have the option of globally defining removePoint (on the window object) and invoking

$window.removePoint(" + vm.markerId + ")"

within the template if utilizing a plugin like https://www.npmjs.com/package/window-plugin.

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


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

Answer 2

Revamped Solution

In order to integrate a global method from InfoWindow, implement a basic click handler function.

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

To access your vm within the global method, create a closure via code.


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

If dealing with multiple instances, further enhancements may be required in extending this strategy.

Prior Method

There exist 2 pivotal issues at play here.

To start with, rectify the syntax error related to quotes.

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

A more efficient alternative is leveraging template strings to evade quote complications.

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

Secondly, any function embedded within a vue template operates under the component's scope. Assume a this. object precedes it. Therefore, calling removePoint essentially invokes this.removePoint.

Define the function inside the instance itself.


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

Alternatively, ensure that the component options explicitly define removePoint within the methods section.

You also have the option of globally defining removePoint (on the window object) and invoking

$window.removePoint(" + vm.markerId + ")"

within the template if utilizing a plugin like https://www.npmjs.com/package/window-plugin.

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


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

Answer 3

Answer №2

StevenSpungin's solution worked perfectly. Many thanks! Just keeping it simple.

When setting up the marker content,

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

And in any component where it is created,

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

Answer 4

StevenSpungin's solution worked perfectly. Many thanks! Just keeping it simple.

When setting up the marker content,

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

And in any component where it is created,

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

Answer 5

Answer №3

When setting up your mounted method, remember to map the window method to the vue method:

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

Additionally, 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,
});

You can define your vue method as follows:

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

This way, the window method is connected to your vue method and you can expect everything to function properly when clicking on items in the InfoWindow.

Answer 6

When setting up your mounted method, remember to map the window method to the vue method:

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

Additionally, 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,
});

You can define your vue method as follows:

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

This way, the window method is connected to your vue method and you can expect everything to function properly when clicking on items in the InfoWindow.

What is the best method for activating a function with @click within an infowindow on Google Maps in Vue.js?

Answer №1

Revamped Solution

Prior Method

Answer №2

Answer №3

Similar questions

The Gatsby node encounters an error while trying to create a new page

Javascript Array Dilemmas

A guide on extracting the text content from an anchor tag by using xPath() with a combination of selenium and Mocha

Can the server URL be concealed within the dist folder in Vue.js?

Looking to retrieve a specific data element within Vue.js?

jQuery performs perfectly in Chrome but encounters issues in IE9/IE8 and other older versions of Internet

Is it just me or does Img never work, no matter what the "src" is?

Set options for nested arrays with up to n levels of children

Displaying iframes in AngularJS using a service

Tips for utilizing the select feature within an ng-repeat loop while maintaining the selected value when fetching data from an API

Learning how to implement server side rendering in React JS through tutorials

What is the most effective way to transfer information between two pages in React JS?

Is there a way to verify that all images have been successfully loaded following an

Chaining inheritance through Object.create

Tips for retrieving the HTML file of a modified canvas in HTML5

Eliminating event listeners in Nuxt/Vue application

What sets apart the concept of asynchrony in C# from that in JavaScript?

The specific module 'franc' does not have the export named 'default' as requested

React does not trigger a re-render when dynamically generated buttons are created

How do I integrate a button into my grey navigation bar using tailwindcss in REACT?