Search

Google Maps JavaScript API v3地図クラス

  1. 地図の傾きを取得・設定〔getTilt / setTiltメソッド〕
  2. ストリートビューの取得・設定〔getStreetView / setStreetViewメソッド〕
  3. 地図のオプション設定〔setOptionsメソッド〕
  4. 地図タイプの取得・設定〔getMapTypeId / setMapTypeIdメソッド〕
  5. 方角の取得・設定〔getHeading / setHeadingメソッド〕
  6. 地図の中心点を取得・設定〔getCenter / setCenterメソッド〕
  7. 指定した境界に地図を移動〔panToBoundsメソッド〕
  8. 指定した緯度・経度に地図の中心点を移動〔panToメソッド〕
  9. 指定した距離だけ地図の中心点を移動〔panByメソッド〕
  10. ズームレベルの取得・設定〔getZoom / setZoomメソッド〕
  11. 投影を取得〔getProjectionメソッド〕
  12. 地図オブジェクト（div要素）の取得〔getDivメソッド〕
  13. 指定した境界の緯度・経度を取得〔getBoundsメソッド〕
  14. 指定した境界が含まれるようにビューポートを設定〔fitBoundsメソッド〕
Google Maps JavaScript API V3

地図の傾きを取得・設定
getTilt / setTiltメソッド

2012/5/2

getTilt()

地図の傾きを数値で返します。

setTilt(tilt:number)

地図の傾きを設定します。 指定可能な値は「0」｢45｣のいずれか。 地図タイプが「SATELLITE」（航空写真）または「HYBRID」（デフォルト＋航空写真）の場合のみ有効です。 45度の傾きに対応していない場所の地図で「45」を指定しても「0」と同じ表示になります。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>getTilt / setTilt メソッド | 設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map;
        //初期設定
        function initialize() {
            var deg=rchk();
            /* 緯度・経度：サンタ・クルーズ・ビッグ・ツリーズ & パシフィック・レイルウェイ＝ボードウォーク駅 3rd St, サンタクルーズ カリフォルニア 95060 アメリカ合衆国 */
            var latlng=new google.maps.LatLng(36.964758,-122.015539);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center:latlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.SATELLITE,
                setTile:deg,
                  disableDefaultUI:true
            };
            map=new google.maps.Map(document.getElementById("map"), myOptions);
        }
        //チェック
        function rchk(){
            var deg=0;
            var obj=document.getElementsByName("deg");
            for(var i=0; i<obj.length; i++){
                if(obj[i].checked){
                    deg=parseInt(obj[i].value);
                }
            }
            return deg;
        }
        function tpchk(){
            var tp=0;
            var obj=document.getElementsByName("tp");
            for(var i=0; i<obj.length; i++){
                if(obj[i].checked){
                    tp=obj[i].value;
                }
            }
            if(tp=="HYBRID"){
                map.setMapTypeId(google.maps.MapTypeId.HYBRID);
            }else if(tp=="SATELLITE"){
                map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
            }
            return tp;
        }
        //地図タイプ設定
        function setType(){
            map.mapTypeId(tpchk());
            console.log(map.getMapTypeId());
        }
        //地図の傾き設定
        function setTileDeg(){
            map.setTilt(rchk());
            console.log(map.getTilt());
        }
        //地図の緯度・経度設定
        function setLatLng(lat,lng){
            var latlng=new google.maps.LatLng(lat, lng);
            map.setCenter(latlng);
        }
    </script>
    <style type="text/css">
        * { margin:0; padding:0; font-size:12px; }
        html, body { margin:0; padding:0; }
        h1, p { margin:10px; }
        #map { width:100%; height:500px; }
    </style>
