CODEWITHSUNDEEP
jquerygoogle-maps-api-3google-maps-markers
Felipe Kettle
Felipe Kettle

Reputation: 117

Attach event handler to element inside google maps info bubble

I have a question regarding google maps and event handling/listening.

Using jQuery and google maps v3, I am able to place a map marker and an event listener that opens an infobubble when the user clicks on the marker. What I'd like to do (but so far haven't been able to figure out) is add another event handler to the contents of the info bubble. For example, if the user clicks on the map marker open the info bubble (that part works), and then if they click on something inside the infobubble do something else. I have pasted my code below, thanks in advance for any help

function addMarker(data) {
    var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
    var title = data.title? data.title: "";
    var icon = $('#siteUrl').val() + 'img/locate.png';

var bubbleContentString = "<span class=\"bubble-details-button\">Get Details about " + title+ "</span>";

myInfoBubble = new InfoBubble({
    content: bubbleContentString,
    hideCloseButton: true,        
    backgroundColor: '#004475',
    borderColor: '#004475'
});

var myMarker =  new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: title,
        icon: icon
    });    
addListenerToMarker(myMarker, myInfoBubble);
markerSet.push(myMarker, myInfoBubble);    
}
function addListenerToMarker(marker, bubble){
    console.log($(bubble.getContent()).find('.bubble-details-button')[0]);
    google.maps.event.addListener(marker, 'click', function() { 
        if (!bubble.isOpen()) {  
            google.maps.event.addListenerOnce(bubble, 'domready', function(){ 
                console.log($(bubble.getContent()).find('.bubble-details-button')[0]);
                google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0], 'click', function(){ 
                    alert("hi"); 
                }); 
            });
            bubble.open(map, marker); 
        }     
    });
}

Upvotes: 5

Views: 4593

Answers (2)

Sean Mickey
Sean Mickey

Reputation: 7716

In scenarios where I have to do what you are describing, I include a JavaScript function call directly in the InfoBubble content. I often include hyperlinks within an InfoBubble, so in that case I do the following: 1 - Write a JavaScript function to handle a hyperlink click. 2 - Create the marker. 3 - Attach a click event handler to the marker that opens an InfoBubble. 4 - Define the content of the InfoBubble so that JavaScript embedded directly in the InfoBubble content is set to handle the click event by calling the JavaScript function that was defined in Step #1 - something like:

"<span>" +
     "<a href='javascript:showDetail(" + param1 + "," + param2 + ");'>" + 
      displayTextContent + "</a>" +
"</span>"

Upvotes: 3

Engineer
Engineer

Reputation: 48803

You are trying to add "click" event on element ,which is not DOM Element. $('.bubble-details-button') is not DOM Element (it is a wrapper of DOM Element), but $('.bubble-details-button')[0] is.

On the other hand, when you are trying to add "click" event, the content is not created yet. You can work(e.g. add events) with content's elements ,only when they are already created. The InfoBubble will trigger "domready" event, when its content will be created.So you need to handle it:

 if (!bubble.isOpen()) {
    google.maps.event.addListenerOnce(bubble, 'domready', function(){
        google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0], 'click', function(){
            alert("hi");
        });
    });
    bubble.open(map, mymarker);        
}

Upvotes: 5

Related Questions