I am trying to bind a click event to an tag inside my infoBubble, unfotunatley I am having no luck at all. Here is my code and a few examples of what I have tried.
setTimeout(function () {
var options = {
zoom: 8,
mapTypeControl: false,
center: new google.maps.LatLng(sonypro.locator.map.defaults.lat,sonypro.locator.map.defaults.lon),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
sonypro.locator.map.view = new google.maps.Map(document.getElementById(sonypro.locator.selector_id.map),options);
sonypro.locator.map.panorama = sonypro.locator.map.view.getStreetView();
google.maps.event.addListener(sonypro.locator.map.panorama, 'visible_changed', function() {
if (sonypro.locator.map.panorama.getVisible()) {
if (!$('#'+sonypro.locator.selector_id.sidebar).hasClass('closed')) {
$('#'+sonypro.locator.selector_id.handle_btn).click();
}
$('#'+sonypro.locator.selector_id.sidebar).hide();
} else {
$('#'+sonypro.locator.selector_id.sidebar).show();
if ($('#'+sonypro.locator.selector_id.sidebar).hasClass('closed')) {
$('#'+sonypro.locator.selector_id.handle_btn).click();
}
}
});
sonypro.locator.map.bounds = new google.maps.LatLngBounds();
if (sonypro.locator.map.dealers.length > 0) {
for (var i = 0; i < sonypro.locator.map.dealers.length; i++) {
var image = new google.maps.MarkerImage(
'/assets/images/content/markers/marker' + i + '.png',
new google.maps.Size(20, 34),
new google.maps.Point(0,0),
new google.maps.Point(9, 26)
);
var dealer = sonypro.locator.map.dealers[i];
//info as html
var info_content = sonypro.locator.list.template(dealer.name,dealer.address,dealer.telephone,dealer.email,dealer.website);
//set markers
var myLatLng = new google.maps.LatLng(dealer.lat, dealer.lng);
sonypro.locator.map.markers[i] = new google.maps.Marker({
id: dealer.id,
position: myLatLng,
map: sonypro.locator.map.view,
icon: image,
shape: {coord: [1, 7, 9, 25, 16, 7, 13 , 3, 9 , 1, 4 , 3],type: 'poly'},
title: dealer.name,
info: info_content
});
//set infobubble
var infoBubble = new InfoBubble({
map: sonypro.locator.map.view,
content: '',
position: myLatLng,
shadowStyle: 0,
padding: 15,
backgroundColor: 'rgb(255,255,255)',
minWidth: 160,
maxWidth: 240,
minHeight: 80,
maxHeight: 300,
borderRadius: 0,
arrowSize: 10,
borderWidth: 1,
borderColor: '#f36700',
disableAutoPan: true,
hideCloseButton: false,
arrowPosition: 18,
backgroundClassName: sonypro.locator.classes.infowindow,
arrowStyle: 0
});
//bounding
sonypro.locator.map.bounds.extend(myLatLng);
sonypro.locator.map.view.fitBounds(sonypro.locator.map.bounds);
//set infowindows
google.maps.event.addListener(sonypro.locator.map.markers[i], 'click', function () {
console.log('Something clicked');
var _lm = sonypro.locator.map.last_viewed_marker;
if (_lm == -1 || (_lm != -1 && _lm != this.id) || infoBubble.isOpen() == false) {
infoBubble.content = this.info;
infoBubble.open(sonypro.locator.map.view, this);
sonypro.locator.map.view.setCenter(this.getPosition());
sonypro.locator.map.last_viewed_marker = this.id;
}
});
$(infoBubble.bubble_).live("click", function() {
console.log('clicked!');
});
$(".icon.phne", infoBubble.bubble_).live("click", function() {
console.log('actived jimmy!');
});
}
sonypro.locator.list.init();
}
}, 500);
Some of the above code might not be relevant and there is more than this but again not sure of all of it necessary but I can post all of it if necessary.
I've also tried using .live() and .on() to no avail.
Here is the template for the contents of the info bubble below. And the entire selector for the icon I am trying to bind a click event to is (.pge-dl-engagement .dealer-wrapper .dealer-infowindow a.icon.phne)
template: function (name,address,telephone,email,link) {
var content = '',_name = '',_address = '',_telephone = '',_email = '',_link = '';
if (!sonypro.helper.isEmpty(name)) _name = '<h3>'+name+'</h3>';
if (!sonypro.helper.isEmpty(address)) _address = '<p>'+address+'</p><p class="display">'+telephone+'</p></div>';
if (!sonypro.helper.isEmpty(telephone)) _telephone = '<div class="icons"><a class="icon phne"></a>';
if (!sonypro.helper.isEmpty(email)) _email = '<a class="icon email" href="mailto:'+email+'"></a>';
if (!sonypro.helper.isEmpty(link)) _link = '<a class="icon link" target="_blank" href="'+link+'"></a></div>';
content = _name + _address + _telephone + _email + _link + '<div class="space cf">-</div>';
sonypro.locator.list.html = sonypro.locator.list.html + '<li class="cf"><div class="dtls">' + content + '</li>';
return content;
}
This turned out to be the solution, although it might be a bit different to what you might need:
google.maps.event.addListener(sonypro.locator.map.markers[i], 'click', function () {
//do stuff
}