DEV Community

Usaid
Usaid

Posted on

Adding a button with onclick on InfoWindow - Google Maps API

#javascript #tutorial #googlemaps

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 mode Exit 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 mode Exit 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 mode Exit fullscreen mode
That's it, let me know if it worked :).

Top comments (0)