ストリートビューの静止画をブログに手作業で貼り付ける方法

前回の記事で、Google Street View Image APIを手作業で呼び出して、ブログに静止画を表示してみました。こんなのたまにしかやらないから手作業でもいいけどやってみたい、という方のため、手作業でできる方法をご紹介します。エディタがあればいいので簡単。なければブログのHTML編集画面でもできるレベルです。

方法

1. 表示するストリートビューを決める
普通にブラウザでGoogle Mapsのストリートビューを表示します。

2. URLをコピーする
ブラウザーのアドレスバーからURLをコピーしてエディタに貼り付けます。これを★とします。以下を例に話を進めますね。大事なのは色付きの4つの部分。

https://www.google.co.jp/maps/
@35.6336405,139.763973,3a,75y,333.41h,116.15t/
data=!3m6!1e1!3m4!1ssYF6u0HI5rzC2nSq99tDGg!2e0!7i13312!8i6656

3. このURLから必要なデータを抜き出す
大事な4つの部分の意味は以下の通りです。この記事の末尾に一覧表でも書いてあります。

「@」の次が緯度経度 --> 35.6336405,139.763973 ...①
「○h」の○がカメラの向き --> 333.41 ...②
「△t」の△が上下の角度 --> 116.15-90 = 26.15 ...③ ここだけ90を引くことに注意！
「□y」の□が画角 --> 75 ...④

4. 次のひな形に当てはめる

<a href="★">
<img border=0"
src="https://maps.googleapis.com/maps/api/streetview?
size=640x427  <--- 最大640x640まで。その範囲で決めてください。
&location=①
&heading=②
&pitch=③
&fov=④"
max-width="100%"></a>

5. 以下のようになる

<a href="https://www.google.co.jp/maps/@35.6336405,139.763973,3a,75y,333.41h,116.15t/data=!3m6!1e1!3m4!1ssYF6u0HI5rzC2nSq99tDGg!2e0!7i13312!8i6656">
<img border=0"
src="https://maps.googleapis.com/maps/api/streetview?
size=640x427
&location=35.6336405,139.763973
&heading=333.41
&pitch=26.15
&fov=75"
max-width="100%"></a>

7. チェック！
念のためsrc="..."の中のurlをブラウザのアドレスバーに入れてみましょう。あれ?何だか画角が狭くなってしまいます。


8. 画角を調整する
そんな時はfov=が画角なのでここを大きくします。大きくすると、より広い範囲を写すことができます。ここでは5割増しくらいにしてみました。最大が120な点には注意してください。

https://maps.googleapis.com/maps/api/streetview?
size=640x427
&location=35.6336405,139.763973
&heading=333.41
&pitch=26.15
&fov=110

9. よければfov=の値を修正する

<a href="https://www.google.co.jp/maps/@35.6336405,139.763973,3a,75y,333.41h,116.15t/data=!3m6!1e1!3m4!1ssYF6u0HI5rzC2nSq99tDGg!2e0!7i13312!8i6656">
<img border=0" src="https://maps.googleapis.com/maps/api/streetview?
size=640x427
&location=35.6336405,139.763973
&heading=333.41
&pitch=26.15
&fov=110"
max-width="100%"></a>

10. APIキーを取得する
以前はここまでで良かったのですが、最近、Street View Image APIを呼び出すにはAPIキーが必要となりました。以下のGoogleの日本語ページにやり方が書いてあるのでその通りに進めます。数ステップなので特に面倒なことはありません。既にkeyを持っている方は、Street View Image APIでも有効になっているかどうか確認しておきましょう。

https://developers.google.com/maps/documentation/static-maps/get-api-key

なお、従量課金にはせずフリーで使うので、ブラウザーキーだけあれば良いです。デジタル署名も推奨されていますが、絶対に従量課金にならないよう、私はブラウザーキーのみにしました。（最初の記事公開で画像が表示されない場合があったのは、このAPIキーがなかったからのようです。）

key=取得したキー(文字列)

※私のブログで使っているキーは、私のブログから呼び出された時のみ有効にしてあります。皆さんのブログでは使えないのでご注意ください。

11. &とAPIキーをsrc="..."の末尾に追加する
単に追加するだけですが、&を忘れないようにしましょう。

<a href="https://www.google.co.jp/maps/@35.6336405,139.763973,3a,75y,333.41h,116.15t/data=!3m6!1e1!3m4!1ssYF6u0HI5rzC2nSq99tDGg!2e0!7i13312!8i6656">
<img border=0" src="https://maps.googleapis.com/maps/api/streetview?
size=640x427
&location=35.6336405,139.763973
&heading=333.4
&pitch=26.15
&fov=110
&key=取得したキー(文字列)"
max-width="100%"></a>

12. ブログ(Blogger.comとか)のHTML編集画面から貼り付けてでき上がり!
どうでしょう、思ったよりは簡単だったのではないでしょうか？え、面倒？まあ確かにそうかもしれませんね。でも1,2回やるとすぐに慣れて意外に短時間でできますから、是非一度試してみてください。基本は4つのパラメータとAPIキーを貼り付けるだけですから。

---

参考情報

Google Street View Image API
https://developers.google.com/maps/documentation/streetview/intro#url_parameters

Google MapsのURLとAPIパラメータの関係

項目	Google Maps URL	Street View Image API
緯度経度	「緯度,経度」で指定。	「location=」に続く「緯度,経度」で指定。
画像サイズ	-	「幅x高さ」︎で指定。 　最大640x640。それ以上は640になる。
カメラの水平方向の向き	「h」の前に0〜360をつけて指定。 　0が北、90が東、180が南、270が西。	「heading=」に続く0〜360で指定。 　0が北、90が東、180が南、270が西。
カメラの垂直方向の向き	︎「t」の前に0〜180をつけて指定。 　真下が0,水平が90,真上が180。 　これだけAPIと違う。90を引いてAPIで使う。	「pitch=」に続く-90〜90で指定。 　-90が真下、90が真上。
カメラの画角(視野)	︎「y」の前に15〜90をつけて指定。 　15が狭く、90が広い	︎「fov=」に続く10〜120で指定。 　10が狭く、120が広い。