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

サンプルを見る
<script src="http://maps.google.com/maps?file=api&v=2&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&v=2&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&v=2&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>