Search

Google Maps JavaScript API v3ストリートビュー

Google Maps JavaScript API V3

Google Maps Javascript API V3 Reference

ストリートビューパノラマ
StreetViewPanoramaクラス

2012/5/2

StreetViewPanorama(container:Node, opts?:StreetViewPanoramaOptions)

google.maps.StreetViewPanoramaクラスのコンストラクタ。

指定した座標またはパノラマIDのパノラマを表示します。 ストリートビューパノラマは、地図上あるいは、地図とは別のDIV要素内に表示可能です。

オプションでビューのカスタマイズが可能です。

設置サンプル

ストリートビューパノラマのバインド先を切り替えるサンプルです。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>StreetViewPanorama | 設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向け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);
                }
            }
        }
        /* ロード時に初期化 */
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
        #map { width:100%; height:200px; }
        #svp { width:100%; height:200px; }
    </style>
</head>
<body>
    <h1>Google Maps JavaScript API v3: 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>

ストリートビューパノラマのイベント

2012/5/2

イベント説明
closeclick 閉じるボタンがクリックされた時。
links_changed パノラマのリンクが変更された時。
リンクはpanoID変更後に非同期に変化します。
pano_changed パノラマのpanoIDが変更された時。
position_changed パノラマの位置が変更された時。
pov_changed パノラマのビューポイント（headiing,pitch,zoom）が変更された時。
resize DIV要素のサイズを変更する時はパノラマ上でイベントをトリガーする。
google.maps.event.trigger(panorama, 'resize')
visible_changed パノラマの表示/非表示が変更された時。
設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>イベント | 設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向け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,svp;
        /* 初期設定 */
        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);
            svp=new google.maps.StreetViewPanorama(
                document.getElementById("map"),{
                    enableCloseButton:true,
                    visible:chk("visible"),
                    position : map.getCenter()
                });
            map.setStreetView(svp);
            google.maps.event.addListener(svp, 'closeclick', function(event){dbg("closeclick")});
            google.maps.event.addListener(svp, 'links_changed', function(event){dbg("links_changed")});
            google.maps.event.addListener(svp, 'pano_changed', function(event){dbg("pano_changed")});
            google.maps.event.addListener(svp, 'position_changed', function(event){dbg("position_changed")});
            google.maps.event.addListener(svp, 'pov_changed', function(event){dbg("pov_changed")});
            google.maps.event.addListener(svp, 'visible_changed', function(event){dbg("visible_changed")});
            google.maps.event.addListener(svp, 'resize', function(event){dbg("resize")});
        }
        function dbg(str){
            document.getElementById("res").value=str+"\n"+document.getElementById("res").value;
            if(str=="closeclick"){
                document.getElementsByName("visible")[0].checked=false;
            }
        }
        function review(){
            svp.setVisible(chk("visible"));
        }
        //チェック
        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;
                }
            }
        }
        /* ロード時に初期化 */
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
        #map { width:100%; height:200px; }
        #res { width:100%; height:200px; }
    </style>
</head>
<body>
    <h1>Google Maps JavaScript API v3: StreetViewPanorama</h1>
    <form>
        <p>▼ストリートビューパノラマ上で発生したイベントを表示します。<br>
            <textarea id="res"></textarea>
        </p>
        <p align="right">
            <label for="visible"><input type="checkbox" name="visible" id="visible" checked onclick="review()" />ストリートビューパノラマ表示</label>
        </p>
    </form>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

ストリートビューパノラマのオプション設定
StreetViewPanoramaOptionsオブジェクト

2012/5/2

StreetViewPanoramaオブジェクトのプロパティを定義します。

StreetViewPanoramaOptionsオブジェクトのプロパティ
プロパティ説明
addressControl ビュー内にアドレスコントロールを表示するかの有無。デフォルトはtrue（表示）。
addressControlOptions positionプロパティでアドレスコントロールを表示する位置を指定可能。デフォルトはTOP_LEFT。
clickToGo ビュークリックで地図を移動できるようにするかの有無を指定。デフォルトはtrue（有効）。
disableDoubleClickZoom ダブルクリックで地図をズームできないようにするかどうかの有無を指定。デフォルトはtrue（無効）。
enableCloseButton 閉じるボタンを表示するかどうかの有無を指定。デフォルトはfalse（非表示）。trueを指定するとビューの右上にビューを閉じるための×ボタンが表示されます。
imageDateControl 画像を取得した日付を表示するかどうかの有無を指定。デフォルトはfalse（非表示）。trueを指定すると、ビュー右下のコピーライト内に「画像撮影時期」（例：2009年10月）が表示されます。
linksControl リンクコントロールを有効にするかどうかの有無を指定。デフォルトはtrue（有効）。falseを指定すると、リンクコントロールが表示されなくなります。
panControl 移動コントロールを有効にするかどうかの有無を指定。デフォルトはtrue（有効）。falseを指定すると、移動コントロールが表示されなくなります。
panControlOptions positionプロパティで移動コントロールの表示位置を指定可能。デフォルトはTOP_LEFT。
pano カスタムパノラマを指定するときに設定する必要があるパノラマID。
panoProvider パノラマID（pano）を取得し、そのIDを指定するパノラマを定義するオブジェクトを返します。
position ストリートビューパノラマの緯度・経度を指定。
pov パノラマのheading,pitch,zoomとして指定されたカメラの向きを指定。
scrollwheel マウスホイールでのスクロールを有効にするかどうかを指定。デフォルトはtrue（有効）。falseを指定すると、ビュー上でのマウスホイールがきかなくなります。
visible ストリートビューパノラマを表示するかどうかの有無を指定。デフォルトはtrue（表示）。falseを指定すると、ビューが非表示になります。
zoomControl ズームコントロールを有効にするかどうかの有無を指定。デフォルトはtrue（有効）。falseを指定すると、ズームコントロールが非表示になります。
zoomControlOptions positionプロパティでズームコントロールの表示位置、styleプロパティでコントロールのスタイルを指定可能。

