title: Registering click event on Google Maps Infowindow
body: <p>I am building a hotel website and working on the map to show hotels. 
  <a href="https://i.stack.imgur.com/Jif1J.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jif1J.jpg" alt="enter image description here"></a>
  I am using a mix of AngularJS code and the example codes provided by Google Maps Javascript API ( <a href="https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple</a>). </p>
  
  <p>My code goes as below - </p>
  
  <pre><code>    function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: coord
          });
  
          $http.post("/events/hotel_search", { city : city, facilities : facilities }).then(function(response) {
              $scope.hotels = response.data.hotels;
  var image = '/img/bed.png';
  $scope.hotels.forEach(function(h){
  
        var contentString= '&lt;div style="width:350px"&gt;&lt;div style="width:130px;float:left"&gt;&lt;img src="'+h.images[0]+'"  width="130" /&gt;&lt;h4&gt;'+h.name+'&lt;/h4&gt;&lt;/div&gt;&lt;div style="width:200px;float:left;padding-left:20px"&gt;&lt;p style="font-size:150%;color:orange"&gt;200-500$/night&lt;/p&gt;&lt;p style="font-size:80%"&gt;'+h.address+'&lt;/p&gt;&lt;div class="star-rating-r"&gt;&lt;a href="#"&gt;&lt;img alt="" src="img/rating-b.png"&gt;&lt;/a&gt;&lt;a href="#"&gt;&lt;img alt="" src="img/rating-b.png"&gt;&lt;/a&gt;&lt;a href="#"&gt;&lt;img alt="" src="img/rating-b.png"&gt;&lt;/a&gt;&lt;a href="#"&gt;&lt;img alt="" src="img/rating-b.png"&gt;&lt;/a&gt;&lt;a href="#"&gt;&lt;img alt="" src="img/rating-a.png"&gt;&lt;/a&gt;&lt;/div&gt;&lt;p&gt;&lt;br/&gt;&lt;div class="cat-icons"&gt;&lt;span class="cat-icon-01 active"&gt;&lt;/span&gt;&lt;span class="cat-icon-02"&gt;&lt;/span&gt;&lt;span class="cat-icon-03"&gt;&lt;/span&gt;&lt;span class="cat-icon-04"&gt;&lt;/span&gt;&lt;span class="cat-icon-05"&gt;&lt;/span&gt;&lt;span class="cat-icon-06"&gt;&lt;/span&gt;&lt;div class="clear"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/p&gt;&lt;button class="srch-btn xbtn" style="margin-top:20px;float:right" id="'+h._id+'"&gt;SELECT HOTEL&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;';
  
  
  
          var infowindow = new google.maps.InfoWindow({
              content: contentString
            });
              var beachMarker = new google.maps.Marker({
                position: {lat: h.lat, lng: h.lng },
                map: map,
                icon: image
              });
  
            beachMarker.addListener('click', function() {
              infowindow.open(map, beachMarker);
            });
  
  
  
  
  
     })
  
  
       });
  
        }
  </code></pre>
  
  <p>My problem is that I am failing to register a click event when someone clicks on the button inside the infowindow. I am referring to the 'SELECT HOTEL' button. How do I go about this ?</p>