Google Street View Image APIを使って、Googleストリートビューで撮影された、その住所での写真をWebサイト上に表示する方法
この記事は2015年時点での情報です。
こんにちは。コワーキングスペース7Fの星野邦敏です。
2015年1月1日になりました。あけましておめでとうございます。今年もコワーキングスペース7Fをよろしくお願い致します。
さて、新年のネタでも何でも無いのですが、Webサイトを作る時に、例えば、アクセスマップなどで、会社住所の外観を表示させたり、その住所の場所の写真が必要になることがあると思います。自分がその場所によく行くのならば撮影することもできますが、道を歩いている人がいたり車のナンバーが写っていたりしたら配慮する必要があり、撮影が大変な時もあります。この時、Google Street View Image APIを使えば、自分で撮影する必要がなく、さらに、Googleストリートビューに委ねることになりますが人や車のナンバーにはモザイク処理がされていてその問題は基本的にはクリアされているという認識です。
また、そもそも、例えば観光名所のポータルサイトを作る場合等その場所に行く機会が無いけどその住所の写真を表示させることが複数のページで必要になる場合もあると思います。
このように、Google Street View Image APIは、Googleストリートビューに任されますので、今の時点の写真を常に表示させたい場合には不向きですが、Googleストリートビューが更新されるたびに、自分のWebサイトに表示される写真も更新されますので、自動的にその時の前後の写真を表示させたい場合には向いています。
すなわち、
Google Street View Image API – Google Maps Image API — Google Developers
https://developers.google.com/maps/documentation/streetview/?hl=ja
を使うと、Googleストリートビューで撮影された、その住所での写真をWebサイト上に表示することができて、便利です。
ちなみに、このコワーキングスペース7Fの
アクセス | コワーキングスペース7F
に載せているコワーキングスペース7Fの入っている銀座ビルの外観の以下の写真も、Google Street View Image APIを使っています。
具体的な実装方法は、Google Street View Image API – Google Maps Image API — Google Developersにもありますが、以下の通りです。
まず、完成形は、以下のような感じです。
<br> <img src="http://maps.googleapis.com/maps/api/streetview?size=640x640&location=35.907696,139.625015&heading=260&fov=80&pitch=25&sensor=falsee" /><br>
（１）パラメータを確認する。
ストリートビュー画像のリクエストは、以下のURLとなりますので、このURLの後ろに繋げていくのがAPIの使い方となります。パラメータは、「&」で繋げます。
<br> http://maps.googleapis.com/maps/api/streetview?<br>
（２）画像サイズを指定する。
「size=640×640」というような形で画像を指定します。サイズの指定形式は[width]x[height]です。たとえば、size=600×450は、幅が600pxで高さが450pxの画像を表示します。
（３）住所を緯度経度で指定する。
「location=35.907696,139.625015」というような形で、表示する住所（緯度経度）を指定します。
この緯度経度は、住所を入力すると緯度経度に変換してくれる無料のWebサービスがありますが、今回はGoogleストリートビューから表示されるわけですので、実際のGoogleストリートビューを見ながら、GoogleマップのURLの緯度経度の数字を持ってきた方が、スムーズだと思います。
（４）カメラの方位を指定する。
「heading=260」というような形で、表示する方向を指定します。指定できる値は0～360です（0と360 は北、90は東、180は南、270は西が、それぞれ表示されます）。これは、表示させたい物が１つで、それが建物である場合には、ある程度の手動で確認するのが一番早いかもしれません。
heading=0、コワーキングスペース7Fの入っている大宮の銀座ビルの前の道路から、北向きの撮影
heading=90、東向きの撮影、ちょうど目の前の大宮ラクーンが工事中の時でしょうか。
heading=180、南向きの撮影、大宮駅方面ですね。
heading=270、西向きの撮影
コワーキングスペース7Fは西向きでしたが、少し調整するために、「heading=270」ではなくて「heading=260」にしました。
（５）カメラのズームを指定する。
「fov=80」というような形で、カメラのズームを指定します。値は0～120。0が最もズームした値です。デフォルトは90です。
fov=90、これが標準です。
fov=120、引いた写真になる感じですね。
fov=0、一番ズームした写真。ビルの窓が写っているのですが、もはや何の写真か分からないですね。
コワーキングスペース7Fのアクセスページでは、ちょっとズームにして、fov=80としました。
（６）カメラの上下の角度を指定する。
「&pitch=25」というような形で、カメラの上下の角度を指定します。値は-90（真下）～90（真上）までです。
pitch=90、真上で空が写っていますね。
pitch=0、平行な感じです。
pitch=-90、道路が写っています。これを使う用途が分からないのですが（道路に写っている何かを載せたい時ですかね？）、Googleストリートビューの撮影の時に360度全部撮影しているということで、凄いなと思いました。
コワーキングスペース7Fのアクセスページでは、銀座ビルの7階に入っていることもあり、ちょっと上を見る角度ということで、pitch=25としました。
（７）リクエストで送信する場所が、場所センサー（GPS など）を使用してデバイスから取得したものかどうかを指定する。
必須パラメータということで最後に必ず付ける必要があるのですが、Webサイトに表示する場合でしたら「sensor=falsee」で良いかと思います。
これらのパラメータを「&」で繋げて、
<br> http://maps.googleapis.com/maps/api/streetview?size=640x640&location=35.907696,139.625015&heading=260&fov=80&pitch=25&sensor=falsee<br>
となり、完成です。
これで、Google Street View Image APIのURLは生成できましたので、あとはHTMLのimgタグで画像を表示させる形となります。
<br> <img src="http://maps.googleapis.com/maps/api/streetview?size=640x640&location=35.907696,139.625015&heading=260&fov=80&pitch=25&sensor=falsee" /><br>
以上となります。
多くのWebサービスでAPIが公開されていますが、Googleも多くのWeb APIを公開しています。Googleが公開しているAPIで有名なところだと、Google Maps APIやYouTube APIでしょうか。他にもGoogleが提供しているアクセス解析ツールのGoogle AnalyticsのAPIなどもあります。
これらを組み合わせると色々なWebサービスが自分で作れるようになると思いますが、まずはプログラムが分からなくても利用できるAPIとしても、今回は、Google Street View Image APIをご紹介しました。
コワーキングスペース7Fでも、オープン当初はこれらのAPIを使う講座や勉強会などをよく開いていたのですが、最近は利用者増加に伴い、私達主催のイベントや勉強会は控える部分もありました。会議室部分の棚を片したりして少し広くなりましたので、そのスペースを使うなどして、3年目の今年、また以前のように、このようなWebサービスを作る講座やもくもく会を、開催していきたいと思っています。空間運営はコワーキングスペース7Fに関しましては陽子店長が入ったこと等によって落ち着きましたし、私は私でもともと趣味でもあり今は仕事でもあるIT関係や起業関係やビジネス関係のイベントや勉強会をコワーキングスペース7Fの一利用者としての立場としても主催していきたいと考えています。
今年のコワーキングスペース7Fもどうぞよろしくお願い致します！
