AJAXのお勉強

Googleマップ タブウィンドウ表示＠AJAX

タブウィンドウを表示します。

配列を作成し、配列にGInfoWindowTabを生成して格納します。
GInfoWindowTab(タブ名,内容)となります。

生成した配列を、openInfoWindowTabsHtmlにて表示します。
openInfoWindowTabsHtml(位置,タブ配列)

以下では、「駅名」「住所」のタブを作成します。
それぞれのタブで駅名と住所を表示します。

配列に格納し、openInfoWindowTabsHtmlにて、
タブウィンドウを表示しています。


<!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マップ API タブウィンドウ表示</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=****" type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

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

        var point = new GLatLng(35.681099,139.767084);

        var map = new GMap2(document.getElementById("map"));
        map.setCenter(point, 13);
        
        var marker = new GMarker(point);
        map.addOverlay(marker);

        //縮尺、移動コントロール追加
        map.addControl(new GSmallMapControl());
        
        //タブを生成、配列に格納
        var tabArray = new Array();
        tabArray[0] = new GInfoWindowTab("駅名", "東京駅");
        tabArray[1] = new GInfoWindowTab("住所", "東京都千代田区丸の内一丁目9番1号");

        //タブウィンドウ表示
        map.openInfoWindowTabsHtml(point, tabArray);
    }
}

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

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.