タブ位置を記憶するタブ付き情報ウィンドウ
Google Maps APIネタです。
openInfoWindowTab()メソッドなんかを使用して開くことができるタブ付きの情報ウィンドウなんですが、開いて閉じてまた開いたときに前回開いた時のタブをまた開かせるところでちょっとはまりました。とりあえずソースコード。(実際の動作)
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>タブつき情報ウィンドウの開いているタブを記憶する</title> <script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY&sensor=false" type="text/javascript"></script> <script type="text/javascript"> var tabIndex = 0; //タブ位置記憶用変数 function initialize() { if (GBrowserIsCompatible()) { //地図初期設定 var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(36.0000, 136.0000), 13); //マーカー追加 map.addOverlay(createMarker(36.0000,135.9900)); map.addOverlay(createMarker(36.0000,136.0000)); map.addOverlay(createMarker(36.0000,136.0100)); //情報ウィンドウが開くときにタブ位置を設定する GEvent.addListener(map, "infowindowopen", function(){ var iw = map.getInfoWindow(); iw.selectTab(tabIndex); }); //情報ウィンドウが閉じるときにタブ位置を記憶する GEvent.addListener(map, "infowindowbeforeclose", function(){ var iw = map.getInfoWindow(); tabIndex = iw.getSelectedTab(); }); } } //クリックすると情報ウィンドウを開くマーカーを作成する function createMarker(lat, lng){ var m = new GMarker(new GLatLng(lat, lng)); GEvent.addListener(m, "click", function(){ m.openInfoWindowTabsHtml([new GInfoWindowTab('0', 'tab0'), new GInfoWindowTab('1', 'tab1'), new GInfoWindowTab('2', 'tab2') ],{}); }); return m; } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 500px"></div> </body> </html>
いや、infowindowbeforecloseイベントでタブ位置を取得して、infowindowopenイベントで設定するというなんてことはないコードです。で、どこではまったかというと、openInfoWindow系の関数って引数にオプションでGInfoWindowOptionsオブジェクトを渡すことができてここに開くタブを指定することができるんですよ。でもこれを使うとどうもうまく動かなくて昨日の夜はまりました。今日APIのドキュメント改めて読んで気づいたという。