Googleストリートビューの自動回転Javascript（streetview auto rotation, google map javascript api）

弊社PC版トップページで表示しておりますが、

「ストリートビューを自動回転させて表示させたい場合、どうやってやるんだ？」

と色々調べていましたが、日本語の解りやすいのが少なく、英語が不得意で非エンジニアの自分が苦労したので書いておきました。ページ下部にGithubに上げたコードを載せています。

回転サンプルはこちら
普通に回転：http://samlife.hippy.jp/vr/sample.php
レイヤーを被せた：http://samlife.hippy.jp/vr/sample2.php

解ってしまえば結構簡単に設置できます。

• head内に下記のコードを貼り付け 

• Google Mapのストリートビューで、表示させたい場所に行き、URLの@の部分の数値を取得し、13行目の「var viewpoint = ****」にコピペ（例：https://www.google.co.jp/maps/@33.8081914,132.7475254,3a,75y,181.81h,100.14t/data=!3m7!1e1!3m5!1sIBwreeuckdoAAAQ1mWVDuQ!2e0!3e2!7i13312!8i6656!6m1!1e1?hl=ja）

• Google Map Javascript APIのkeyを取得（https://developers.google.com/maps/web/） 

• 取得したkeyを、10行目の「key=　」の部分に入力 

• heading,pitch,zoom,回転スピードなどを指定。（何それ？という方はこちらを参照：https://developers.google.com/maps/documentation/javascript/streetview?hl=ja） 

• div id = “pano”とする 

プログラマーの方にはとても簡単なのだと思います。

• heading:回転を始めるスタート地点方向の値で、真北が０真東が90、真南が180といった具合

• pitch: 縦方向の角度。水平が0。上下90°内で指定。例えば少し上を向いた状態で回転させたい時は15とか。少し下を向いて回転したい場合は-15とか。

• zoom：自分は”1″のまんまで試してないので、イジってみてください。

• 31行目の「i += 0.1」の部分で回転スピードを調整。

ぜひ使ってみてください。