</head>
<body onload="initialize()">
    <h1>getTilt / setTilt メソッド</h1>
    <form id="frm" name="frm">
        <p>
            地図のタイプ：
            <label for="tp_1"><input type="radio" name="tp" id="tp_1" value="HYBRID" onclick="setType()" />HYBRID</label>
            <label for="tp_2"><input type="radio" name="tp" id="tp_2" value="SATELLITE" checked="checked" onclick="setType()" />SATELLITE</label>
            　/　
            地図の傾き：
            <label for="deg_1"><input type="radio" name="deg" id="deg_1" value="0" onclick="setTileDeg()" />0</label>
            <label for="deg_2"><input type="radio" name="deg" id="deg_2" value="45" checked="checked" onclick="setTileDeg()" />45</label>
            <br>
            緯度・経度：
            <label for="lt_1"><input type="radio" name="lt" id="lt_1" value="0" checked="checked" onclick="setLatLng(36.964758,-122.015539)" />ｻﾝﾀ･ｸﾙｰｽﾞ･ﾋﾞｯｸﾞ･ﾂﾘｰｽﾞ & ﾊﾟｼﾌｨｯｸ･ﾚｲﾙｳｪｲ=ﾎﾞｰﾄﾞｳｫｰｸ駅</label>
            <label for="lt_2"><input type="radio" name="lt" id="lt_2" value="45" onclick="setLatLng(36.964436,-122.017623)" />ﾎﾞｰﾄｳｫｰｸ ｻﾝﾀ･ｸﾙｰｽﾞ</label>
        </p>
    </form>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

ストリートビューの取得・設定
getStreetView / setStreetViewメソッド

2012/5/2

getStreetView()

地図にバインドされたデフォルトのストリートビューパノラマを返します。

setStreetView(panorama:StreetViewPanorama)

地図にストリートビューパノラマをバインドします。 このパノラマは外部のパノラマと結合し、デフォルトのストリートビューパノラマを上書きするtことができます。 パノラマにnullを指定すると、地図に戻ってデフォルトで埋めこまれたパノラマをバインドします。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>StreetViewPanoramaクラス | 設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map;
        /* 初期設定 */
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
              /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 16,
                /* 地図の中心点 */
                center:latlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map"), myOptions);
            review();
        }
        function review(){
            var objname=(chk()) ? "svp" : "map";
            if(objname=="map"){
                document.getElementById("svp").style.display="none";
            }else{
                document.getElementById("svp").style.display="block";
            }
            /* ストリートビューパノラマ表示 */
            var svp=new google.maps.StreetViewPanorama(
                document.getElementById(objname),{
                    position : map.getCenter()
                });
            /* ストリートビューパノラマをバインド */
            map.setStreetView(svp);
        }
        
        //チェック
        function chk(){
            var obj=document.getElementsByName("svp");
            for(var i=0; i<obj.length; i++){
                if(obj[i].checked){
                    return parseInt(obj[i].value);
                }
            }
        }
    </script>
    <style type="text/css">
        * { margin:0; padding:0; font-size:12px; }
        html, body { margin:0; padding:0; }
        h1, p { margin:10px; }
        #map { width:100%; height:200px; }
        #svp { width:100%; height:200px; }
    </style>
</head>
<body onload="initialize()">
    <h1>StreetViewPanoramaクラス</h1>
    <p>ストリートビューパノラマをどこにバインドするかを変更します。</p>
    <form>
        <p>
            <label for="svp_1"><input type="radio" name="svp" id="svp_1" value="0" checked onclick="review()" />地図上にストリートビューパノラマを表示</label><br>
            <label for="svp_2"><input type="radio" name="svp" id="svp_2" value="1" onclick="review()" />別のDIV要素にストリートビューパノラマを表示</label>
        </p>
    </form>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
    <!-- ストリートビュー表示 -->
    <div id="svp"></div>
</body>
</html>

地図のオプション設定
setOptionsメソッド

2012/5/2

setOptions(options:MapOptions)

指定したオプションを地図に設定します。
必須指定項目は、「center」「mapTypeId」「zoom」の3つ。

