Question

I am a new beginner try to add a google map in my website, and there have some problems.
I am trying to add some markers with the infobubble in the google map, then i want to add inside the infobubble content, after click on the , a function will be call, but infobubble seems different with infowindow, i have try to search many methods and still can’t do this.

Here is my example:

function createMarker(point, locations, map) {


var content = '<a id="test" href="#">Deatils Information</a>';

var infoBubble = new InfoBubble({
    minWidth: 300,
    minHeight: 150,
    padding: 15,
    hideCloseButton: true,
    borderRadius: 0,
    content: content
});


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


google.maps.event.addListener(marker, 'click', function() {
    infoBubble.open(map, marker);
});



};

I have search and find many examples,

$("#test").live("click", function(){
alert("clicked");           
});

this function is only work inside the infowindow.

and

$(infoBubble.bubble_).live("click", function() {
  alert('clicked!');
});

this function do not have any response,

if there any methods can do this function? Or somethings i should be read if i want to solve this problems? Please give me some hints. Thank you very much!!

Answer 1

Your problem is the HTML “string” in the infobubble is not part of the DOM until after the infobubble is created and rendered.

This should work:

function testClick() {
  alert("clicked!");
}

and in your infowindow/infobubble:

 var content = '<a id="test" href="javascript:testClick();">Deatils Information</a>';