Как я могу показать несколько маркеров с infobubbles() и вкладками в google maps api v3?

Question

Я использую google maps api v3 и плагин InfoBubbles. Я пытаюсь заполнить карту несколькими маркерами. Каждый маркер имеет InfoBubble, который открывается при нажатии. У этих InfoBubbless есть вкладки (до 3 вкладок), каждая из которых имеет собственный контент и html.

Как я могу получить маркеры, которые будут отображаться на картах с помощью вкладок и инфооббюро.

В настоящее время я устанавливаю информационные пакеты и маркеры в массивы и используя общедоступную функцию для обработки щелчка при прохождении индекса.

 infoBubbles[i] = new InfoBubble({ 
      map: map, 
      minHeight: point[i].min_height, 
      maxHeight: point[i].max_height, 
      minWidth: point[i].min_width, 
      maxWidth: point[i].max_width, 
      disableAutoPan: false, 
      hideCloseButton: false, 
      arrowPosition: 30, 
      padding:12 
     }); 
     google.maps.event.addListener(marker, 'click', handleMarkerClick(marker, i)); 

и функция маркера нажмите:

function handleMarkerClick(marker,index) { 
    return function() { 
     if (!infoBubbles[index].isOpen()) { 
      infoBubbles[index].open(map, marker); 
     }else{ 
      infoBubbles[index].close(map, marker); 
     } 
    } 
} 

Answer 1

я ответил на мой собственный вопрос, используя тот же метод выше. Я получил ответ от нескольких других, что это правильный путь.

Я использую следующий код, чтобы определить один инфо-банк, и я просто удалю все вкладки, содержимое и перепозицию/оплату содержимого для этого пузыря.

/** 
* add a listener for the click of a marker 
* when the marker is clicked, get the current amount 
* of tabs, and remove each tab. Then reset the width/heights 
* and readd the new tabs with their content. 
* @return {[type]} 
*/ 
google.maps.event.addListener(marker, 'click', function(){ 

    /** remove all of the tabs from the infobubble, early prototype */ 
    if (tabCount > 0){ 
     for (var i = 0; i < tabCount; i++){ 
      infoBubble.removeTab(0); 
     } 
     tabCount = 0; 
    } 

    /** setup the min/max width and heights for the bubble */ 
    infoBubble.setMinWidth(this.infoBubble_minWidth); 
    infoBubble.setMaxWidth(this.infoBubble_maxWidth); 
    infoBubble.setMinHeight(this.infoBubble_minHeight); 
    infoBubble.setMaxHeight(this.infoBubble_maxHeight); 

    var tabs = this.infoBubble_tabs; 

    /** @type {Number} set the counter to 1, since tab index starts at 1 */ 
    for (var ii = 0; ii < tabs.length; ii++) { 
     infoBubble.addTab(tabs[ii].tabTitle, tabs[ii].tabContent); 
     /** count the amount of tabs there are */ 
     tabCount++; 
    } 
    /** open the infoBubble */ 
    infoBubble.open(map, this); 
});