Googleマップの吹き出しをタブ形式で表示する

「Googleマップの吹き出しにBLOGRANGERパーツを表示する」の中で東京近郊レジャースポット案内というAjaxアプリを作りましたが、さらに吹き出し(情報ウィンドウともいう)をタブ形式にし、レジャースポットの感想に加えてトピックを表示するように改良してみました。↓こんな感じです。

 
View Example

レジャースポットの定義を拡張し、1つのレジャースポットに対して複数のBLOGRANGERパーツのブックマークURLを指定できるようにしました。次のソースコードでは「六本木ヒルズ」「表参道ヒルズ」に2つ、「東京ディズニーランド」に1つのブックマークURLを指定しています。

var spots = [
  // {lat: 緯度, lng: 経度, url: ブックマークURL}
  {lat: 35.660347, lng: 139.729121, url: [
    'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1510',
    'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1789'
  ]}, // 六本木ヒルズ
  {lat: 35.665246, lng: 139.712319, url: [
    'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1556',
    'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1790'
  ]}, // 表参道ヒルズ
  {lat: 35.634017, lng: 139.878595, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1557'}, // 東京ディズニーランド
    ・・・途中、省略・・・
];

吹き出しをタブ形式で表示するように改良しました。はじめにレジャースポットに対するブックマークURLが1つ（つまり配列でなく文字列)のとき、あとの処理に備えて配列に変換しておきます。次にその配列を繰り返しながら「GInfoWindowTab」を使ってタブを作っていきます。そして最後に「GMarker.openInfoWindowTabsHtml」を使ってタブ形式の吹き出しを表示します。

function createMarker(spot) {
  var marker = new GMarker(new GLatLng(spot.lat, spot.lng));
  GEvent.addListener(marker, 'click', function() {
    if (spot.url.constructor != Array)
      spot.url = [spot.url];
    var tabs = [];
    for (var i=0; i<spot.url.length; i++) {
      tabs.push(new GInfoWindowTab(i+1, '<iframe '
        + 'src="'+spot.url[i]+'" '
        + 'width="320" height="200" frameborder="0" '
        + 'marginwidth="2" marginheight="2" '
        + '></iframe>'
      ));
    }
    marker.openInfoWindowTabsHtml(tabs);
  });
  return marker;
}

ただ、「GInfoWindowTab」のタブが1つ(つまり配列のサイズが1)のとき、「GMarker.openInfoWindowTabsHtml」を使ってもタブ形式で表示されませんでした。このときは「GMarker.openInfoWindowHtml」を使ったときと同じ通常の吹き出しが表示されます。タブが1つかタブが2つ以上かといった条件判断は不要ということですね。