Adding an accordion inside google maps infoBubble (from google maps utility library)

I am trying to add a jquery accordion (http://jqueryui.com/demos/accordion/) inside a google maps infoBubble

I first add a markup similar to

<div id="accordion">
   <h3><a href="#">First header</a></h3>
   <div>First content</div>
   <h3><a href="#">Second header</a></h3>
   <div>Second content</div>
</div> 

to the infoBubble. But i'm not able to attach any events to the above markup.

When I try to invoke $( "#accordion" ).accordion(); inside the domready event similar to

google.maps.event.addListener(infoBubble, 'domready', function() {
    $("#accordion").accordion();
});

It does not seem to attach the events.

开发者_如何学运维

I am not sure what is wrong with my code. Can someone please help me with this.

---

Your code isn't working because it is running before the accordion in the infobubble exists. You need to place that code so that it is called after the content of the infowindow has been set. Not only does it need to be run after it's been opened, but it also needs to be run a few hundred milliseconds after it's been opened. (You'd have to do testing in all browsers to find the right amount - I arbitrarily chose 500ms and it worked.) After looking through the Infobubble code, I was disappointed to see that unless I missed something, there is no event that fires when the open is complete.

However, I was able to get it working by placing this code on line 122 (after the infobubble is opened) of the example that you linked to and also in the marker's click callback below that:

    setTimeout(function() {
        $("#accordion").accordion();
    }, 500);

This is not an optimal solution, but at least it demonstrates the problem and hopefully leads to the right solution.