In my Nuxt.js app in SPA mode, I am utilizing the Google Maps API and I'm aiming to trigger a function in Vue.js methods from the gmap click event.
When attempting this.createInfoWindow(), it became apparent that this does not refer to the VueComponent, but instead to the Window.
Within my component, I initialize Google Maps and set up the click event in the vue mounted:
async mounted() {
// Map initialization
const google = await gmapsInit()
this.map = new google.maps.Map(
document.getElementById('g-map'),
this.mapOptions
)
// Add click event
google.maps.event.addListener(this.map, 'click', e => {
// Function call not functioning
this.createInfoWindow(e.latLng)
})
}
Furthermore, in the vue methods, I have defined the function:
methods: {
async createInfoWindow(latLng) {
const google = await gmapsInit()
const infoWindow = new google.maps.InfoWindow({
content: 'InfoWindow',
position: latLng
})
infoWindow.open(this.map)
}
}
Though everything appears to be in order, the function call this.createInfoWindow(e.latLng) is not working as expected. How can I successfully invoke the function createInfoWindow from the click event?