Google Maps JavaScript API v2Google Maps APIの使い方 - 地図タイプ
Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!
利用可能な地図タイプを配列で取得
2008/5/5
GMap2.getMapTypes()
GMap2クラスのgetMapTypes()メソッドは、地図に登録されている利用可能な地図タイプを配列で返します。

サンプルを見る
<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.665246,139.712319), 14); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* コントロール大 */ /* ★利用可能な地図タイプを取得 */ var obj=map.getMapTypes(); var s=""; for(var i in obj){ s+=obj[i].getName(true)+"("+obj[i].getName(false)+")\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="#"> 【利用可能な地図タイプ】<br> <textarea cols="64" rows="2" id="res" style="width:421px;"></textarea> </form>
地図タイプを設定
2008/5/5
GMap2.setMapType(type)
GMap2クラスのsetMapType()メソッドは、新しい地図タイプを設定します。 第1引数typeには、設定するする地図タイプを指定します。 戻り値はありません。

サンプルを見る
<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(36.204824,138.252924), 4); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* 大きなコントロール */ } } function fSetMapType(type){ /* 地図タイプ設定 */ map.setMapType(type); } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px;"></div><br> <form action="#"> <input type="button" value="地図を設定" onclick="fSetMapType(G_MAP_TYPE);" /> <input type="button" value="航空写真を設定" onclick="fSetMapType(G_SATELLITE_TYPE);" /> <input type="button" value="地図+写真を設定" onclick="fSetMapType(G_HYBRID_TYPE);" /><br> <input type="button" value="これらの3タイプをすべて設定" onclick="fSetMapType(G_DEFAULT_MAP_TYPES);" /> </form>
現在の地図タイプを取得
2008/5/5
GMap2.getCurrentMapType()
GMap2クラスのgetCurrentMapType()メソッドは、現在選択されている地図タイプを返します。

サンプルを見る
<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.665246,139.712319), 14, G_HYBRID_TYPE); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* 大きなコントロール */ /* ★現在の地図タイプを取得 */ var cur=map.getCurrentMapType(); document.getElementById("res").value=cur.getName(true)+"("+cur.getName(false)+")"; } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"></div><br> 現在の地図タイプ:<input type="text" size="20" id="res" />
地図と航空写真を2画面連動表示
2008/5/5

サンプルを見る
<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 latlng=new GLatLng(35.665246,139.712319); /* クロスアイコン */ var icon=new GIcon(); icon.image="/content/img/ajax/googlemap/cross.png"; icon.iconSize=new GSize(126, 126); icon.iconAnchor=new GPoint(63, 63); /* 他の地図に連動して動かされているかどうか */ GMap2.prototype.mymap = { movedByOther : false }; /* 地図1 ***********************************/ var map1=new GMap2(document.getElementById("map1")); /* 地図インスタンス生成 */ map1.setCenter(latlng, 14); /* 中心地点 */ map1.addControl(new GLargeMapControl()); /* コントロール大 */ map1.addControl(new GMapTypeControl()); /* 地図タイプコントロール */ var marker1=new GMarker(map1.getCenter(), icon); /* マーカー追加 */ map1.addOverlay(marker1); /* イベント追加(地図を動かした時) */ GEvent.addListener(map1, "zoomend", function(){ map2.setCenter(map1.getCenter(), map1.getZoom()); /* 中心地点 */ }); /* 地図2 ***********************************/ var map2=new GMap2(document.getElementById("map2")); /* 地図インスタンス生成 */ map2.setCenter(latlng, 14); /* 中心地点 */ map2.setMapType(G_SATELLITE_TYPE); /* 地図タイプ設定(航空写真) */ map2.addControl(new GLargeMapControl()); /* コントロール大 */ map2.addControl(new GMapTypeControl()); /* 地図タイプコントロール */ var marker2=new GMarker(map2.getCenter(), icon); /* マーカー追加 */ map2.addOverlay(marker2); /* イベント追加(地図を動かした時) */ GEvent.addListener(map2, "zoomend", function(){ map1.setCenter(map2.getCenter(), map2.getZoom()); /* 中心地点 */ }); GEvent.addListener(map1, "move", function(){ if(map2.mymap.movedByOther==true) return; map2.mymap.movedByOther=true; map1.clearOverlays(); map2.clearOverlays(); marker1=new GMarker(map1.getCenter(), icon); marker2=new GMarker(map1.getCenter(), icon); map1.addOverlay(marker1); map2.addOverlay(marker2); map2.setCenter(map1.getCenter(), map1.getZoom()); /* 中心地点 */ map2.mymap.movedByOther=false; }); GEvent.addListener(map2, "move", function(){ if(map1.mymap.movedByOther==true) return; map1.mymap.movedByOther=true; map1.clearOverlays(); map2.clearOverlays(); marker1=new GMarker(map2.getCenter(), icon); marker2=new GMarker(map2.getCenter(), icon); map1.addOverlay(marker1); map2.addOverlay(marker2); map1.setCenter(map2.getCenter(), map2.getZoom()); /* 中心地点 */ map1.mymap.movedByOther=false; }); } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map1" style="width:425px;height:300px"><!-- 地図描画領域 (地図) --></div> <div id="map2" style="width:425px;height:300px"><!-- 地図描画領域(航空写真) --></div>
地図タイプの種類
2008/5/5
地図には、下記の3タイプがあります。
デフォルトの地図タイプは、G_MAP_TYPE(通常ビュー)です。
地図タイプを設定するには、GMap2クラスのsetMapType()メソッドを使用します。
表示例 | 値 | 説明 |
---|---|---|
![]() |
G_MAP_TYPE | 地図タイプ 通常ビュー(デフォルト) |
![]() |
G_SATELLITE_MAP | 航空写真タイプ Google Earthの航空写真 |
![]() |
G_HYBRID_MAP | 地図+写真タイプ 通常ビューとGoogle Earthの航空写真を合成表示 |
地図の広域図と詳細図を2画面連動表示
2008/5/5

