ストリートビューのAPI（京都散策のサンプル）

(2008-08-15)『Googleマップ上でストリートビュー対応の道を青色ハイライト表示する（GStreetviewOverlay）』を追記しました

先日、Google Mapsのストリートビュー日本版が公開されたところですが、早速Google Maps APIを用いてストリートビューをいじってみました。ストリートビュー関連APIを使ったサンプルアプリケーションを紹介した上で、APIの使い方について説明します。

サンプルアプリケーション（京都散策 by Google Maps Street View）

京都散策 by Google Maps Street View

Google Maps APIのストリートビュー関連の機能を使ったサンプルアプリケーションを作成してみました。京都市内を勝手に歩き回ります。分かれ道まで来るとランダムにルートを選んで進んで行きます。

（自動散策プログラムを自分のサイトに埋め込めるようになりました。初期位置を指定してストリートビューで自動散策します。）

ストリートビューのAPIの使い方

Google Maps APIリファレンス日本語版にはまだストリートビュー関連機能は掲載されていないようです。英語版であれば、こちらにリファレンスがあります。これを見ながらいくつかの機能を触ってみたので紹介します。

ストリートビュー関連機能を使うには、まずGoogle Maps APIのキーを取得する必要があります。すでにGoogle Maps APIのキーを持っている人はそのまま使うことができます。

ストリートビューを表示する一番簡単なソースは次のようになります。（実行結果はこちら）

streetviewsample.js

function load() {
	// 初期位置の緯度、経度からGLatLngオブジェクトを生成。
	var startingPosition = new GLatLng(35.003277,135.774991);
	
	// Google Street Viewに渡すオプションを生成（この例では初期位置のみ）。
	panoramaOptions = {latlng:tartingPosition};
	
	// Google Street Viewを表示するGStreetviewPanoramaオブジェクトの生成。
	//   第1引数:Google Street Viewを埋め込むHTML要素（この例ではidをstreetviewerにした）。
	//   第2引数:Google Street Viewに渡すオプションを生成（この例では初期位置のみ）。
	var panorama = new GStreetviewPanorama(
		document.getElementById("streetviewer"),panoramaOptions
		);
	
	// エラー処理のためにリスナーを追加（handleNoFlashに関しては後で定義）。	
	GEvent.addListener(panorama,"error",handleNoFlash);
}

// Flash Playerを検出できない場合の処理用関数。
function handleNoFlash(errorCode) {
	if (errorCode == FLASH_UNAVAILABLE) {
		alert("Error:Flash Playerをインストールして下さい。");
		return;
	}
}

streetviewsample.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Street View Sample of Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=(取得したGoogle Maps APIのキー)"
	type="text/javascript"></script>
<script src="streetviewsample.js" type="text/javascript"></script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="streetviewer" style="width:800px; height:450px;"></div>
</body>
</html>

視線方向を決める（GPov）

ストリートビューはぐりぐりと視線方向を回転させられるのが売りの一つですが、その視線方向を設定するためのクラスがGPovです（厳密には方向だけでなく、ズームの度合いも扱う）。

GPovクラス

プロパティ	型	解説
yaw	Number	水平方向の角度。0〜360度で設定。0が北、90が東、180が南、270が西。
pitch	Number	上下方向の角度。-90〜90度で設定。-90が真上、0が水平、90が真下。
zoom	Number	ズーム。0以上の値を設定。0は最も引いた状態。

GPovには上記のように、yaw、pitch、zoomの三つのパラメータがあります。

GPovにはyaw、pitch、zoomを設定するメソッドがないので、次のように直接パラメータを設定します。

var pointOfView = new Object(); // GPovにはコンストラクタがない。
pointOfView.yaw = 180; // 0〜360度で設定。0が北、90が東、180が南、270が西。
pointOfView.pitch = 90; // -90〜90度で設定。-90が真上、0が水平、90が真下。
pointOfView.zoom = 0; // 0以上の値を設定。0は最も引いた状態。

上記のプログラムはオブジェクトリテラルを用いて次のようにも書けます（この方法で書く方が一般的）。

var pointOfView = {yaw:80, pitch:0, zoom:};

GPovの使い方

GPovを初期状態で渡すには次のようにします。

// GPovの作成。
var pointOfView = {yaw:180, pitch:90, zoom:};

// 初期位置の緯度、経度からGLatLngオブジェクトを生成。
var startingPosition = new GLatLng(35.003277, 135.774991);

// Google Street Viewに渡すオプションを生成（povにGPovを渡すと初期視点方向を設定）。
panoramaOptions = {latlng:tartingPosition, pov:ointOfView};

// Google Street Viewを表示するGStreetviewPanoramaオブジェクトの生成。
//   第1引数:Google Street Viewを埋め込むHTML要素（この例ではidをstreetviewerにした）。
//   第2引数:Google Street Viewに渡すオプションを生成（この例では初期位置のみ）。
var panorama = new GStreetviewPanorama(
	document.getElementById("streetviewer"),panoramaOptions
);

後から視線方向を変えるにはGStreetviewPanorama#setPOVメソッドを使います。

