2-4：タブ付きの吹き出しを表示してみる

「２－３：マーカーを押すと、吹き出しを表示してみる」では、マーカーをクリックしたら吹き出しが表示されました。

今回は、そのプログラムを元にタブ付きの吹き出しが表示されるようにしてみましょう。

タブ付きの吹き出しを使うと、１つの吹き出しの中に複数の情報を表示することができます。

例えば、

　　　タブの１ページ目に『スポットの位置』、
　　　２ページ目に『その場所の住所や電話番号』

という使い方ができます。

タブ付きの吹き出しが表示される
(表示する)

タブ付きの吹き出しサンプルプログラム

タブ付きの吹き出しを表示するサンプルプログラム

<!DOCTYPE html PUBLIC "-//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>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {

//地図を作成
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.677335,139.744613), 16);

//マーカーを作成(国会議事堂)
var marker = new GMarker(new GLatLng(35.676148,139.74479));
//マーカーをクリックしたら、タブ付きの吹き出しを表示する
GEvent.addListener(marker, "click", function() {
　　var infoTabs = [
　　　new GInfoWindowTab("Tab #1", "<p><b>１ページ目</b>です</p>"),
　　　new GInfoWindowTab("Tab #2", "<p><b>２ページ目</b>です</p>")
　　];

marker.openInfoWindowTabsHtml(infoTabs);
});

//マーカーを地図上に配置
map.addOverlay(marker);
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>

サンプルプログラムの解説

タブ付きの吹き出しを表示するコードは、上のサンプルプログラムの赤枠で囲んだ部分です。

GInfoWindowTab(label,content);

　　　openInfoWindowTabs()メソッドに渡すことのできる、吹き出しのデータ構造を生成する
　　　　label： 　タブのタイトル


　　content： タブの内容（HTML言語で記述可)

openInfoWindowTabsHtml(point,content, opts(省略可));

　　　タブ付きの吹き出しを表示する　　point： 吹き出しを表示する位置を指定する。
　　　　　　マーカーなどが既にpointを持つ場合には省略する。


　　tabs：　ページごとに表示するタイトルと内容を指定する配列を渡す。


　　opts：　オプションが指定できる。
　　　　　　オプションは以下のようなものです。
　　　　　　　pixelOffset: GSize() 
　　　　　　　selectedTab: integer
　　　　　　　maxWidth: integer
　　　　　　　onOpenFn: function
　　　　　　　onCloseFn: function
　　　　　　　mapType: GMapType()
　　　　　　　zoomLevel: integer

投票数:0 平均点:0.00

この記事の1行目に飛ぶ