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

TOP Ajaxストリートビュー

ストリートビューパノラマ〔StreetViewPanoramaクラス〕
ストリートビューパノラマのイベント
ストリートビューパノラマのオプション設定〔StreetViewPanoramaOptionsオブジェクト〕
ストリートビューパノラマのリンクコントロールのナビゲーションのセット〔getLinkメソッド〕
現在のパノラマIDを取得〔getPanoメソッド〕
パノラマの現在の緯度・経度を取得〔getPositionメソッド〕
カメラのポイント（方角、角度、ズーム）を取得・設定〔getPov / setPovメソッド〕
パノラマ表示の有無を取得・設定〔getVisible / setVisibleメソッド〕

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>

ストリートビューパノラマのリンクコントロールのナビゲーションのセット
getLinkメソッド

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>

Google Maps JavaScript API v3 Panoramioライブラリ

Google Maps JavaScript API v3 The Google Directions API（ルート検索）

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

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

設置サンプル

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

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

ストリートビューパノラマのリンクコントロールのナビゲーションのセット
getLinkメソッド

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

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

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

設置サンプル

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

関連コンテンツ

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

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

設置サンプル

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

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

ストリートビューパノラマのリンクコントロールのナビゲーションのセットgetLinkメソッド

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

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

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

設置サンプル

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

関連コンテンツ

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

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

ストリートビューパノラマのリンクコントロールのナビゲーションのセット
getLinkメソッド

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

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

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

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