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

Having trouble changing the chosen selection in the material UI dropdown menu

Angular2 bootstrapping of multiple components

Update the Laravel public directory

Prevent refreshing Google Maps when changing routes in AngularJS

Challenges surrounding jQuery's .before

The process of obtaining and sending a token from an HTML page while submitting a form request to a Laravel 5 application involves a few key steps

Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

Using AngularJS to fetch images from RSS feed description

Visualize data retrieved from a third-party website through scraping in a chart

Increasing the size of a div container based on the position of the cursor on the

Unable to render the JSON data that was retrieved from a jQuery AJAX request

Are you searching for the origin of a dynamic dropdown widget or database?

Neglect to notify about the input text's value

Building a TypeScript Rest API with efficient routing, controllers, and classes for seamless management

The localhost on port 3000 seems to be malfunctioning on Windows when trying to develop a ReactJS app using Create React App

Tips for updating a column with just one button in AngularJS

Oh no! It seems like the build script is missing in the NPM

Exploring the power of jQuery's deferred method and utilizing the ajax beforeSend

Retrieve a specific value from a JavaScript object

Using a locally hosted HTML page to update a JSON file stored on my computer