// GStreetviewPanorama#setPOVメソッドにGPovを引数として渡す。
panorama.setPov(pointOfView);

setPOVでは不連続的にそちらの方向に視線が切り替わりわすが、突然そっちの方向を向くのではなく滑らかに連続的に視線方向を変化させたい場合はGStreetviewPanorama#panToメソッドを使います。

// GStreetviewPanorama#panToメソッドにGPovを引数として渡す。
panorama.panTo(pointOfView);

また、GStreetviewPanorama#getPOVメソッドで、現在の視線方向をGPovとして取得することができます。

// GStreetviewPanorama#getPovメソッドでGPovを取得。
var pov = panorama.getPOV();

※リファレンスではGPovのpitchの上と下が逆に書かれているようです。↓のようになっていますが、試してみると-90が上、90が下でした。

pitch

The camera pitch in degrees,relative to the street view vehicle. Ranges from 90 degrees (directly upwards) to -90 degrees (directly downwards). (Since 2.104)
http://code.google.com/apis/maps/documentation/reference.html#GPov

現在位置を取得する（initializedイベント）

現在位置を取得する方法は意外と難しいです。GStreetviewPanorama#getLocationメソッドみたいなものがあればいいのですが、そんなメソッドはありません。そこで、GStreetviewPanoramaのinitializedイベントを使うことになります。initializedイベントは、その位置への移動が完了し初期化されたときに呼び出されるイベントです。

initializedイベントを用いると、現在位置の緯度、経度をGLatLngで、その場所のID（panoIdと呼ばれる。すべてのストリートビューの位置に振られている固有のID）を取得することができます。

// initializedイベントのハンドラを作成。
function handleInitialization(location) {
	// ここに処理を書く。
	//locationから、現在位置のGLatLngや、panoIdを取得することができる。
	
	// 例:現在位置の取得
	var latlng = location.latlng;
	
	// 例:panoIdの取得
	var panoId = location.panoId;
}

// initializedイベントを追加。
GEvent.addListener(panorama,"initialized",handleInitialization);

なお、このとき得られるlocationはGStreetviewLocationオブジェクトで、GStreetviewDataは次のような値を持ちます。

GStreetviewLocationクラス

プロパティ	型	解説
latlng	GLatLng	緯度、経度による位置。
pov	GPov	視線方向。
description	String	その地点に関する説明。
panoId	String	その地点を表すID。

(2008-08-11追記)

initializedイベントは、道をたどって移動した場合（followLinkメソッドを含む）にだけ起こるようです。ユーザーが進む道の矢印をクリックして進んだときや、GStreetviewPanorama#followLinkメソッド（↓で説明）によって移動したときには起こりますが、GStreetviewPanoramaオブジェクト生成時（初回）やGStreetviewPanorama#setLocationAndPOVメソッド（↓で説明）で位置を指定したときには、新しい場所が表示されてもinitializedイベントは起こりません。

この仕様は現在見直しが検討されており、将来的にはGStreetviewPanoramaオブジェクト生成時にもinitializedイベントが起こるようになるかもしれません。

This event is fired when the panorama is initialized after moving to a new location. The location is a GStreetviewLocation object. Note: the initialized event is not sent when the panorama is first rendered; this is a known issue and we plan to fix this in a future release. (Since 2.104)
http://code.google.com/apis/maps/documentation/reference.html#GStreetviewPanorama

移動する（setLocationAndPOV, followLink）

緯度、経度で移動先を指定するにはGStreetviewPanorama#setLocationAndPOVメソッドを使います。

// GStreetviewPanorama#setLocationAndPOV
//  第1引数(GLatLng):移動先の緯度、経度
//  第2引数(GPov):視線方向（省略化）
panorama.setLocationAndPOV(new GLatLng(35.003277,135.774991),pointOfView);

また、現在地点から道をたどって移動するにはGStreetviewPanorama#followLinkメソッドを使います。followLinkメソッドの引数はyawだけで、指定されたyaw方向に最も近い道を選んでその道を進みます（現在位置から進める道（移動方向のyawや移動先のpanoId）を得るには、GStreetviewClientとGStreetviewDataを使用）。

// GStreetviewPanorama#followLink
//  第1引数(Number):0〜360で表す移動方向（北:,東:0,南:80,西:70）
panorama.followLink(90);

Googleマップ上でストリートビュー対応の道を青色ハイライト表示する（GStreetviewOverlay）

Googleマップでストリートビューを使うと、ストリートビュー対応範囲が青色にハイライトされて表示されます。この対応範囲の青色ハイライトを行うにはGStreetviewOverlayを使います。単純に、GMap2#addOverlayの引数にGStreetviewOverlayオブジェクトを渡すだけでハイライト表示されます。

// GMap2オブジェクトが変数mapに格納されているとする。
map.addOverlay(new GStreetviewOverlay());

ある地点から進める道を取得する（GStreetviewClient, GStreetviewData）

GStreetviewClientとGStreetviewDataを用いて進める道を取得する方法に関しては後日書く予定。

プログラマはサイコロを振らない