PHP & JavaScript Room :: 設置サンプル

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map,marker;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* ピクセル座標 */
        var latlng=new GLatLng(36.204824,138.252924);
        /* 中心地点 */
        map.setCenter(latlng, 2);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* マーカー追加 */
        marker=new GMarker(latlng);
        map.addOverlay(marker);

           document.getElementById("res").value="";
        /* 情報ウィンドウが開かれた時 */
        GEvent.addListener(marker, "infowindowopen", function(){
            document.getElementById("res").value+="マーカーのアイコン上に情報ウィンドウが開かれました\n";
        });
        /* 情報ウィンドウが閉じられようとしている時 */
        GEvent.addListener(marker, "infowindowbeforeclose", function(){
            document.getElementById("res").value+="マーカーのアイコン上から情報ウィンドウが閉じられようとしています\n";
        });
        /* 情報ウィンドウが閉じられた時 */
        GEvent.addListener(marker, "infowindowclose", function(){
            document.getElementById("res").value+="マーカーのアイコン上から情報ウィンドウが閉じらました\n";
        });
    }
}
function fOpenInfoWindow(){
    var opts={
        maxWidth:200
    };
    var obj=document.createTextNode("ここが「日本」です。");
    marker.openInfoWindow(obj,opts);
}
function fOpenInfoWindowHtml(){
    var opts={
        maxWidth:200
    };
    marker.openInfoWindow("ここが<strong style='color:red; padding:0px 5px; border:1px solid #ccc;'>●</strong>（日本）です。",opts);
}
function fOpenInfoWindowTabs(){
    var tObj1=document.createTextNode("ここが「日本」です。国土面積は「377,835km2」です。");
    var tObj2=document.createTextNode("日本の首都は「東京」です。東京土産は「銘菓ひよ子」が有名。");
    var tObj3=document.createTextNode("日本の人口は「約1億2780万人」です。その内訳は、男性≒6230万人／女性≒6546万人。女性の人口の方が多いです。");
    var tabs = [
        new GInfoWindowTab("場所", tObj1),
        new GInfoWindowTab("首都", tObj2),
        new GInfoWindowTab("人口", tObj3)
    ];
    var opts={
        maxWidth:300,
        selectedTab:1
    };
   /* タブ付き情報ウィンドウ表示（内容はDOMノード） */
    marker.openInfoWindowTabs(tabs,opts);
}
function fOpenInfoWindowTabsHtml(){
    var opts={
        maxWidth:300,
        selectedTab:1
    };
    var tabs = [
        new GInfoWindowTab("場所", "ここが<strong style='color:red; padding:0px 5px; border:1px solid #ccc;'>●</strong>（日本）です"),
        new GInfoWindowTab("首都", "日本の首都は<strong>「東京」</strong>です。<br>東京土産と言えば...<img src='/content/img/ajax/googlemap/chick.gif' alt='ひよこ' style='vertical-align:middle;' /><a href='http://www.hiyoko.co.jp/shohin/hiyoko.html'>銘菓ひよ子</a>が有名です&hearts;"),
        new GInfoWindowTab("人口", "日本の人口は約1億2780万人です。<br>その内訳は、ｓ男性≒6230万人／女性≒6546万人。女性の人口の多いです。")
    ];
    /* タブ付き情報ウィンドウ表示（内容はDOMノード） */
    marker.openInfoWindowTabsHtml(tabs,opts);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
<p>
     <input type="button" value="情報ウィンドウ表示（openInfoWindow）" onclick="fOpenInfoWindow();" /><br>
     <input type="button" value="情報ウィンドウ表示（openInfoWindowHtml）" onclick="fOpenInfoWindowHtml();" />
</p>
<p>
     <input type="button" value="タブ付き情報ウィンドウ表示（openInfoWindowTabs）" onclick="fOpenInfoWindowTabs();" /><br>
     <input type="button" value="タブ付き情報ウィンドウ表示（openInfoWindowTabsHtml）" onclick="fOpenInfoWindowTabsHtml();" />
</p>
<p>
    <input type="button" value="情報ウィンドウを閉じる" onclick="marker.closeInfoWindow()" />
</p>
<p>
    <textarea id="res" cols="64" rows="4" style="width:421px;"></textarea>
</p>
</form>