How to assign event handler to infowindow in google map v3

Question

This is my code:

window.onload = function(){
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(5.311005375262571, 100.44538021087646)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);


        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(5.311005375262571, 100.44538021087646),
          map: map
     });





  var infoWindowContent = '<div><p id="center12" >pop up hi</p></div>'



   var infowindow = new google.maps.InfoWindow({
      content: infoWindowContent
  });
      google.maps.event.addListener(marker, 'click', function() {
       infowindow.open(map,marker);

           var mapCenter = document.getElementById("center12");
           mapCenter.onclick = function(){
              alert("hi");
           }

      });



}

I expect the browser to alert hi when I clicked on the text 'pop up hi', but it obviously doesn't work, why???

Answer 1

Assign the click -listener when the domready -event of the infowindow fires(at this time the elements that will be used to display the infowindow have been injected into the document):

  google.maps.event.addListener(infowindow,'domready',function(){
     google.maps.event.addDomListener(document.getElementById("center12"),
                                      'click',
                                       function(){
                                            alert('hi');
                                        });
  });