Rich Gibson & Schuyler Erle著 武舎広幸+福地太郎+武舎るみ訳 GOOGLE MAPS HACKSTM

追加情報４ タブ付きの情報ウィンドウ（2006年8月18日追加）

APIバージョン2から情報ウィンドウに「タブ」を付けられるようになりました。 書籍には説明を入れることができなかったので、ここでご紹介します。

次のコードのように、 GInfoWindowTabというクラスのインスタンスを配列に複数記憶しておいて、 これを引数としてGMpa2やGMarkerのメソッドopenInfoWindowTabs()やopenInfoWindowTabsHtml()を呼び出せばよいのです。

  var marker = new GMarker(map.getCenter());
  var infoTabs = [
    new GInfoWindowTab("日記", "<h4>2005年２月14日</h4> ..."),
    new GInfoWindowTab("写真", "<center><object classid="clsid:d27cdb6e-ae6d-...")
  ];
  marker.openInfoWindowTabsHtml(infoTabs);

下の例は、GMarkerのメソッドopenInfoWindowTabsHtml()を呼び出しているものです。
マーカーをクリックしてみてください。タブ付きの情報ウィンドウが表示されます。

なお、Mac版Safariのバージョン3.02（ベータ版）ではこの例が動作しないようです。バージョン2.0.4では動作します（2007年8月１日追加）

上の地図のコードの主要部分は次のとおりです。

  var center = new GLatLng(35.362771021148276, 138.73101711273193); //富士山
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(center, 12, G_NORMAL_MAP);
  map.addControl(new GMapTypeControl()); 
  map.addControl(new GLargeMapControl()); 

  flashHtml = '<center><object classid="clsid:d27cdb6e-ae6d-'  // [Hack #53]参照
		+ '11cf-96b8-444553540000" '
		+ 'codebase="http://fpdownload.macromedia.com/pub/'
		+ 'shockwave/cabs/flash/swflash.cab#version=7,0,0,0" '
		+ 'width="320" height="240" id="FlashBit" align="middle">'
		+ '<param name="allowScriptAccess" value="sameDomain" />'
		+ '<param name="movie" value="flash-sample2.swf" />'
		+ '<param name="quality" value="high" />'
		+ '<param name="bgcolor" value="#ffffff" />'
		+ '<param name="wmode" value="transparent" />'
		+ '<embed src="flash-sample2.swf" quality="high" '
		+ 'bgcolor="#ffffff" width="320" height="240" '
		+ 'name="FlashBit" align="middle" '
		+ 'allowScriptAccess="sameDomain" '
		+ 'type="application/x-shockwave-flash" '
		+ 'wmode="transparent" '
		+ 'pluginspage="http://www.macromedia.com/go'
		+ '/getflashplayer" />'
		+ '</object></center>'; 
 
  var infoTabs = [
    new GInfoWindowTab("日記", 
		  "<h4>2005年２月14日</h4>" + 
		  "<p>家族で、富士五湖周辺に遊びに行く。<br>" +
		  "ふもとのスケートリンクからも、 山中湖<br>からもきれいな富士山が見えていた。</p>"),
    new GInfoWindowTab("写真", flashHtml)
  ];

  var marker = new GMarker(map.getCenter());
  GEvent.addListener(marker, "click",
	     function() { marker.openInfoWindowTabsHtml(infoTabs); });
  map.addOverlay(marker);