Utilizing the vue2-google-maps package, I have created a custom popup. Within this custom popup, there is a button that is intended to open a new popup in place of the existing one.
Here is the HTML code:
<gmap-info-window
:options="infoOptions"
:position="infoWindowPos"
:opened="infoWinOpen"
@closeclick="infoWinOpen=false"
>
<div v-html="infoContent"></div>
</gmap-info-window>
For the first popup, here is the JavaScript code:
toggleInfoWindow: function (marker, idx) {
this.infoWindowPos = marker.position;
this.activeMarker = marker;
this.infoContent = this.getInfoWindowContent(marker);
// Check if it's the same marker that was previously selected, if yes then toggle
if (this.currentMidx == idx) {
this.infoWinOpen = !this.infoWinOpen;
}
// If it's a different marker, set the info window to open and reset the current marker index
else {
this.infoWinOpen = true;
this.currentMidx = idx;
}
},
getInfoWindowContent: function (marker) {
return (`<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">${marker.name}</p>
</div>
</div>
<div class="content">
${marker.description}
<br>
<time datetime="2016-1-1">${marker.date_build}</time>
<button @click="getSecondPopUp">Get second popup</button>
</div>
</div>
</div>`);
},
getSecondPopUp: function () {
console.log("why don't you work?");
}
The issue arises when clicking on the button as the second method fails to execute. Can anyone shed some light on why this might be happening and how to resolve it?
Thank you in advance.