指定可能なオプションの詳細はこちら。
MapOptionsオブジェクトのプロパティ

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>setOptionsメソッド | 設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map;
        /* 初期設定 */
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
              /* 地図のオプション設定 */
            var myOptions = {
                /* DIV要素の背景色 */
                backgroundColor:"#ffffff",
                /* 地図の中心点 */
                center:latlng,
                /* 初期のズームレベル */
                zoom: 16,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                /* デフォルトUIを表示するか */
                disableDefaultUI:chk("disabledefaultui"),
                /* ダブルクリックでズーム、センターを無効にするか */
                disableDoubleClickZoom:chk("disabledoubleclickzoom"),
                /* ドラッグできるようにするか */
                draggable:chk("draggable"),
                /* ドラッグ可能な場合のカーソルを指定 */
                draggableCursor:"crosshair",
                /* ドラッグ中のカーソルを指定 */
                draggingCursor:'url(/content/img/cur/qoo-n_02.cur)',
                /* キーボード制御を有効にするか */
                keyboardShortcuts:chk("keyboardshortcuts"),
                /* 地図タイプコントロールを表示するか */
                mapTypeControl:chk("maptypecontrol"),
                /* 最大ズームレベル */
                maxZoom:17,
                /* 最小ズームレベル */
                minZoom:15,
                /* 地図を描画するDIV要素の内容をクリアしない */
                noClear:true,
                /* 概観地図コントロールを表示するか */
                overviewMapControl:chk("overviewmapcontrol"),
                /* 移動コントロールを表示するか */
                panControl:chk("pancontrol"),
                /* 回転コントロールを表示するか */
                rotateControl:chk("rotatecontrol"),
                /* スケールコントロールを表示するか */
                scaleControl:chk("scalecontrol"),
                /* マウスホイールでのズームやセンターを有効にするか */
                scrollwheel:chk("scrollwheel"),
                /* ズームコントロールを表示するか */
                zoomControl:chk("zoomcontrol")
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map"), myOptions);
            console.log(document.getElementById("map").innerHTML);
        }
        //チェック
        function chk(objname){
            var obj=document.getElementsByName(objname);
            for(var i=0; i<obj.length; i++){
                if(obj[i].checked){
                    return true;
                }else{
                    return false;
                }
            }
        }
    </script>
    <style type="text/css">
        * { margin:0; padding:0; font-size:12px; }
        html, body { margin:0; padding:0; }
        h1, p { margin:10px; }
        #map { width:100%; height:400px; }
    </style>
</head>
<body onload="initialize()">
    <h1>setOptionsメソッド</h1>
    <p>地図のオプションを変更するサンプルです。</p>
    <form>
        <p><input type="button" value="以下の設定で地図を表示" onclick="initialize()" /></p>
        <p>
            <label for="disabledefaultui"><input type="checkbox" name="disabledefaultui" id="disabledefaultui" />disabledefaultUI</label>
            <label for="disabledoubleclickzoom"><input type="checkbox" name="disabledoubleclickzoom" id="disabledoubleclickzoom" />disableDoubleClickZoom</label>
            <label for="draggable"><input type="checkbox" name="draggable" id="draggable" checked />draggable</label>
            <label for="keyboardshortcuts"><input type="checkbox" name="keyboardshortcuts" id="keyboardshortcuts" checked />keyboardShortcuts</label>
            <label for="maptypecontrol"><input type="checkbox" name="maptypecontrol" id="maptypecontrol" checked />mapTypeControl</label>
        </p>
        <p>
            <label for="overviewmapcontrol"><input type="checkbox" name="overviewmapcontrol" id="overviewmapcontrol" checked />overviewMapControl</label>
            <label for="pancontrol"><input type="checkbox" name="pancontrol" id="pancontrol" checked />panControl</label>
            <label for="rotatecontrol"><input type="checkbox" name="rotatecontrol" id="rotatecontrol" checked />rotateControl</label>
            <label for="scalecontrol"><input type="checkbox" name="scalecontrol" id="scalecontrol" checked />scaleControl</label>
            <label for="scrollwheel"><input type="checkbox" name="scrollwheel" id="scrollwheel" checked />scrollwheel</label>
        </p>
        <p>
            <label for="zoomcontrol"><input type="checkbox" name="zoomcontrol" id="zoomcontrol" checked />zoomControl</label>
        </p>
    </form>
    <!-- 地図の埋め込み表示 -->
    <div id="map">ああああああああああああ</div>
</body>
</html>

地図タイプの取得・設定
getMapTypeId / setMapTypeIdメソッド

2012/5/2

getMapTypeId()

地図タイプのIDまたは文字列を返します。

setMapTypeId(mapTypeId:MapTypeId|string)

