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_1=new GLatLng(35.658517,139.701333); /* 渋谷駅 */
        var latlng_2=new GLatLng(35.658421,139.699069); /* マークシティー */
        var latlng_3=new GLatLng(35.661655,139.700496); /* マルイシティ */
        var latlng_4=new GLatLng(35.659528,139.698715); /* 109 */

        /* 中心地点 */
        map.setCenter(latlng_1, 15);

        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */

        /* マーカー追加 */
        marker_1=new GMarker(latlng_1);
        map.addOverlay(marker_1);
        fBindInfoWindow(marker_1);

        marker_3=new GMarker(latlng_2);
        map.addOverlay(marker_3);
        fBindInfoWindowHtml(marker_3);

        marker_3=new GMarker(latlng_3);
        map.addOverlay(marker_3);
        fBindInfoWindowTabs(marker_3);

        marker_4=new GMarker(latlng_4);
        map.addOverlay(marker_4);
        fBindInfoWindowTabsHtml(marker_4);

    }
}
function fBindInfoWindow(_marker){
    var opts={ maxWidth:200 };
    var obj=document.createTextNode("ここが「渋谷駅」です。昼夜とわず、いつも人であふれかえっていますｗ");
    _marker.bindInfoWindow(obj,opts);
}
function fBindInfoWindowHtml(_marker){
    var opts={ maxWidth:200 };
    _marker.bindInfoWindowHtml("ここが<p>渋谷駅に直結している<a href='http://www.s-markcity.co.jp/'>「マークシティー」</a>です。クリニック、レストラン、カフェ、ショップなどいろいろ揃っています。</p>",opts);
}
function fBindInfoWindowTabs(_marker){
    var tObj1=document.createTextNode("ここが「マルイシティ」です。渋谷駅から徒歩10分くらい。通りをはさんだ向かいには、「マルイジャム」もあります。");
    var tObj2=document.createTextNode("営業時間は、平日（11:30～21:00）／日・祝（11:30～20:30）です。定休日は第3水曜日ですが、変わることもあるので行く前に公式サイトで確認したほうが安全です。");
    var tabs = [
        new GInfoWindowTab("場所", tObj1),
        new GInfoWindowTab("営業時間", tObj2)
    ];
    var opts={
        maxWidth:300,
        selectedTab:1
    };
   /* ★タブ付き情報ウィンドウ表示（内容はDOMノード） */
    _marker.bindInfoWindowTabs(tabs,opts);
}
function fBindInfoWindowTabsHtml(_marker){
    var opts={
        maxWidth:300,
        selectedTab:0
    };
    var tabs = [
        new GInfoWindowTab("場所", "<img src='/content/img/ajax/googlemap/109.jpg' alt='109' align='right' />ここが<a href='http://www.shibuya109.jp/'>「SHIBUYA 109」</a>です。ギャル服だらけのイメージがありますが、最近はお姉さま系のショップも増えてきました。あと地下2階にはソニプラが&hearts;"),
        new GInfoWindowTab("営業時間", "営業時間は、10:00～21:00。定休日は、<span style='color:red;'>元旦のみ</span>です。")
    ];
    /* ★タブ付き情報ウィンドウ表示（内容はDOMノード） */
    _marker.bindInfoWindowTabsHtml(tabs,opts);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>