以下は、地図とは別のDIV要素内にパノラマを表示する例です。
チェックボックスで、各種オプションの切り替えができるようにしています。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>StreetViewPanorama | 設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向け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,svp;
        /* 初期設定 */
        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(){
            /* ストリートビューパノラマ表示 */
            svp=new google.maps.StreetViewPanorama(
                document.getElementById("svp"),{
                    addressControl:chk("addresscontrol"),
                    addressControlOptions:"BOTTOM_RIGHT",
                    clickToGo:chk("clicktogo"),
                    disableDoubleClickZoom:chk("disabledoubleclickzoom"),
                    enableCloseButton:chk("enableclosebutton"),
                    imageDateControl:chk("imagedatecontrol"),
                    linksControl:chk("linkscontrol"),
                    panControl:chk("pancontrol"),
                    scrollwheel:chk("scrollwheel"),
                    visible:chk("visible"),
                    zoomControl:chk("zoomcontrol"),
                    position : map.getCenter()
                });
            map.setStreetView(svp);
        }
        //チェック
        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;
                }
            }
        }
        /* ロード時に初期化 */
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
        #map { width:100%; height:200px; }
        #svp { width:100%; height:300px; }
    </style>
</head>
<body>
    <h1>Google Maps JavaScript API v3: StreetViewPanorama</h1>
    <p>地図とは別のDIV要素内にパノラマを表示する例です。<br>チェックボックスで、各種オプションの切り替えができるようにしています。</p>
    <form>
        <p>
            <label for="clicktogo"><input type="checkbox" name="clicktogo" id="clicktogo" checked onclick="review()" />clickToGo</label>
            <label for="addresscontrol"><input type="checkbox" name="addresscontrol" id="addresscontrol" checked onclick="review()" />addressControl</label>
            <label for="disabledoubleclickzoom"><input type="checkbox" name="disabledoubleclickzoom" id="disabledoubleclickzoom" checked onclick="review()" />disableDoubleClickZoom</label>
            <label for="enableclosebutton"><input type="checkbox" name="enableclosebutton" id="enableclosebutton" onclick="review()" />enableCloseButton</label>
            <label for="imagedatecontrol"><input type="checkbox" name="imagedatecontrol" id="imagedatecontrol" onclick="review()" />imageDateControl</label>
        <br>
            <label for="linkscontrol"><input type="checkbox" name="linkscontrol" id="linkscontrol" checked onclick="review()" />linksControl</label>
            <label for="pancontrol"><input type="checkbox" name="pancontrol" id="pancontrol" checked onclick="review()" />panControl</label>
            <label for="scrollwheel"><input type="checkbox" name="scrollwheel" id="scrollwheel" checked onclick="review()" />scrollwheel</label>
            <label for="visible"><input type="checkbox" name="visible" id="visible" checked onclick="review()" />visible</label>
            <label for="zoomcontrol"><input type="checkbox" name="zoomcontrol" id="zoomcontrol" checked onclick="review()" />zoomControl</label>
        </p>
    </form>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
    <!-- ストリートビュー表示 -->
    <div id="svp"></div>
</body>
</html>

2012/5/2

getLink()