指定した地図タイプに設定します。
地図タイプの表示方法はオプションで変更できます。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>getMapTypeId / setMapTypeIdメソッド | 設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map;
        /* 初期設定 */
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
              /* 地図のオプション設定 */
            var myOptions = {
                /* 地図の中心点 */
                center:latlng,
                /* 初期のズームレベル */
                zoom: 16,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControlOptions:{
                    position: google.maps.ControlPosition.TOP_CENTER,    /* 地図タイプコントロールの表示位置 */
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU /* 地図タイプコントロールのスタイル */
                }
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map"), myOptions);
            document.getElementById("res").innerHTML=map.getMapTypeId();
        }
        //チェック
        function review(){
            var obj=document.getElementsByName("maptype");
            var o;
            for(var i=0; i<obj.length; i++){
                if(obj[i].checked){
                    switch(obj[i].value){
                        case "HYBRID":
                            o=google.maps.MapTypeId.HYBRID;
                            break;
                        case "ROADMAP":
                            o=google.maps.MapTypeId.ROADMAP;
                            break;
                        case "SATELLITE":
                            o=google.maps.MapTypeId.SATELLITE;
                            break;
                        case "TERRAIN":
                            o=google.maps.MapTypeId.TERRAIN;
                            break;
                        default:
                            break;
                    }
                    map.setMapTypeId(o);
                    document.getElementById("res").innerHTML=map.getMapTypeId();
                    return false;
                }
            }
        }
    </script>
    <style type="text/css">
        * { margin:0; padding:0; font-size:12px; }
        html, body { margin:0; padding:0; }
        h1, p { margin:10px; }
        #map { width:100%; height:400px; }
        #res { color:red; }
    </style>
</head>
<body onload="initialize()">
    <h1>getMapTypeId / setMapTypeIdメソッド</h1>
    <p>地図タイプを切り替えるサンプルです。</p>
    <hr />
    <form>
        <p>
            地図タイプ選択：
            <label for="maptype_1"><input type="radio" name="maptype" id="maptype_1" onclick="review()" value="HYBRID" />HYBRID</label>
            <label for="maptype_2"><input type="radio" name="maptype" id="maptype_2" onclick="review()" value="ROADMAP" checked />ROADMAP</label>
            <label for="maptype_3"><input type="radio" name="maptype" id="maptype_3" onclick="review()" value="SATELLITE" />SATELLITE</label>
            <label for="maptype_4"><input type="radio" name="maptype" id="maptype_4" onclick="review()" value="TERRAIN" />TERRAIN</label>
        </p>
        <p>現在の地図タイプ： <span id="res"></span></p>
    </form>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

方角の取得・設定
getHeading / setHeadingメソッド

2012/5/2

getHeading()

航空画像の方角コンパスを取得します。 方角の値は北からの度単位で測定されます。

setHeading(heading:number)

航空写真のコンパスを北を基準とした方角を度単位で指定します。

地図の中心点を取得・設定
getCenter / setCenterメソッド

2012/5/2

getCenter()

地図の中心地点の座標を返します。

setCenter(latlng:LatLng)

指定した座標に地図の中心地点を設定します。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>getCenter / setCenterメソッド | 設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map;
        /* 初期設定 */
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
              /* 地図のオプション設定 */
            var myOptions = {
                /* 地図の中心点 */
                center:latlng,
                /* 初期のズームレベル */
                zoom: 16,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            var map=new google.maps.Map(document.getElementById("map"), myOptions);
            document.getElementById("res").innerHTML=map.getCenter();
            google.maps.event.addListener(map, 'center_changed', function(){
                document.getElementById("res").innerHTML=map.getCenter();
            });
        }
    </script>
    <style type="text/css">
        * { margin:0; padding:0; font-size:12px; }
        html, body { margin:0; padding:0; }
        h1, p { margin:10px; }
        #map { width:100%; height:400px; }
        #res { color:red; }
    </style>
</head>
<body onload="initialize()">
    <h1>getCenter / setCenterメソッド</h1>
    <p>地図の中心地点を設定・取得。地図を移動すると、現在の中心地点を表示します。</p>
    <hr />
    <p>地図の中心地点：<span id="res"></span></p>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

指定した境界に地図を移動
panToBoundsメソッド

2012/5/2

panToBounds(latLngBounds:LatLngBounds)

指定したLatLngBoundsで指定した、地理座標の北西と南東を四角で囲んだ矩形領域（以下、境界）が地図に表示されるよう、地図を必要な最少量だけ移動します。 矩形領域を可能な限り表示されますが、保証するものではありません。

