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

2017.11.15

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

海の中や宇宙ステーションなど、
着実に範囲を広げ続けている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>

Written by
Shinji Yamamoto

Relative Post

Latest Journal

philosophy | 哲学

philosophy | 哲学

commono
2016.12.19
Vision | 展望

Vision | 展望

commono
2016.12.09
webデザインフロー(1)インサイド→アウト ー理論編ー

webデザインフロー(1)インサイド→アウト ー理論編ー

Shun Uchimura
2017.05.13
オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

Shun Uchimura
2017.05.13
オウンドメディア(2)押さずに、引き込む。

オウンドメディア(2)押さずに、引き込む。

Shun Uchimura
2017.05.13
オウンドメディア(1)受け手主観でオウンドメディアをつくる

オウンドメディア(1)受け手主観でオウンドメディアをつくる

Shun Uchimura
2017.05.13
デザイナーとしてマーケティングを考える(4)4Pのキモを知る

デザイナーとしてマーケティングを考える(4)4Pのキモを知る

Shun Uchimura
2017.05.12
デザイナーとしてマーケティングを考える(3)4Pは古いのか

デザイナーとしてマーケティングを考える(3)4Pは古いのか

Shun Uchimura
2017.05.12
ajaxっぽいスムーズな画面遷移の方法(3/3)

ajaxっぽいスムーズな画面遷移の方法(3/3)

Shinji Yamamoto
2017.12.28
ajaxっぽいスムーズな画面遷移の方法(2/3)

ajaxっぽいスムーズな画面遷移の方法(2/3)

Shinji Yamamoto
2017.11.24
ajaxっぽいスムーズな画面遷移の方法(1/3)

ajaxっぽいスムーズな画面遷移の方法(1/3)

Shinji Yamamoto
2017.11.22
スムーススクロールがうまく動かない場合の解決方法

スムーススクロールがうまく動かない場合の解決方法

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

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

Shinji Yamamoto
2017.11.15
指定の範囲までついてくるフローティングバナー

指定の範囲までついてくるフローティングバナー

Shinji Yamamoto
2017.07.13

View ALL

Contact