google.maps.StreetViewPanoramaクラスのメソッド。
ストリートビューパノラマのリンクコントロールのナビゲーションのセットを返します。
各リンクには、場所の説明（description）・カメラの方角（heading）・パノラマID（pano）が入っています。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>getLink | 設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向け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;
        /* ストリートビューパノラマオブジェクト */
        var svp;
        /* 初期設定 */
        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);
            svp=new google.maps.StreetViewPanorama(
                document.getElementById("svp"),{
                    position : map.getCenter()
                });
            map.setStreetView(svp);
            /* 地図上でドラッグイベントが発生した時 */
            google.maps.event.addListener(map, 'tilesloaded', review);
            google.maps.event.addListener(map, 'mousemove', review);
        }
        /* ストリートビューパノラマ表示 */
        function review(){
            var s="";
            var tmp=svp.getLinks();
            for(var i in tmp){
                s+="["+i+"]="+tmp[i]["description"]+"<br>";    /* 場所の説明 */
                s+="["+i+"]="+tmp[i]["heading"]+"<br>";        /* カメラの方角 */
                s+="["+i+"]="+tmp[i]["pano"]+"<br>";            /* パノラマID */
            }
            document.getElementById("res").innerHTML=s;
        }
        /* ロード時に初期化 */
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
        #map { width:100%; height:300px; }
        #svp { width:100%; height:200px; }
    </style>
</head>
<body>
    <h1>Google Maps JavaScript API v3: StreetViewPanorama</h1>
    <p>人型のペグマンコントロールを地図上でドラッグすると、その位置のストリートビューを地図の下に表示します。</p>
    <p>▼ストリートビューパノラマのリンクコントロールのナビゲーションのセット</p>
    <p id="res"></p>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
    <!-- ストリートビュー表示 -->
    <div id="svp"></div>
</body>
</html>

現在のパノラマIDを取得
getPanoメソッド

2012/5/2

getPano()

google.maps.StreetViewPanoramaクラスのメソッド。
ストリートビューパノラマの現在のパノラマIDを文字列として返します。
このIDは、ブラウザの現在のセッション内で固定となります。

下記の例では、 地図やストリートビューの位置を変更した時に現在ノパノラマIDを表示しています。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>getPano | 設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向け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;
        /* ストリートビューパノラマオブジェクト */
        var svp;
        /* 初期設定 */
        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);
            svp=new google.maps.StreetViewPanorama(
                document.getElementById("svp"),{
                    position : map.getCenter()
                });
            map.setStreetView(svp);
            google.maps.event.addListener(svp, 'tilesloaded', review);
            google.maps.event.addListener(svp, 'pano_changed', review);
        }
        function review(){
            document.getElementById("res").innerHTML=svp.getPano();
        }
        /* ロード時に初期化 */
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
        #map { width:100%; height:300px; }
        #svp { width:100%; height:200px; }
    </style>
</head>
<body>
    <h1>Google Maps JavaScript API v3: StreetViewPanorama</h1>
    <p>地図やストリートビューの位置を変更した時、現在ノパノラマIDを表示します。</p>
    <p>現在のパノラマID：<span id="res"></span></p>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
    <!-- ストリートビュー表示 -->
    <div id="svp"></div>
</body>
</html>

パノラマの現在の緯度・経度を取得
getPositionメソッド

2012/5/2

getPosition()

google.maps.StreetViewPanoramaクラスのメソッド。
ストリートビューパノラマの現在の緯度・経度を返します。

下記の例では、ストリートビューを移動した時に、パノラマの現在の緯度・経度を取得して表示しています。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>getPosition | 設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向け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;
        /* ストリートビューパノラマオブジェクト */
        var svp;
        /* 初期設定 */
        function initialize() {
            var obj=document.getElementById("map");
            /* 緯度・経度：日本, 表参道駅（東京）*/
            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(obj, myOptions);
            svp=new google.maps.StreetViewPanorama(
                obj,{
                    position : map.getCenter()
                });
            map.setStreetView(svp);
            google.maps.event.addListener(svp, 'tilesloaded', review);
            google.maps.event.addListener(svp, 'position_changed', review);
        }
        function review(){
            document.getElementById("res").innerHTML=svp.getPosition();
        }
        /* ロード時に初期化 */
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
        #map { width:100%; height:100%; }
    </style>
</head>
<body>
    <h1>Google Maps JavaScript API v3: StreetViewPanorama</h1>
    <p>ストリートビューをコントロールやマウスで移動してみましょう。パノラマの現在の緯度・経度を下記に表示します。</p>
    <p>現在の緯度・経度：<span id="res"></span></p>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

カメラのポイント（方角、角度、ズーム）を取得・設定
getPov / setPovメソッド

2012/5/2

getPov()

google.maps.StreetViewPanoramaクラスのメソッド。
ストリートビューパノラマの現在のポイントを返します。

setPov(pov:StreetViewPov)

google.maps.StreetViewPanoramaクラスのメソッド。
ストリートビューパノラマのポイントを設定します。 戻り値はありません。

※ポイント（カメラの向き）は、heading、pitch、zoomから成ります。

※StreetViewPovオブジェクトは、ストリートビューのパノラマ位置でのカメラのポイントを指定します。

