Adding a button with onclick on InfoWindow – Google Maps API

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 butt…

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.
});


That’s it, let me know if it worked :).

Print Share Comment Cite Upload Translate
APA
Usaid | Sciencx (2024-03-28T17:05:56+00:00) » Adding a button with onclick on InfoWindow – Google Maps API. Retrieved from https://www.scien.cx/2021/09/20/adding-a-button-with-onclick-on-infowindow-google-maps-api/.
MLA
" » Adding a button with onclick on InfoWindow – Google Maps API." Usaid | Sciencx - Monday September 20, 2021, https://www.scien.cx/2021/09/20/adding-a-button-with-onclick-on-infowindow-google-maps-api/
HARVARD
Usaid | Sciencx Monday September 20, 2021 » Adding a button with onclick on InfoWindow – Google Maps API., viewed 2024-03-28T17:05:56+00:00,<https://www.scien.cx/2021/09/20/adding-a-button-with-onclick-on-infowindow-google-maps-api/>
VANCOUVER
Usaid | Sciencx - » Adding a button with onclick on InfoWindow – Google Maps API. [Internet]. [Accessed 2024-03-28T17:05:56+00:00]. Available from: https://www.scien.cx/2021/09/20/adding-a-button-with-onclick-on-infowindow-google-maps-api/
CHICAGO
" » Adding a button with onclick on InfoWindow – Google Maps API." Usaid | Sciencx - Accessed 2024-03-28T17:05:56+00:00. https://www.scien.cx/2021/09/20/adding-a-button-with-onclick-on-infowindow-google-maps-api/
IEEE
" » Adding a button with onclick on InfoWindow – Google Maps API." Usaid | Sciencx [Online]. Available: https://www.scien.cx/2021/09/20/adding-a-button-with-onclick-on-infowindow-google-maps-api/. [Accessed: 2024-03-28T17:05:56+00:00]
rf:citation
» Adding a button with onclick on InfoWindow – Google Maps API | Usaid | Sciencx | https://www.scien.cx/2021/09/20/adding-a-button-with-onclick-on-infowindow-google-maps-api/ | 2024-03-28T17:05:56+00:00
https://github.com/addpipe/simple-recorderjs-demo