境界が地図上に存在する場合、地図タイプおよびナビゲーションコントロールで囲まれた領域内に配置されます。 境界が地図より大きい場合、地図は境界の北西の隅を含むように移動します。 地図の移動距離が地図の幅と高さの両方よりも小さい場合、地図はスムーズにアニメーション遷移します。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>panToBoundsメソッド | 設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map;
        /* 初期設定 */
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
              /* 地図のオプション設定 */
            var myOptions = {
                /* 地図の中心点 */
                center:latlng,
                /* 初期のズームレベル */
                zoom: 15,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map"), myOptions);
            review(1);
        }
        function review(){
            var val=1;
            var obj=document.getElementsByName("pan");
            for(var i=0; i<obj.length; i++){
                if(obj[i].checked){
                    val=parseInt(obj[i].value);
                }
            }
            console.log(val);
            switch(val){
                case 1:
                    /* 南西：原宿駅 */
                    var sw=new google.maps.LatLng(35.670168,139.702687);
                    /* 北東：外苑前駅*/
                    var ne=new google.maps.LatLng(35.670527,139.717857);
                    break;
                case 2:
                    /* 原宿駅 */
                    var sw=new google.maps.LatLng(35.662554, 139.692362);
                    var ne=new google.maps.LatLng(35.677712, 139.71283600000004);
                    break;
                case 3:
                    /* 六本木駅 */
                    var sw=new google.maps.LatLng(35.6570824, 139.72358910000003);
                    var ne=new google.maps.LatLng(35.6686644, 139.74362129999997);
                    break;
            }
            var latLngBounds=new google.maps.LatLngBounds(sw,ne);
            map.panToBounds(latLngBounds);
            var s="";
            s+="境界の北東："+latLngBounds.getNorthEast().lat()+", "+latLngBounds.getNorthEast().lng()+"<br>";
            s+="境界の北西："+latLngBounds.getSouthWest().lat()+", "+latLngBounds.getSouthWest().lng()+"<br>";
            s+="境界の中心："+latLngBounds.getCenter().lat()+", "+latLngBounds.getCenter().lng();
            document.getElementById("res").innerHTML=s;
        }
    </script>
    <style type="text/css">
        * { margin:0; padding:0; font-size:12px; }
        html, body { margin:0; padding:0; }
        h1, p { margin:10px; }
        #map { width:100%; height:400px; }
        #res { color:red; }
    </style>
</head>
<body onload="initialize()">
    <h1>panToBoundsメソッド</h1>
    <p>指定した境界を表示するよう地図を移動します。</p>
    <hr />
    <form>
        <p>
            地図移動：
            <label for="pan_1"><input type="radio" name="pan" id="pan_1" value="1" onclick="review()" checked />原宿駅-外苑前駅</label>
            <label for="pan_2"><input type="radio" name="pan" id="pan_2" value="2" onclick="review()" />原宿駅</label>
            <label for="pan_3"><input type="radio" name="pan" id="pan_3" value="3" onclick="review()" />六本木駅</label>
        </p>
    </form>
    <p><span id="res"></span></p>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

指定した緯度・経度に地図の中心点を移動
panToメソッド

2012/5/2

panTo(latLng:LatLng)

地図の中心を指定したLatLng（緯度・経度）に移動します。
移動距離が地図の幅と高さの両方よりも小さい場合、地図はスムーズにアニメーション遷移します。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>panToメソッド | 設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map;
        /* 初期設定 */
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
              /* 地図のオプション設定 */
            var myOptions = {
                /* 地図の中心点 */
                center:latlng,
                /* 初期のズームレベル */
                zoom: 15,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map"), myOptions);
            review(1);
        }
        function review(){
            var val=1;
            var obj=document.getElementsByName("pan");
            for(var i=0; i<obj.length; i++){
                if(obj[i].checked){
                    val=parseInt(obj[i].value);
                }
            }
            switch(val){
                case 1:
                    /* 明治神宮前駅 */
                    var latlng=new google.maps.LatLng(35.669071,139.703995);
                    break;
                case 2:
                    /* 原宿駅 */
                    var latlng=new google.maps.LatLng(35.670168,139.702687);
                    break;
                case 3:
                    /* 芝公園駅 */
                    var latlng=new google.maps.LatLng(35.654071,139.749838);
                    break;
            }
            map.panTo(latlng);
            document.getElementById("res").innerHTML=map.getCenter();
        }
    </script>
    <style type="text/css">
        * { margin:0; padding:0; font-size:12px; }
        html, body { margin:0; padding:0; }
        h1, p { margin:10px; }
        #map { width:100%; height:400px; }
        #res { color:red; }
    </style>
