Google Maps APIの使い方 － 情報ウィンドウ｜Google Maps JavaScript API v2｜Ajax｜PHP & JavaScript Room
Search

Google Maps JavaScript API v2Google Maps APIの使い方 － 情報ウィンドウ


Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!

地図の情報ウィンドウオブジェクトを取得

2008/5/5

GMap2.getInfoWindow()

GMap2クラスのgetInfoWindow()メソッドは、地図の情報ウィンドウオブジェクトを返します。

サンプルを見る
<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,latlng;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        latlng=new GLatLng(35.658421,139.699069);
        map.setCenter(latlng, 17);
        /* タブ付き情報ウィンドウ表示（内容はDOMノード） */
        var tObj1=document.createTextNode("東京都渋谷区にある「マークシティー」です。渋谷駅に直結しています。");
        var tObj2=document.createTextNode("「デカダンス ドュ ショコラ」という美味しいチョコレートショップがあります。");
        var tObj3=document.createTextNode("4階の「RESTAURANTS AVENU」は色々なお店があるのでランチに最適★");
        var tabs = [
            new GInfoWindowTab("場所", tObj1),
            new GInfoWindowTab("スポット1", tObj2),
            new GInfoWindowTab("スポット2", tObj3)
        ];
        map.openInfoWindowTabs(latlng, tabs);
        document.getElementById("res").value="";
    }
}
function fGetInfoWindow(){
    /* ★情報ウィンドウの情報を取得 */
    var infoObj=map.getInfoWindow();
    var s="";
    s+="情報ウィンドウが固定されている地理的位置："+infoObj.getPoint()+"\n";
    s+="情報ウィンドウは非表示か？："+infoObj.isHidden()+"\n";
    s+="情報ウィンドウが固定されている地理的位置を基準とした情報ウィンドウ先端までのオフセット："+infoObj.getPixelOffset()+"\n";
    s+="現在選択されているタブ番号："+infoObj.getSelectedTab()+"\n";
    s+="情報ウィンドウのタブ情報配列：\n";
    var objT=infoObj.getTabs();
    for(var i in objT){
        s+="name="+objT[i]["name"]+"\n";
        if(document.all){
            s+="innerText="+objT[i]["contentElem"]["innerText"]+"\n";
        }else{
            s+="textContent="+objT[i]["contentElem"]["textContent"]+"\n";
        }
   }
    document.getElementById("res").value=s;
}

window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <p>
        <input type="button" value="タブ付き情報ウィンドウの情報を取得" onclick="fGetInfoWindow()" />
    </p>
    <textarea cols="64" rows="10" id="res" style="width:421px;"></textarea>
</form>

指定した地点に、指定した地点周囲の詳細地図を表示した情報ウィンドウを表示

2008/5/5

GMap2.showMapBlowup(point[, opts])

GMap2クラスのshowMapBlowup()メソッドは、指定した地点に、指定した地点周囲の詳細地図を表示した情報ウィンドウを表示します。 戻り値はありません。

