Привет!
На карте множество маркеров. Использую плагин InfoBox для стилизации всплывающего окна.
Внутри окна сложный контент (ссылки, фото-слайдер, кнопки). Необходимо на каждое такое infobox-окно навесить события на нужные мне элементы, проинициализировать jquery-плагин слайдера.
Сделал (листинг ниже), но возникают странные тормоза. При клики по первому маркеру - появляется окно и все отлично работает. При клике на каждом следующем маркере начинаются подвисания браузера и возникает каша в DOMе, как будто html-содержимое одного окна накладывается на другое. Клик на 4ом-5ом маркере вообще вешает браузер. И jquery тоже падает в ошибку.
Я так понимаю, что сам контейнер infobox на карте всего один, а по клику по разным маркерам в него просто подгружается разный html.
Подскажите, в каком направлении двигаться?
Как проинициализировать плагин слайдера только в конкретном infobox-окне, которое сейчас на экране?
Спасибо!
function map_init(){
var mapOptions = {...};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$.getJSON("/get_markers.php", function(markers){
for (var i = 0; i < markers.length; i++){
createMarker(markers[i], map);
}
});
}
function createMarker(m, map){
var latlng = new google.maps.LatLng(m.lat, m.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
html: m.html
});
// infobox settings
var boxText = document.createElement("div");
boxText.innerHTML = m.html;
var ibOptions = {
content: boxText,
...
};
google.maps.event.addListener(marker, "click", function () {
var ib = new InfoBox(ibOptions);
ib.open(map, this);
map.panTo(latlng);
});
google.maps.event.addListener(ib, 'domready', function() {
// здесь пытаюсь навесить какой-нибудь JS код / события / инициализацию плагина на каждый infobox
$(".item_gallery, .infobox").brazzersCarousel();
});
}