</head>
<body onload="initialize()">
    <h1>panToメソッド</h1>
    <p>指定した緯度・経度に地図の中心点を移動。</p>
    <hr />
    <form>
        <p>
            地図の中心点を移動：
            <label for="pan_1"><input type="radio" name="pan" id="pan_1" value="1" onclick="review()" checked />明治神宮前駅</label>
            <label for="pan_2"><input type="radio" name="pan" id="pan_2" value="2" onclick="review()" />原宿駅</label>
            <label for="pan_3"><input type="radio" name="pan" id="pan_3" value="3" onclick="review()" />芝公園駅</label>
        </p>
    </form>
    <p>現在の地図の中心点：<span id="res"></span></p>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

指定した距離だけ地図の中心点を移動
panByメソッド

2012/5/2

panBy(x:number, y:number)

ピクセル単位で指定した距離だけ、地図の中心地点を移動します。
移動距離が地図の幅と高さの両方よりも小さい場合、スムーズにアニメーション遷移します。
xには西→東へ、yには南→北への移動量を指定します。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>panToメソッド | 設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map;
        /* 初期設定 */
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
              /* 地図のオプション設定 */
            var myOptions = {
                /* 地図の中心点 */
                center:latlng,
                /* 初期のズームレベル */
                zoom: 15,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map"), myOptions);
            document.getElementById("res").innerHTML=map.getCenter();
        }
        function review(x,y){
            map.panBy(x,y);
            document.getElementById("res").innerHTML=map.getCenter();
        }
    </script>
    <style type="text/css">
        * { margin:0; padding:0; font-size:12px; }
        html, body { margin:0; padding:0; }
        h1, p { margin:10px; }
        #map { width:100%; height:400px; }
        #res { color:red; }
        input { padding:2px 3px; }
    </style>
</head>
<body onload="initialize()">
    <h1>panByメソッド</h1>
    <p>指定した距離だけ地図の中心点を移動。</p>
    <hr />
    <form>
        <p>
            地図の中心点を移動：
            <input type="button" onclick="review(10,10)" value="x:10, y:10" />
            <input type="button" onclick="review(-10,-10)" value="x:-10, y:-10" />
            <input type="button" onclick="review(1000,-1000)" value="x:1000 y:-1000" />
            <input type="button" onclick="review(-1000,1000)" value="x:-1000, y:1000" />
        </p>
    </form>
    <p>現在の地図の中心点：<span id="res"></span></p>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

ズームレベルの取得・設定
getZoom / setZoomメソッド

2012/5/2

getZoom()

地図をズームレベルを数値で返します。

setZoom(zoom:number)

数値で指定したズームレベルで地図を表示します。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>getZoom / setZoomメソッド | 設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map;
        /* 初期設定 */
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
              /* 地図のオプション設定 */
            var myOptions = {
                /* 地図の中心点 */
                center:latlng,
                /* 初期のズームレベル */
                zoom: 15,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map"), myOptions);
            document.getElementById("res").innerHTML=map.getZoom();
        }
        function review(){
            var idx=document.getElementById("frm").zoomlevel.selectedIndex;
            map.setZoom(parseInt(document.getElementById("frm").zoomlevel.options[idx].value));
            document.getElementById("res").innerHTML=map.getZoom();
        }
    </script>
    <style type="text/css">
        * { margin:0; padding:0; font-size:12px; }
        html, body { margin:0; padding:0; }
        h1, p { margin:10px; }
        #map { width:100%; height:400px; }
        #res { color:red; }
    </style>
</head>
<body onload="initialize()">
    <h1>getZoom / setZoomメソッド</h1>
    <p>下記のプルダウンで選択したズームレベルで地図を表示します。</p>
    <hr />
    <form id="frm" name="frm">
        <p>
            <label for="zoomlevel">地図のズームレベル：</label>
            <select id="zoomlevel" name="zoomlevel" onchange="review()">
                <script type="text/javascript">
                    for(var i=0;i<=21; i++){
                        var opt=(i==15) ? " selected" :"";
                        document.write('<option value="'+i+'"'+opt+'>'+i+'</option>');
                    }
                </script>
            </select>
        </p>
    </form>
    <p>現在の地図のズームレベル：<span id="res"></span></p>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

投影を取得
getProjectionメソッド

2012/5/2

getProjection()

現在の投影を返します。

地図がまだ初期化されていない場合（地図タイプがnull）は、nullが返ります。 projection_changedイベントでnullでないことを確認するとよいです。

地図オブジェクト（div要素）の取得
getDivメソッド

2012/5/2

getDiv()