サンプルを見る
<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 latlng=new GLatLng(35.665246,139.712319); /* クロスアイコン */ var icon=new GIcon(); icon.image="/content/img/ajax/googlemap/cross.png"; icon.iconSize=new GSize(126, 126); icon.iconAnchor=new GPoint(63, 63); /* 他の地図に連動して動かされているかどうか */ GMap2.prototype.mymap = { movedByOther : false }; /* 地図1 ***********************************/ var map1=new GMap2(document.getElementById("map1")); /* 地図インスタンス生成 */ map1.setCenter(latlng, 10); /* 中心地点 */ var marker1=new GMarker(map1.getCenter(), icon); /* マーカー追加 */ map1.addOverlay(marker1); /* 地図2 ***********************************/ var map2=new GMap2(document.getElementById("map2")); /* 地図インスタンス生成 */ map2.setCenter(latlng, 14); /* 中心地点 */ var marker2=new GMarker(map2.getCenter(), icon); /* マーカー追加 */ map2.addOverlay(marker2); map2.addControl(new GLargeMapControl()); /* コントロール大 */ map2.addControl(new GMapTypeControl()); /* 地図タイプコントロール */ /* イベント追加(地図の倍率を変更した時) */ GEvent.addListener(map1, "zoomend", function(){ map2.setCenter(map1.getCenter(), 14); /* 中心地点 */ }); GEvent.addListener(map2, "zoomend", function(){ map1.setCenter(map2.getCenter(), 10); /* 中心地点 */ }); /* イベント追加(地図を動かした時) */ GEvent.addListener(map1, "move", function(){ if(map2.mymap.movedByOther==true) return; map2.mymap.movedByOther=true; map1.clearOverlays(); map2.clearOverlays(); marker1=new GMarker(map1.getCenter(), icon); marker2=new GMarker(map1.getCenter(), icon); map1.addOverlay(marker1); map2.addOverlay(marker2); map2.setCenter(map1.getCenter(), 14); /* 中心地点 */ map2.mymap.movedByOther=false; }); GEvent.addListener(map2, "move", function(){ if(map1.mymap.movedByOther==true) return; map1.mymap.movedByOther=true; map1.clearOverlays(); map2.clearOverlays(); marker1=new GMarker(map2.getCenter(), icon); marker2=new GMarker(map2.getCenter(), icon); map1.addOverlay(marker1); map2.addOverlay(marker2); map1.setCenter(map2.getCenter(), 10); /* 中心地点 */ map1.mymap.movedByOther=false; }); } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map1" style="width:225px;height:150px"><!-- 地図描画領域(広域図) --></div> <div id="map2" style="width:425px;height:300px"><!-- 地図描画領域(詳細図) --></div>