contact
commono
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

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

Get in touch

コモノ株式会社は
デザインパートナーです

デザインは課題を解決するまでの手段を設計する事です。
目的にあった最適解を見出し、それに向けて伴走します。
また、ブランディングは長期的な大局を見据えた施策が必要不可欠です。
未来のビジョンを策定し、プランニングをして確実に歩みを進めましょう。
どんなことでも構いませんので、クリエイティブが必要な時にはお声がけください。

  • お電話での問い合わせ

    011 215 8660

    営業時間 10:00-19:00
    (土日祝日除く)

  • フォームでのお問い合わせ

    Contact Form

    2~3営業日以内に折り返します

  • 資料ダウンロード

    Coming soon