InfoWindow in google maps is a type of toast div or should I say a popover that appears when we hover over the map marker, it contains information about a specific place anything you want to show in it.
-
Let me show you the easiest way to add a button with onclick function inside the infoWindow content string if nothing else is working or if you are trying to click on the button before the DOM is ready.
-
Content String:
let buttonName = "any name";
let contentString = "<div>" +
// other divs ....
"<button id='btn-click'>" + buttonName
+ "</button>"
// other divs ....
+"</div>";
- Adding click event on your function:
google.maps.event.addListener(infoWindow, 'domready' () => {
const someButton = document.getElementById('btn-click');
if (someButton) {
google.maps.listener.addDomListener(someButton, 'click',
() => {
// show something.
// add something.
})
}
});
- Marker Code:
google.maps.event.addListener(marker, 'mouseover', function(){
// some code about setting content inside info window or showing up the info window however you want to show it.
});