サンプルを見る
<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,obj;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
        /* マーカー追加 */
        map.addOverlay(new GMarker(new GLatLng(35.658421,139.699069)));
    }
}
function fShowMapBlowup(){
    /* ★詳細地図表示 */
    map.showMapBlowup(new GLatLng(35.658421,139.699069));
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:350px"></div>
<br>
<form action="#">
    <input type="button" value="マークシティー周囲の詳細地図を表示" onclick="fShowMapBlowup()" />
</form>

現在表示されている情報ウィンドウの位置を変更しないで更新

2008/5/5

GMap2.updateInfoWindow(tabs[, onupdate])

GMap2クラスのupdateInfoWindow()メソッドは、タブ付き情報ウィンドウのタブを更新します。
戻り値はありません。

サンプルを見る
<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;

var tabs1 = [
    new GInfoWindowTab("場所", "<p>東京渋谷区にある<a href='http://www.s-markcity.co.jp/'>「マークシティー」</a>です。</p><p><img src='/content/img/ajax/star.png' align='left' alt='' />渋谷駅直結なので雨の日でも便利です。<br>ショッピングやランチどころ満載です。</p>"),
    new GInfoWindowTab("スポット", "<p>EAST MALL3階には<strong>「デカダンス ドュ ショコラ」</strong><br>という美味しいチョコレートショップがあります。<br>疲れた日には自分へのご褒美に★</p>")
]
var tabs2 = [
    new GInfoWindowTab("夜スポット1", "<p>4階の出口を出たところに、<strong>「ル・コネスール」</strong>という<br>シガー・バーがあります。アダルトな大人の空間って感じすね。<br>シガー吸えなくても雰囲気を楽しみたい人は是非★</p>"),
    new GInfoWindowTab("夜スポット2", "<p>25階には<strong>「A bientot」</strong>というフレンチレストラン<br>があります。夜景がきれいなので、デートに最適★<br>コースも意外とリーズナブルでした♪</p>")
]

function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
        /* タブ付き情報ウィンドウ表示（内容はHTML文） */
        map.openInfoWindowTabsHtml(new GLatLng(35.658421,139.699069), tabs1);
    }
}
function fUpdateInfoWindow(tab){
    /* ★タブ情報を更新 */
    map.updateInfoWindow(tab);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <input type="button" value="タブ付き情報ウィンドウ表示（その1）" onclick="fUpdateInfoWindow(tabs1);" />
    <input type="button" value="タブ付き情報ウィンドウ表示（その2）" onclick="fUpdateInfoWindow(tabs2);" />
</form>

地図の情報ウィンドウオブジェクトを取得

2008/5/5

GMap2.getInfoWindow()

GMap2クラスのgetInfoWindow()メソッドは、地図の情報ウィンドウオブジェクトを返します。

サンプルを見る
<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,latlng;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        latlng=new GLatLng(35.658421,139.699069);
        map.setCenter(latlng, 17);
        /* タブ付き情報ウィンドウ表示（内容はDOMノード） */
        var tObj1=document.createTextNode("東京都渋谷区にある「マークシティー」です。渋谷駅に直結しています。");
        var tObj2=document.createTextNode("「デカダンス ドュ ショコラ」という美味しいチョコレートショップがあります。");
        var tObj3=document.createTextNode("4階の「RESTAURANTS AVENU」は色々なお店があるのでランチに最適★");
        var tabs = [
            new GInfoWindowTab("場所", tObj1),
            new GInfoWindowTab("スポット1", tObj2),
            new GInfoWindowTab("スポット2", tObj3)
        ];
        map.openInfoWindowTabs(latlng, tabs);
        document.getElementById("res").value="";
    }
}
function fGetInfoWindow(){
    /* ★情報ウィンドウの情報を取得 */
    var infoObj=map.getInfoWindow();
    var s="";
    s+="情報ウィンドウが固定されている地理的位置："+infoObj.getPoint()+"\n";
    s+="情報ウィンドウは非表示か？："+infoObj.isHidden()+"\n";
    s+="情報ウィンドウが固定されている地理的位置を基準とした情報ウィンドウ先端までのオフセット："+infoObj.getPixelOffset()+"\n";
    s+="現在選択されているタブ番号："+infoObj.getSelectedTab()+"\n";
    s+="情報ウィンドウのタブ情報配列：\n";
    var objT=infoObj.getTabs();
    for(var i in objT){
        s+="name="+objT[i]["name"]+"\n";
        if(document.all){
            s+="innerText="+objT[i]["contentElem"]["innerText"]+"\n";
        }else{
            s+="textContent="+objT[i]["contentElem"]["textContent"]+"\n";
        }
   }
    document.getElementById("res").value=s;
}

window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <p>
        <input type="button" value="タブ付き情報ウィンドウの情報を取得" onclick="fGetInfoWindow()" />
    </p>
    <textarea cols="64" rows="10" id="res" style="width:421px;"></textarea>
</form>

情報ウィンドウを表示

2008/5/5

GMap2.openInfoWindow(point, node[, options])

GMap2クラスのopenInfoWindow()メソッドは、指定した位置に情報ウィンドウを表示します。
戻り値はありません。
情報ウィンドウに表示する内容は、DOMノードを指定します。

