17
Adding a button with onclick on InfoWindow - Google Maps API
source link: https://dev.to/usaidpeerzada/adding-a-button-with-onclick-on-infowindow-google-maps-api-1ne6
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Adding a button with onclick on InfoWindow - Google Maps API
Sep 20
・1 min read
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>";
Enter fullscreen modeExit fullscreen mode
- 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.
})
}
});
Enter fullscreen modeExit fullscreen mode
- 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.
});
Enter fullscreen modeExit fullscreen mode
That's it, let me know if it worked :).
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK