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.getMapTypes()

GMap2クラスのgetMapTypes()メソッドは、地図に登録されている利用可能な地図タイプを配列で返します。

サンプルを見る
<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.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&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(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&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.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&amp;v=2&amp;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_MAP_TYPE 地図タイプ
通常ビュー（デフォルト）
G_SATELLITE_MAP
 G_SATELLITE_MAP 航空写真タイプ
Google Earthの航空写真
G_HYBRID_MAP
 G_HYBRID_MAP 地図＋写真タイプ
通常ビューとGoogle Earthの航空写真を合成表示

地図の広域図と詳細図を2画面連動表示

2008/5/5

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

関連コンテンツ

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

投票する 投票結果を見る

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

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

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop