Google Maps JavaScript APIを見ていたら、下記の２つを組み合わせるだけで割と簡単にPhotoSphere(StreetView)のPhotoIDを取得出来そうなので作成してみました。※Version 0.50
使い方
- getPhotoIDを開く ※?lat=mmm&lng=nnn 形式で緯度・経度をオプション指定可能です。
- 地図をドラッグするか、locationに場所を入力して検索してください。
- ペグマンを地図上にドロップしてPhotoSphere(Street View)を開いてください。
- PhotoSphereをドラッグして表示する向きを合わせます。
- 下記の形式にPhotoID、Heading、Pitchを入力します。
リンク形式
https//junk0128-tools.appspot.com/sphere/index.html?pId=[PohotoID]&heading=[Heading]&pitch=[pitch]&width=640&height=640
埋め込み
<iframe style="margin: 10px" height="640" marginheight="0" src="https//junk0128-tools.appspot.com/sphere/index.html?pId=[PohotoID]&heading=[Heading]&pitch=[pitch]&width=640&height=640" frameborder="0" width="640" marginwidth="0" scrolling="no"> </iframe>
ふぁんトント G+さんへ(p.s. 2016/05/17)
- 下記のように権利帰属（Googleとデータ提供者）を明確に表示するように埋め込みコードのパラメータを設定してください。これはGoogle使用許諾・Google マップ、Google Earth、ストリートビューの使用の一般的なガイドラインに書いてあります。※htmlやcssコード等で権利帰属を隠してはダメです。
- 埋め込みコードはGAEのサービスを使用しています。無料の範囲内で使用していますので、商用や過度なアクセスがある場合は制限やコードの削除を行います。また自己都合でコードを書き換えたり削除することもあり得ますので、その点はご承知おきください。※随時アクセス解析しています
こんにちわ。はじめまして。
返信削除大変参考になる記事を読ませていただきありがとうございました。
こちらで公開されているgetPhotoIDのツールで取得したコードを使わせていただいてもよろしいでしょうか？ 何か条件があればお教えください。
他にも方法があるようですが、Mobile端末からだとグレーアウトして使えません。また、Pano Walksのコードも試してみましたが、ちょっと目が回る。。。
いちおう、次のサイトの最下部に貼り付けてテストしています。サイズがちょっと合わず四苦八苦していますが。。。
使用不可ということであれば、すぐに削除いたしますので、よろしくお願いいたします。
http://juantonto.wpblog.jp/localguides-meetup1/
ふぁんトント G+さんへ
返信削除コメント欄には書きにくかった部分は本文中に追記しました。「サイズがちょっと合わず四苦八苦」の部分が良く分かりませんが、wpblogでiframeは制限無く使えるのでしょうか？ クエリーの文字列が書き換わっていませんか？
それと4月28日の記事でGoogleマップの埋め込みコードを使用されているようですが、これでは駄目な理由が何かあるのでしたら教えてください。
junk0128さま
返信削除いろいろとお手数をおかけして申し訳ございません。当方のブログはWordpressなのでiframeタグに制限はないと思いますが、レスポンシブ関連のcssが影響していると思います。いろいろ弄りました（元に戻せません）。
コチラに貼っていただいたコードをそのまま貼り付けたところ、あともう少しで表示されるまでになっています。パラメーターを最適値に合わすのが四苦八苦というワケです。
>>4月28日の記事でGoogleマップの埋め込みコードを使用されているようですが、これでは駄目な理由が何かあるのでしたら教えてください。
この件ですが、上記の記事にはGoogleマップが提供するコードを使用しています。しかし、「みはらし広場」のような単品の360°パノラマを埋め込みで表示させたいというのが理由です。コチラで貼られているものは、この方法だとモバイルでも表示できるので、何が違うのかなと不思議に思っています。（理解できないだけですが。。。）
class="youtube-container"の中にiframeが入っているので何かYouTube用のプラグインか何かを流用されているのかと思いました。"&"が"&"だけになっていてパラメータを受け取れないのでサイズ変更が機能しない状態でした。
返信削除後で気付いたのですが、4/28のはストリートビューエディタで作成されたストリートビューですよね？ panoramaIDの違いでGoogleマップの埋め込みコードの有りなしが決まるようです。
半角で書いたら文字が抜けました。全角で書いてみます。
返信削除「”＆ａｍｐ；”が”＆”だけになっていて」です。
訂正です。”＆ａｍｐ；”の件は無視してください。Google Chromeに付属のデベロッパーツールで見ていたので私の勘違いです。
返信削除おはようございます。
返信削除大変お手数をおかけして申し訳ございませんでした。
結局、以下のツール（こちらで紹介されていたモノ）で埋め込むことにしました。
http://suddenlink.net/popenoe/tools/embedding-tool.htm
コレの問題点は、iOS端末のMobile Safariなどモバイルサイトで表示させると、グレーアウトするということですが、PCサイトでは問題ありません。また、Mobile板Google Chromeで「PC板サイトをリクエスト」することで、レスポンシブが有効のまま表示させることができました。
当面はグレーアウト対策はPCサイトへ誘導し、そのうちまとめ記事でも作って、Google Chromeへ誘導しようかと思っています。
追記）
一脚を使用しての撮影を紹介されていたので、早速やってみました。手軽だし山歩きにも負担が少ないので、今後は一脚撮影で腕を磨こうと思っています。。。（笑）
結局上手くサイズ合わせが出来なかったのでしょうか？
返信削除widthとheightを書き換えるだけで良いはずなんですけど。書き換えるのが2組あるので、別途iframeのwidthとheightだけで済み版を作成してみました。
iOS端末は持っていないので動作確認は出来ませんが、android 6.0(Nexus7)chromeで確認しています。
suddenlinkさんのは地図を動かすのが面倒なので場所を検索出来るように自作しました。初期値の場所もパラメータで変更可能です。この点では使い勝手がいいはずです。後はお好きな方をお使いください。ちなみに私は別途テンプレートを作っておいてpanoramaID等を書き換えて埋め込んでいます。
Googleカメラのアプリ最新版では完全手持ちや一脚使用でも結構うまくつないでくれます。手軽になりましたね。
重ね重ねありがとうございます。
削除サイズ合わせは何とかクリアしましたが、レスポンシブに対応できないのか、モバイルで確認すると溢れてしまいました。Bloggerでも同様だったのでテンプレートのcssに起因しないかもしれません。
iOS端末はiPhone5c iOS8.4、モバイル版safariでは、PCサイトをリクエストできないのが難点です。この点、iOS版、Android版のGoogle Chromeだと回避できました。
さきほどアップしたBloggerの記事にもsuddenlinkさんのコードで埋め込みました。これで、また撮影のモチベが上がりそうです。
src="https://junk0128-tools.appspot.com/sphere/index.htmlの"sphere"を"sphere2"に書き換えるとiframeの中に100%で表示するように変わります。これでレスポンシブ対応になるのかはわかりません。allowfullscreenが必要？
削除ここの記事中の「みはらし休憩所」に全画面表示ボタンを追加しました。埋め込んだ画面の右上です。
削除スマホ画面で右側にはみ出ている時はブログタイトル部分で右側にズラしておかないとタップ出来ないかも？
もうひとつ画面左上の「Googleマップで見る」をタップする方法もあります。但し既定のアプリ設定で動作が変わるのが面倒です。