Google Mapのリファレンスサイト

ストリートビュー（Street View）

·

ぽち

Google Maps JavaScript API を使えば、地図上の任意の地点に対応するパノラマ（ストリートビュー）をページ内に埋め込んで表示できます。

施設紹介や目的地の視認性を高めるのに有効です。


■ Street Viewを埋め込むためのデータ取得

指定した座標のパノラマビューを表示するためには、まず表示画像のデータを取得します。

JavaScript

<script>
  let map, panorama;

  function initMap() {
    const location = { lat: 35.681236, lng: 139.767125 }; // 東京駅周辺

    map = new google.maps.Map(document.getElementById("map"), {
      center: location,
      zoom: 17,
      streetViewControl: true,
    });

    panorama = map.getStreetView();

    // ストリートビューが開いた時に実行
    panorama.addListener('visible_changed', () => {
      if (panorama.getVisible()) {
        console.log("ストリートビューが開きました");

        panorama.addListener('position_changed', () => {
          console.log('位置:', panorama.getPosition().toJSON());
        });

        panorama.addListener('pov_changed', () => {
          console.log('向き:', panorama.getPov());
        });

        panorama.addListener('pano_changed', () => {
          const panoId = panorama.getPano();
          console.log('pano ID:', panoId);
        });
      }
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>

上記のスクリプトで画像を表示すると、ブラウザの検証画面では以下のように表示されます。

特定ストリートビューの必須3項目

位置（position）panorama.getPosition().toJSON()*
向き（pov: Point of View）panorama.getPov()
パノラマID（pano ID）panorama.getPano()


*toJSON()を使うことにより、{ lat: 35.681236, lng: 139.767125 }のようなプレーンなJavaScriptオブジェクトとして取得可能


■ 地図と連動してストリートビューを表示する

上記のサンプルで表示している国会議事堂のストリートビューのプログラム

<script>
      let map, panorama;

      function initMap() {
        const location = { lat: 35.67622417551649, lng: 139.74743662252516 };
        const panoId = 'We4D3edWIDN90wM1h80wbA';

        map = new google.maps.Map(document.getElementById("map"), {
          center: location,
          zoom: 17,
          streetViewControl: true, // ← 左上に「戻る」UI出ます
        });

        panorama = map.getStreetView();

        // 初期状態でストリートビュー表示
        panorama.setPano(panoId);
        panorama.setPov({
          heading: 259.15708874902856,
          pitch: 5.4499223462343735,
          zoom: 1
        });
        panorama.setVisible(true); // ← ここでSV表示
      }
    </script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>


■ Street View の制御（向き・ズームなど）

pov パラメータで、表示方向を細かく制御できます。

プロパティ内容
headingカメラの向き（0〜360度。0は北）
pitch上下の角度（-90〜90度）
zoomズームレベル（1が標準）

例：北向き（heading: 0）で上を向く

活用シーン

多彩な表示が可能です。実装したいものがあればお問い合わせください。