I am trying to call a method on click of an element. The HTML is stored in a variable. It looks like below:
var cont = '<div class="infocontent" onClick="clickPoly('+index +')" style="width:100px;" >View More</div>';
const clickPoly = (index) => {
var square = coordinates[index];
if(square != undefined){
square.dispatchEvent('click');
}
}
clickPoly() should be called onclick of html above. But when I click on "View More", it shows "clickPoly is not defined".
Basically, I am showing multiple polygons on google map and on hover of each polygon I am showing infowindow. In infoWindow I need to show "View More" button and show relevant content.
You can see full code here
clickPoly needs to be defined on window.
window.clickPoly = (index) => {
var square = coordinates[index];
if (square != undefined) {
square.dispatchEvent("click");
}
};
alternatively, pass an HTMLElement to infowindow.setContent(element) and add the event in your component
var cont = '<div class="infocontent2" data-inx="'+index+'" onClick="clickPoly('+index +')" style="width:100px;" >View More</div>';
becomes
const cont = document.createElement('div').
cont.classList.add('infocontent2');
cont.addEventListener(() => clickPoly(index));
// add aria-label
cont.style.width = '100px';
cont.innerText = 'View More'