Google API 第7回

投稿者: | 2015年3月20日
0件のコメント

今回は静的なストリートビュー画像を表示させるGoogle Street View Image APIについて紹介します。

■Google Street View Image APIとは
JavaScriptを使用せずにストリートビュー画像をホームページに埋め込むことができるAPIです。

■Google Street View Image APIの使用方法
Google Street View Image APIにはAPI KEYを使用した方法と使用しない方法があります。

・API KEYを使用する場合
Google Developers Consoleで「Street View Image API」を有効にして
下記のようなURLをimgタグで読み込ませることでストリートビュー画像を表示できます。API KEYを使用するとAPIの使用状況(ストリートビュー画像を何回表示したかの統計)を取得できます。
※API KEYの使用は強く推奨されています。

<img src="http://maps.googleapis.com/maps/api/streetview?location=33.885029,130.8810465&size=300x300&key={API_KEY}" />

keyパラメータにはGoogle Developers Consoleで作成したAPI KEYを割り当てる必要があります。

※Google Developers ConsoleでAPIを有効にする方法とAPI KEYを作成する方法は参考サイトにあるGoogle API 第6回を参照してください。

・API KEYを使用しない場合
下記のようなURLをimgタグで読み込ませることでGoogleマップ画像を表示できます。

<img src="http://maps.googleapis.com/maps/api/streetview?location=33.885029,130.8810465&size=300x300" />

・URLのパラメータについて
URLの必須パラメータは、locationとsizeです。
locationには数値(緯度と経度)または文字列(住所)を使用できます。
数値で「緯度30°経度130°」を指定する場合は「location=30,130」、
文字列で「北九州市小倉北区浅野」を指定する場合は「location=北九州市小倉北区浅野」となります。
sizeには640×640まで設定できます。

下に必須パラメータのみで構成したGoogleマップ画像を表示します。
※下のストリートビュー画像のソースは付録のサンプル１にあります。

その他のパラメータにはsensor、heading、fov、pitchがあります。
sensorはtrueにすることで地図を表示しているユーザーの位置情報を取得することができます。
headingは方位です。0～360まで値を指定できます。(0と360は北、90は東、180は南、270は西を示します。) 方位を指定しない場合はlocationで指定した場所から、最も近い場所で撮影された画像が表示されます。
fovは画像の水平視野です。0～120まで値を指定できます。デフォルト値は90です。値が小さくなるほど詳細な画像が表示されます。
pitchは上下の角度です。-90～90まで値を指定できます。(-90は真下、90は真上を示します。) デフォルト値は0です。

下にheading、fov、pitchを使用したストリートビュー画像を表示します。
(headingを180、fovを60、pitchを45に指定)
※ストリートビュー画像のソースは付録のサンプル２にあります。

以上がGoogle Street View Image APIの使用方法です。
JavaScriptでlocationパラメータを動的に変えて独自のストリートビューを楽しむことができます。またGoogle Maps JavaScript API、Google Static Maps API、Google Street View Image APIを連携させてある地点の地図を色々な角度から見ることができます。

ストリートビュー画像は定期的に更新され、同じ場所や建物でも若干異なる画像になるそうなので現時点での画像が欲しい方は保存することをおすすめします。

次回はGoogle Places APIについて紹介します。

＜参考サイト＞
・Google Street View Image API
・Google API 第6回

＜付録＞
・サンプル１
必須パラメータのみでストリートビュー画像を表示するサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>サンプル１</title>
</head>
<body>
<img src="http://maps.googleapis.com/maps/api/streetview?location=33.885029,130.8810465&size=300x300" />
</body>
</html>

・サンプル２
heding、fov、pitchを指定したサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>サンプル２</title>
</head>
<body>
<img src="http://maps.googleapis.com/maps/api/streetview?location=33.885029,130.8810465&size=300x300&heading=180&fov=60&pitch=45" />
</body>
</html>