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

hew GscaleControl()
サンプルを見る
<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[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
        /* コントロール追加 */
        map.addControl(new GScaleControl());
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

地図に大きなコントロールを追加

2008/5/5

new GLargeMapControl()
サンプルを見る
<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[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

地図に地図タイプ切替コントロールを表示

2008/5/5

new GMapTypeControl()
サンプルを見る
<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[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
        /* コントロール追加 */
        map.addControl(new GMapTypeControl());
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

地図にズーム（倍率）コントロールを追加

2008/5/5

new GSmallZoomControl()
サンプルを見る
<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[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
        /* コントロール追加 */
        map.addControl(new GSmallZoomControl());
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

地図に小さなコントロールを追加

2008/5/5

new GSmallMapControl()
サンプルを見る
<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[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
        /* コントロール追加 */
        map.addControl(new GSmallMapControl());
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

地図描画領域のDOMオブジェクト取得

2008/5/5

GMap2.getContainer()

GMap2クラスのgetContainer()メソッドは、地図描画領域の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[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
        /* 地図が表示されるDOMオブジェクトを取得 */
        var obj=map.getContainer();
        var s="";
        for(var i in obj){
            s+=i+"="+obj[i]+"\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="#">
    <textarea cols="64" rows="10" id="res"></textarea>
</form>

コントロールの追加・削除

2008/5/5

GMap2.addControl(control[, position])
GMap2.removeControl(control)

GMap2クラスのaddControl()メソッドは、地図にコントロールを追加します。 第1引数controlには、追加するコントロールを指定します。 オプションの第2引数positionには、コントロールの表示位置を指定します。 省略した場合は、デフォルト位置に表示されます。 戻り値はありません。 コントロールは、1つの地図に複数指定可能です。

GMap2クラスのremoveControl()メソッドは、地図からコントロールを削除します。 第1引数controlには、削除するコントロールを指定します。 戻り値はありません。

地図に複数のコントロール追加

サンプルを見る
<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);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GScaleControl()); /* スケールコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        map.addControl(new GOverviewMapControl()); /* 折りたたみ可能な概観地図 */
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

コントロールの追加と削除を切り替える

サンプルを見る
<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,ctrlGLarge,ctrlGSmall,ctrlGSmallZoom,ctrlGScale,ctrlGMapType,ctrlGOverview;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));

        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);

        /* コントロール追加 */
        ctrlGLarge=new GLargeMapControl(); /* 大きなコントロール */
        ctrlGSmall=new GSmallMapControl(); /* 小さなコントロール */
        ctrlGSmallZoom=new GSmallZoomControl(); /* ズームコントロール */
        ctrlGScale=new GScaleControl(); /* スケールコントロール */
        ctrlGMapType=new GMapTypeControl(); /* 地図タイプ切替コントロール */
        ctrlGOverview=new GOverviewMapControl(); /* 概観地図 */

        map.addControl(ctrlGLarge);
        map.addControl(ctrlGScale);
        map.addControl(ctrlGMapType);
        map.addControl(ctrlGOverview);
    }
}
function swCtrl(ctrl, id){
    var obj=document.getElementById(id);
    if(obj.value.indexOf("削除")>-1){
        /* コントロール削除 */
        map.removeControl(ctrl);
        obj.value=obj.value.replace("削除","追加");
    }else{
        /* コントロール追加 */
        map.addControl(ctrl);
        obj.value=obj.value.replace("追加","削除");
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <input type="button" value="GLargeMapControl（大きなコントロール）削除" onclick="swCtrl(ctrlGLarge,this.id);" id="btnGLarge" /><br>
    <input type="button" value="GSmallMapControl（大きなコントロール）追加" onclick="swCtrl(ctrlGSmall,this.id);" id="btnGSmall" /><br>
    <input type="button" value="GSmallZoomControl（ズームコントロール）追加" onclick="swCtrl(ctrlGSmallZoom,this.id);" id="btnGSmallZoom" /><br>
    <input type="button" value="GScaleControlI（スケールコントロール）削除" onclick="swCtrl(ctrlGScale,this.id);" id="btnGScale" /><br>
    <input type="button" value="GMapTypeControl（地図タイプ切替コントロール）削除" onclick="swCtrl(ctrlGMapType,this.id);" id="btnGMapType" /><br>
    <input type="button" value="GOverviewMapControl（概観地図）削除" onclick="swCtrl(ctrlGOverview,this.id);" id="GOverview" />
</form>

地図に表示可能なコントロールの種類

2008/5/5

コントロールの種類
コンストラクタ説明表示例
GLargeMapControl() 大きなコントロール
GSmallMapControl() 小さなコントロール
GSmallZoomControl() ズーム（倍率）コントロール
GScaleControl() スケール（目盛り）コントロール
GOverviewMapControl() 折りたたみ可能な概観地図
GMapTypeControl() 地図タイプ切替コントロール

地図に折りたたみ可能な概観地図を追加

2008/5/5

new GOverviewMapControl()
サンプルを見る
<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[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
        /* コントロール追加 */
        map.addControl(new GOverviewMapControl());
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

関連コンテンツ

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

投票する 投票結果を見る

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

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

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop