MENU

Journal

海の中や宇宙ステーションなど、
着実に範囲を広げ続けているGoogleストリートビュー。
サイトに埋め込もうという時、
iframeで埋め込むのが一番簡単ではあるのですが、
機会があって調べてみると、
Google Maps JavaScript APIを使った実装では
表示内容をカスタマイズできるということがわかったのでメモ。

まずはAPIキーを取得

まず、最初にGoogle MAPのAPIを利用するにはAPIキーが必須なので、
マップAPIのドキュメントの右上のボタンや、APIキーの取得を解説したこちらのページからAPIキーを取得します。

※なお、マップAPIのドキュメントのページには「価格とプラン」というボタンもありますが、
2017年11月15日現在、自由に閲覧できるウェブサイトに埋め込むという用途の場合は、
1日あたり最大25,000回までは無料で表示できるようです。

目的の場所の緯度経度、もしくはパノラマIDを取得

さて続いては、目的地の指定ですが
通常は緯度経度を指定に用いるので、
取得の流れとしては

  1. Google MAPで目的地を検索
  2. 目的地を右クリックして「この場所について」を選択
  3. 表示される緯度経度をメモ

という方法で取得する事ができます。

ただし、時折、同じ緯度経度に別のストリートビューが存在していて、
「こっちを使いたいんだけど。。」という場合があるかと思います。
その場合は、緯度経度と別に、ストリートビューのパノラマ画像に個別にしてされている、
パノラマIDを用いることで解決することができます。

パノラマIDの取得は表示中の画像のパノラマIDを取得することのできる
getPano()を用いて行なうことができますが、
MAP Apiのドキュメントのサンプル
一度別のスクリプトを書いて取得する必要があり、若干の二度手間感が否めないので、
別の方法がStackOverflowの記事になっていたので、
Google側の仕様が変わった場合に使えなくなる可能性もありますが、ご紹介すると、
ストリートビューをブラウザで表示したときのURLに含まれているパノラマIDを抜き出すという方法で、
例えば、下は札幌の旧北海道庁付近のストリートビューのURLですが、
https://www.google.co.jp/maps/@43.0640885,141.3490879,2a,75y,261.52h,99.41t/data=!3m6!1e1!3m4!1sexi70XCL_nhFHUNqrw45OQ!2e0!7i13312!8i6656?dcr=0
この中の !1s !2e という2つに挟まれた部分、
この例で行けば「exi70XCL_nhFHUNqrw45OQ」という文字列がパノラマIDになります。
この方法だとGoogle MAPで目的の場所を探して、
ロケーションバーからURLを確認し、すぐに指定できるので、
手間が少なく済むかと思います。

いざ表示

ここまでくれば表示するのは簡単です。
下記のコードのYOUR_API_KEYは先ほど取得したAPIキーを入れて下さい。
また、緯度経度の場合とパノラマIDの場合はストリートビューのパノラマを作成する際の
オプションの渡し方が少し違うので、両方併記します。
※CSSは省略してます(#mapに各自サイズを指定してください)

  <div id="map"></div>
  <script>
  function initPano() {
    var latLng = { lat: 緯度, lng: 経度 }; //取得した緯度経度
    var panoID = 'パノラマID';// 取得したパノラマID
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('map'), {
          // 実装方法に応じて下記のどちらか一方のフィールドを使って下さい
          position: latLng, // 緯度経度で実装の場合はこちら
          pano: panoID, // パノラマIDの場合はこちら
        });
  }
  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initPano">
  </script>
  

オプションいろいろ

さて、iFrameで埋め込むのに比べて、
手間がかかるJSでの実装ですが、
JSでの実装ではオプションを色々と指定することができます。
デフォルトの視点の角度(POV)を変更できる他、
下記の例ではデフォルトで表示される色々なコントロールを非表示にしています。
また、各種コントロールのボタンの位置や外観も変更できるようですので、
詳しくは公式ドキュメントをご覧になってください。

  <div id="map"></div>
  <script>
  function initPano() {
    var latLng = { lat: 緯度, lng: 経度 }; //取得した緯度経度
    var panoID = 'パノラマID';// 取得したパノラマID
    var povSetting = {
      // 視点(POV)情報のセッティング
      heading : 90 , // 真北を基準としたカメラの回転角、時計回りで90が東
      pitch : 25 // デフォルトの角度を0とした上下の角度、真上が90で真下は-90
    }
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('map'), {
          // 実装方法に応じて下記のどちらか一方のフィールドを使って下さい
          position: latLng, // 緯度経度で実装の場合はこちら
          pano: panoID, // パノラマIDの場合はこちら

          pov: povSetting, // 視点情報

          panControl: false, // パノラマの回転
          zoomControl: false, // パノラマのズーム
          addressControl: false, // 関連する場所の住所を示すテキスト オーバーレイ
          fullScreenControl: false, // 全画面モードでストリートビューを開くオプション
          motionTrackingControl: false, // モバイル端末上でモーショントラッキングを有効または無効にするオプション
          linksControl: false, // 隣接するパノラマ画像に移動するためのガイド矢印
          enableCloseButton: false, // ストリートビューのビューアを閉じるボタン
        });
  }
  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initPano">
  </script>
  

Journal

CLOSE