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

「2-3:マーカーを押すと、吹き出しを表示してみる」では、マーカーをクリックしたら吹き出しが表示されました。

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

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

例えば、

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

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


 

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

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


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

<!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>1ページ目</b>です</p>"),
   new GInfoWindowTab("Tab #2", "<p><b>2ページ目</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





サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら