Googleマップのapi v3でinfobubbles（）とタブを使用して複数のマーカーを表示するにはどうすればよいですか？

Question

私はgoogle maps api v3とInfoBubblesプラグインを使用しています。私は、複数のマーカーでマップに値を設定しようとしています。各マーカーには、クリックすると開くInfoBubbleがあります。これらのInfoBublessはそれぞれ独自のコンテンツとHTMLを持つタブ（最大3つのタブ）を持っています。

どのようにマーカーとそのタブとinfobubblesでマップに表示することができます。

私は現在、infobubblesとマーカーを配列に設定しており、パブリック関数を使用してクリックを処理し、インデックスを渡しています。

 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

私は、上記と同じ方法を使って、自分の質問に答えました。私はこれが正しい方法であるということをいくつかの人から受け取りました。

私は単一のinfoBubbleを定義するために、すべてのタブ、コンテンツを削除し、そのバブルのコンテンツの位置を変更/再設定するだけです。

/** 
* 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); 
});