Javascript APIでのストリートビュー実装方法

まずはAPIキーを取得

まず、最初にGoogle MAPのAPIを利用するにはAPIキーが必須なので、
マップAPIのドキュメントの右上のボタンや、APIキーの取得を解説したこちらのページからAPIキーを取得します。
※なお、マップAPIのドキュメントのページには「価格とプラン」というボタンもありますが、
2017年11月15日現在、自由に閲覧できるウェブサイトに埋め込むという用途の場合は、
１日あたり最大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 という２つに挟まれた部分、
この例で行けば「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>