サンプルを見る
<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;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
    }
}
function fOpenInfoWindow(id){
    /* ★情報ウィンドウ表示（内容はDOMノード） */
    var obj=document.createTextNode("東京渋谷区にある「マークシティー」です。");
    map.openInfoWindow(new GLatLng(35.658421,139.699069), obj);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <input type="button" value="情報ウィンドウ表示" onclick="fOpenInfoWindow('info');" />
</form>

タブ付き情報ウィンドウ表示（コンテンツはHTMLテキスト）

2008/5/5

GMap2.openInfoWindowTabsHtml(point, tabs[, options])

GMap2クラスのopenInfoWindowTabsHtml()メソッドは、タブ付き情報ウィンドウを表示します。
戻り値はありません。
タブ内に表示する内容は、タブの数だけHTML文を指定します。

サンプルを見る
<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,obj;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
    }
}
function fOpenInfoWindowTabsHtml(){
     var tabs = [
        new GInfoWindowTab("場所", "<p>東京渋谷区にある<a href='http://www.s-markcity.co.jp/'>「マークシティー」</a>です。</p><p><img src='/content/img/ajax/star.png' align='left' alt='' />渋谷駅直結なので雨の日でも便利です。<br>ショッピングやランチどころ満載です。</p>"),
        new GInfoWindowTab("スポット1", "<p>EAST MALL3階には<strong>「デカダンス ドュ ショコラ」</strong>という美味しい<br>チョコレートショップがあります。<br>疲れた日には自分へのご褒美に★</p>"),
        new GInfoWindowTab("スポット2", "<p>4階の<strong>「RESTAURANTS AVENU」</strong>は<br>和・洋・中・カフェなんでも揃っています。<br>ランチや友達とのディナーにぴったり。<br>いつも長蛇の列のおすし屋さんは未開拓ｗ</p>")
    ]
    /* ★タブ付き情報ウィンドウ表示（内容はHTML文） */
    map.openInfoWindowTabsHtml(new GLatLng(35.658421,139.699069), tabs);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <input type="button" value="タブ付き情報ウィンドウ表示" onclick="fOpenInfoWindowTabsHtml();" />
</form>

情報ウィンドウを表示（HTML文記述）

2008/5/5

GMap2.openInfoWindowHtml(position, html[, options])

GMap2クラスのopenInfoWindowHtml()メソッドは、指定した位置に情報ウィンドウを表示します。
戻り値はありません。
情報ウィンドウに表示する内容には、HTML文を指定します。

サンプルを見る
<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,obj;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
    }
}
function fOpenInfoWindowHtml(){
    /* ★情報ウィンドウ表示（内容はHTML文） */
    map.openInfoWindowHtml(new GLatLng(35.658421,139.699069), "<p>東京渋谷区にある<a href='http://www.s-markcity.co.jp/'>「マークシティー」</a>です。</p><p><img src='/content/img/ajax/star.png' align='left' alt='' />渋谷駅直結なので雨の日でも便利です。<br>ショッピングやランチどころ満載です。</p>");
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <input type="button" value="情報ウィンドウ表示" onclick="fOpenInfoWindowHtml();" />
</form>

情報ウィンドウを閉じる

2008/5/5

GMap2.closeInfoWindow()

GMap2クラスのcloseInfoWindow()メソッドは、現在表示されている情報ウィンドウと閉じます。
戻り値はありません。

サンプルを見る
<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,obj;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
    }
}
function fOpenInfoWindowHtml(){
    /* ★情報ウィンドウ表示（内容はHTML文） */
    map.openInfoWindowHtml(new GLatLng(35.658421,139.699069), "<p>東京渋谷区にある<a href='http://www.s-markcity.co.jp/'>「マークシティー」</a>です。</p><p><img src='/content/img/ajax/star.png' align='left' alt='' />渋谷駅直結なので雨の日でも便利です。<br>ショッピングやランチどころ満載です。</p>");
}

window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <input type="button" value="情報ウィンドウ表示" onclick="fOpenInfoWindowHtml();" />
    <input type="button" value="情報ウィンドウを閉じる" onclick="map.closeInfoWindow();" />
</form>

タブ付き情報ウィンドウを表示（コンテンツはDOMノード）

2008/5/5

GMap2.openInfoWindowTabs(point, tabs[, options])

GMap2クラスのopenInfoWindowTabs()メソッドは、タブ付きの情報ウィンドウを表示します。
戻り値はありません。
タブ内に表示する内容は、タブの数だけDOMノードを指定します。

サンプルを見る
<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,obj;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
    }
}
function fOpenInfoWindowTabs(){
    var tObj1=document.createTextNode("東京都渋谷区にある「マークシティー」です。渋谷駅に直結しています。");
    var tObj2=document.createTextNode("「デカダンス ドュ ショコラ」という美味しいチョコレートショップがあります。");
    var tObj3=document.createTextNode("4階の「RESTAURANTS AVENU」は色々なお店があるのでランチに最適★");
    var tabs = [
        new GInfoWindowTab("場所", tObj1),
        new GInfoWindowTab("スポット1", tObj2),
        new GInfoWindowTab("スポット2", tObj3)
    ];
    /* ★タブ付き情報ウィンドウ表示（内容はDOMノード） */
    map.openInfoWindowTabs(new GLatLng(35.658421,139.699069), tabs);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <input type="button" value="タブ付き情報ウィンドウ表示" onclick="fOpenInfoWindowTabs();" />
</form>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop