I am building a hotel website and working on the map to show hotels.
I am using a mix of AngularJS code and the example codes provided by Google Maps Javascript API ( https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple).
My code goes as below -
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= '<div style="width:350px"><div style="width:130px;float:left"><img src="'+h.images[0]+'" width="130" /><h4>'+h.name+'</h4></div><div style="width:200px;float:left;padding-left:20px"><p style="font-size:150%;color:orange">200-500$/night</p><p style="font-size:80%">'+h.address+'</p><div class="star-rating-r"><a href="#"><img alt="" src="img/rating-b.png"></a><a href="#"><img alt="" src="img/rating-b.png"></a><a href="#"><img alt="" src="img/rating-b.png"></a><a href="#"><img alt="" src="img/rating-b.png"></a><a href="#"><img alt="" src="img/rating-a.png"></a></div><p><br/><div class="cat-icons"><span class="cat-icon-01 active"></span><span class="cat-icon-02"></span><span class="cat-icon-03"></span><span class="cat-icon-04"></span><span class="cat-icon-05"></span><span class="cat-icon-06"></span><div class="clear"></div></div></p><button class="srch-btn xbtn" style="margin-top:20px;float:right" id="'+h._id+'">SELECT HOTEL</button></div></div>';
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);
});
})
});
}
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 ?