getDiv()は、地図を描画するDIV要素のノードを返します。

指定した境界の緯度・経度を取得
getBoundsメソッド

2012/5/2

getBounds()

指定した矩形領域の境界の緯度・経度を返します。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>getBoundsメソッド | 設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map;
        /* 初期設定 */
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
              /* 地図のオプション設定 */
            var myOptions = {
                /* 地図の中心点 */
                center:latlng,
                /* 初期のズームレベル */
                zoom: 15,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map"), myOptions);
            google.maps.event.addListener(map, 'tilesloaded', review);
            google.maps.event.addListener(map, 'bounds_changed', review);
        }
        function review(){
            document.getElementById("res").innerHTML=map.getBounds();
        }
    </script>
    <style type="text/css">
        * { margin:0; padding:0; font-size:12px; }
        html, body { margin:0; padding:0; }
        h1, p { margin:10px; }
        #map { width:100%; height:400px; }
        #res { color:red; }
    </style>
</head>
<body onload="initialize()">
    <h1>getBoundsメソッド</h1>
    <p>矩形領域の境界の緯度・経度を取得します。</p>
    <hr />
    <p>矩形領域の境界の緯度・経度：<span id="res"></span></p>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

指定した境界が含まれるようにビューポートを設定
fitBoundsメソッド

2012/5/2

fitBounds(bounds:LatLngBounds)

指定した矩形領域の境界が地図に含まれるようにビューポートを設定します。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>fitBoundsメソッド | 設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map;
        /* 初期設定 */
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
              /* 地図のオプション設定 */
            var myOptions = {
                /* 地図の中心点 */
                center:latlng,
                /* 初期のズームレベル */
                zoom: 1,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map"), myOptions);
            google.maps.event.addListener(map, 'tilesloaded', review);
        }
        function review(){
            var val=1;
            var obj=document.getElementsByName("pan");
            for(var i=0; i<obj.length; i++){
                if(obj[i].checked){
                    val=parseInt(obj[i].value);
                }
            }
            switch(val){
                case 1:
                    /* 表参道駅 */
                    var sw=new google.maps.LatLng(35.657386, 139.70300099999997);
                    var ne=new google.maps.LatLng(35.67244, 139.72109899999998);
                    break;
                case 2:
                    /* 渋谷区*/
                    var sw=new google.maps.LatLng(35.6459025, 139.6661974);
                    var ne=new google.maps.LatLng(35.6821638, 139.730227);
                    break;
                case 3:
                    /* 東京都 */
                    var sw=new google.maps.LatLng(35.528873, 139.51057400000002);
                    var ne=new google.maps.LatLng(35.817813, 139.91020200000003);
                    break;
                case 4:
                    /* 日本 */
                    var sw=new google.maps.LatLng(26.4661367, 121.86132210000005);
                    var ne=new google.maps.LatLng(44.8679299, 154.64452589999996);
                    break;
            }
            var latLngBounds=new google.maps.LatLngBounds(sw,ne);
            map.fitBounds(latLngBounds);
            document.getElementById("res").innerHTML=map.getBounds();
            document.getElementById("res2").innerHTML=map.getZoom();
        }
    </script>
    <style type="text/css">
        * { margin:0; padding:0; font-size:12px; }
        html, body { margin:0; padding:0; }
        h1, p { margin:10px; }
        #map { width:100%; height:400px; }
        #res,#res2 { color:red; }
    </style>
</head>
<body onload="initialize()">
    <h1>fitBoundsメソッド</h1>
    <p>指定した矩形領域の境界が地図に含まれるようにビューポートを設定を取得します。</p>
    <hr />
    <form>
        <p>
            地図移動：
            <label for="pan_1"><input type="radio" name="pan" id="pan_1" value="1" onclick="review()" checked />表参道駅</label>
            <label for="pan_2"><input type="radio" name="pan" id="pan_2" value="2" onclick="review()" />渋谷区</label>
            <label for="pan_3"><input type="radio" name="pan" id="pan_3" value="3" onclick="review()" />東京都</label>
            <label for="pan_4"><input type="radio" name="pan" id="pan_4" value="4" onclick="review()" />日本</label>
        </p>
    </form>
    <p>矩形領域の境界の緯度・経度：<span id="res"></span><br>ズームレベル：<span id="res2"></span></p>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

関連コンテンツ

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

投票する 投票結果を見る

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

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

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop