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>