StreetViewPovオブジェクトのプロパティ
プロパティ説明
heading カメラの方角。
カメラの北からの相対角度。
北が0°、東が90°、南が180°、西は270°。
pitch カメラの角度。
ストリートビュー車に対する相対角度。
範囲は、90°（上方）から-90°（下方）。
zoom カメラのズームレベル。
完全にズームアウトの場合は0を指定。

設置サンプル

以下は、人型のペグマンコントロールを地図上でドラッグすると、その位置のストリートビューを地図の下に表示し、その場所で360°回転させて表示させる例です。 setInterValで1秒おきにカメラの方角を変えています。 セレクトボックスより、カメラの角度やズームも変更できます。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>getPov | 設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向け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;
        /* ストリートビューパノラマオブジェクト */
        var svp;
        /* 地図を描画する要素ID */
        var obj=document.getElementById("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);
            svp=new google.maps.StreetViewPanorama(
                document.getElementById("svp"),{
                    position : map.getCenter()
                });
            map.setStreetView(svp);
            /* 360°回転 */
            timerID=setInterval("review()",1000);
        }
        function chgZoom(){
            var idx=document.getElementById("frm").zoomlevel.selectedIndex;
            return parseInt(document.getElementById("frm").zoomlevel.options[idx].value);
        }
        function chgPitch(){
            var idx=document.getElementById("frm").pitchdeg.selectedIndex;
            return parseInt(document.getElementById("frm").pitchdeg.options[idx].value);
        }
        function review(){
            var _pitch=chgPitch();
            var _zoom=chgZoom();
            /* カメラのポイント取得 */
            var pov=svp.getPov();
            var _heading=pov["heading"];
            _heading=_heading+5;
            if(_heading>=270) _heading=0;
            svp.setPov({heading:_heading, pitch:_pitch, zoom:_zoom});
            document.getElementById("res").innerHTML="方角="+_heading+" / 向き="+_pitch+" / ズーム="+_zoom;
        }
        /* ロード時に初期化 */
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
        #map { width:100%; height:200px; }
        #svp { width:100%; height:300px; }
    </style>
</head>
<body>
    <h1>Google Maps JavaScript API v3: StreetViewPanorama</h1>
    <p>人型のペグマンコントロールを地図上でドラッグすると、その位置のストリートビューを地図の下に表示し、その場所を360°回転させて表示します。</p>
    <p>現在のカメラのポイント：<span id="res"></span></p>
    <form id="frm" name="frm">
        <p>
            <label for="pitchdeg">向き：</label>
            <select name="pitchdeg" onclick="chgPitch()">
                <option>90</option>
                <option>45</option>
                <option selected="selected">0</option>
                <option>-45</option>
                <option>-90</option>
            </select>°　
            <label for="zoomlevel">ズーム：</label>
            <select id="zoomlevel" name="zoomlevel" onclick="chgZoom()">
                <option selected="selected">0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </p>
    </form>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
    <!-- ストリートビュー表示 -->
    <div id="svp"></div>
</body>
</html>

パノラマ表示の有無を取得・設定
getVisible / setVisibleメソッド

2012/5/2

getVisible()

google.maps.StreetViewPanoramaクラスのメソッド。
パノラマの表示されているならtrueを返します。
※ストリートビュー画像が指定した位置で利用できるかどうかを取得するものではありません。

setVisible(flag:boolean)

google.maps.StreetViewPanoramaクラスのメソッド。
trueを指定するとパノラマを表示します。
falseを指定すると、パノラマを非表示にします。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>getVisible, setVisible | 設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向け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,svp;
        /* 初期設定 */
        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);
            /* ストリートビューパノラマオブジェクト */
            svp=new google.maps.StreetViewPanorama(
                document.getElementById("svp"),{
                    position : map.getCenter()
                });
            map.setStreetView(svp);
            google.maps.event.addListener(svp, 'tilesloaded', review);
            google.maps.event.addListener(svp, 'visible_changed', review);
        }
        function review(){
            document.getElementById("res").innerHTML=svp.getVisible();
        }
        /* ロード時に初期化 */
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
        #map { width:100%; height:300px; }
        #svp { width:100%; height:200px; }
    </style>
</head>
<body>
    <h1>Google Maps JavaScript API v3: StreetViewPanorama</h1>
    <p>人型のペグマンコントロールを地図上でドラッグすると、その位置のストリートビューを地図の下に表示します。</p>
    <p>パノラマ表示切替：
        <input type="button" onclick="svp.setVisible(true)" value="パノラマ表示" />
        <input type="button" onclick="svp.setVisible(false)" value="パノラマ非表示" />
        　（パノラマ表示の有無：<span id="res"></span>）
    </p>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
    <!-- ストリートビュー表示 -->
    <div id="svp"></div>
</body>
</html>

関連コンテンツ

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

投票する 投票結果を見る

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

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

©2025 PHP & JavaScript Room All Rights Reserved.

pagetop