【Google Maps API】ストリートビューを表示する方法

GoogleMapsApi

通常、Google Mapの地図表示からペグマンをドラッグし、ストリートビューを表示します。
この記事では、Google Maps APIを使ってストリートビューを表示し、コントロールをカスタマイズする方法について説明します。

Google Maps APIの準備

まず、Google Maps APIを使うためにAPIキーを取得します。Google Cloud Platformにログインし、プロジェクトを作成してAPIキーを取得しましょう。APIキーは、後ほどHTMLに記述する際に必要になります。

過去記事：
Google Maps Platform の始め方と使い方

HTML、Scriptファイルの作成

HTMLファイルの中に、Scriptを記述することもできますが、今回は、HTML、Scriptファイルを別々に作成します。

■index.html

<!DOCTYPE html>
<html>
<head>
<title>Google Maps ストリートビュー</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDybvg7nLDcn6TFZwC3S2AWe0nqIUqcPgM"></script>
<script src="script1.js"></script> 
  <style>
    /* 親要素の高さを100%に設定 */
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }
    /* 地図のコンテナの高さを100%に設定 */
    #pano {
    height: 100%;
    width: 100%;
    }
  </style>
</head> 
<body>
  <div id="pano"></div>
</body> 
</html>

■script1.js

function initMap() {

  // 初期の緯度と経度を設定
  var tokyoTower = {lat: 33.675545225521745,lng: 135.88759000582255};

  // ストリートビュを作成
  const panorama = new google.maps.StreetViewPanorama(
  document.getElementById("pano"),
  {
    position: tokyoTower,
    pov: {
      heading: 34,
      pitch: 10,
    },
  }
  );

  // 地図にストリートビューを関連付け
  map.setStreetView(panorama);

}

window.onload = initMap;

■実行例

ストリートビューのカスタマイズ

上記のコードでは、那智の滝を中心にストリートビューが表示されます。この基本設定に加えて、ストリートビューのコントロール（UI要素）の表示をカスタマイズすることも可能です。
例えば、ズームコントロールやフルスクリーンコントロールの表示・非表示を設定できます。
次の例では、ズームコントロールを表示し、フルスクリーンコントロールを非表示にします。

■script1.js

function initMap() {

  // 初期の緯度と経度を設定
  var tokyoTower = {lat: 33.675545225521745,lng: 135.88759000582255};

  // ストリートビュを作成
  const panorama = new google.maps.StreetViewPanorama(
  document.getElementById("pano"),
  {
    position: tokyoTower,
    pov: {
      heading: 34,
      pitch: 10,
    },
    zoomControl: true,       // ズームコントロールを表示
    fullscreenControl: false // フルスクリーンコントロールを非表示
  }
  );

  // 地図にストリートビューを関連付け
  map.setStreetView(panorama);

}

window.onload = initMap;

15行目でズームコントロールを表示、16行目でフルスクリーンコントロールを非表示に設定しています。

■実行例

主なコンロールオプション

StreetViewPanoramaのコントロールは、ストリートビューの StreetViewPanoramaOptions 内にある該当のフィールドを true または false に設定して、有効または無効にできます。

オプション 説明
addressControl 関連する場所の住所を示すテキスト オーバーレイと、Google マップでその場所を開くためのリンクを表示します。
fullscreenControl ストリートビューを全画面モードで開くコントロールです。
linksControl 隣接するパノラマ画像に移動するためのガイド矢印を画面上に表示します。
motionTrackingControl モバイル デバイスでモーション トラッキングを有効または無効にするオプションです。
panControl パノラマを回転させるために使用します。このコントロールは、デフォルトでコンパスとパンが統合された標準コントロールとして表示されます。
zoomControl 画像内をズームするために使用します。 
参考：
ストリートビューのコントロール

その他のストリートビュー設定

ストリートビューには他にもさまざまな設定が可能です。例えば、視点（heading）やカメラの傾き（pitch）を設定することで、特定の角度からの風景を表示できます。
以下の例では、視点を90度（東向き）に設定し、カメラの傾きを20度（少し上向き）にしています。目的に応じて、これらの値を変更することで、表示するシーンを細かく調整できます。

■script1.js

function initMap() {

  // 初期の緯度と経度を設定
  var tokyoTower = {lat: 33.675545225521745,lng: 135.88759000582255};

  // ストリートビュを作成
  const panorama = new google.maps.StreetViewPanorama(
  document.getElementById("pano"),
  {
    position: tokyoTower,
    pov: {
      heading: 90,
      pitch: 20,
    },
  }
  );

  // 地図にストリートビューを関連付け
  map.setStreetView(panorama);

}

window.onload = initMap;

■実行例

まとめ

この記事では、Google Maps APIを使ってストリートビューを表示し、コントロールをカスタマイズする方法について説明しました。

タイトルとURLをコピーしました