Добавление аккордеона в Google Maps infoBubble (из библиотеки утилит Google Maps)

Question

Я пытаюсь добавить jquery аккордеон (http://jqueryui.com/demos/accordion/) внутри карт Google infoBubble

Сначала я добавляю разметку, похожую на

<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> 

к информационному пузырьку. Но я не могу прикрепить какие-либо события к вышеупомянутой разметке.

Когда я пытаюсь вызвать $ ("#accordion") .accordion (); внутри события domready, похожего на

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

Не похоже, чтобы прикрепить события.

Я не уверен, что не так с моим кодом. Может кто-нибудь, пожалуйста, помогите мне с этим.

Answer 1

Ваш код не работает, потому что он работает до существования аккордеона в инфопузыри.Вам нужно разместить этот код так, чтобы он вызывался после того, как было установлено содержимое информационного окна.Его нужно не только запустить после его открытия, но также запустить через несколько сотен миллисекунд после открытия.(Вам нужно было бы провести тестирование во всех браузерах, чтобы найти нужную сумму - я произвольно выбрал 500 мс, и это сработало.) Просматривая код Infobubble, я был разочарован тем, что, если я что-то пропустил, не возникает событие, которое запускаеткогда открытие завершено.

Тем не менее, я смог заставить его работать, поместив этот код в строку 122 (после открытия инфопузырька) примера, с которым вы связались, а также в обратный вызов щелчка маркера нижечто:

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

Это не оптимальное решение, но, по крайней мере, оно демонстрирует проблему и, мы надеемся, приведет к правильному решению.