Google Maps API でストリートビューを表示する方法

8月5日に公開されたGoogleマップ・ストリートビューですが、すでに Google Maps API にも実装されています。

ドキュメント：Services - Google Maps API - Google Code

上記のリンクにサンプル付きのドキュメントがあり、必要最低限のことはすべて説明されていますが、個人メモを兼ねて焼き直しします。

ストリートビューに関しても、APIプログラミングでは従来通り、緯度と経度の情報を基本とします。

/**
 * 渋谷ハチ公前のストリートビューを <div id="pano">〜</div> （id名pano）に表示する例
 * http://code.google.com/apis/maps/documentation/services.html#Streetview  の例と同等
 * ストリートビューは GStreetviewPanorama というオブジェクトを使用します。
 */
var streetViewId = "pano";// ストリートビューを表示するHTMLのid名
var targetPoint  = new GLatLng(35.65908, 139.700709);// 渋谷ハチ公前をターゲット地点に設定
panoramaOptions  = { latlng:targetPoint };
myPano = new GStreetviewPanorama(document.getElementById(streetViewId), panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
    
function handleNoFlash(errorCode) {
  if (errorCode == FLASH_UNAVAILABLE) {
    document.getElementById(streetViewId).innerHTML = '<p style="color:red;">お使いのブラウザがFlashに対応していないためGoogleマップ・ストリートビューを表示できません。</p>';
    return;
  }
}

公式ドキュメントなのでコピペで済むかと思いましたが、handleNoFlash 関数が不十分みたいです。handleNoFlash という関数名からわかるように、フラッシュをサポートしていないブラウザに対するエラー処理でしかありません。

（もっともよく発生する）ストリートビュー未対応地域のエラー処理がなされていません。そのため未対応地域では何も表示されなくなってしまい、コンテンツがあるのかないのかすら、ユーザーにはわらなくなってしまいます。そこで、以下の処理を加えます。

var streetViewId = "pano";// ストリートビューを表示するHTMLのid名
var targetPoint  = new GLatLng(35.65908, 139.700709);// 渋谷ハチ公前をターゲット地点に設定
panoramaOptions  = { latlng:targetPoint };
myPano = new GStreetviewPanorama(document.getElementById(streetViewId), panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
    
function handleNoFlash(errorCode) {
  if (errorCode == 600) {// 未対応エリアのエラー処理
    document.getElementById(myStreetViewId).innerHTML = '<p style="color:red;">Googleマップ・ストリートビュー未対応地域です。</p>';
    return;
  }
  if (errorCode == FLASH_UNAVAILABLE) {
    document.getElementById(streetViewId).innerHTML = '<p style="color:red;">お使いのブラウザがFlashに対応していないためGoogleマップ・ストリートビューを表示できません。</p>';
    return;
  }
}

// --- 後書 --- //
// ※関数名が機能を正確に表現していないので、handlePanoramaError 等に変更した方がベター
// ※１関数１機能にした方が一般的には良いソースコードになるが、この程度の規模ならif文で・・・。（統一エラーハンドラーにテキトーに投げる実装の方が良いときも多いし・・・ケースバイケース ）
// --- 後書 --- //

600というマジックナンバーが気持ち悪いですが、一応、ユーザーに見せることができる、ということで（完）

※追記
調べたところ、以下の2種類のエラー定数（マジックナンバー）が定義されているようなので、追記します。
http://code.google.com/apis/maps/documentation/reference.html#GStreetviewPanorama.ErrorValues

・NO_NEARBY_PANO (600) ：ストリートビューのデータがないとき
・FLASH_UNAVAILABLE (603) ：ブラウザのフラッシュ対応が不十分なとき

【ポイント】
・GStreetviewPanorama ：オブジェクト
・GStreetviewOverlay ：オブジェクト
・NO_NEARBY_PANO (600) ：エラー定数/マジックナンバー
・FLASH_UNAVAILABLE (603)：エラー定数/マジックナンバー
・Services - Google Maps API - Google Code：ドキュメント

【Google Maps API を使ったストリートビューの実例】

・カラオケの鉄人新宿コマ劇場前店アクセス&地図
※ 2008-08-06日現在の実例です。真夜中ナビの本コンテンツなので、改変する可能性があります。

【PR】

2次会のため遅くまで営業しているお店を探したい、終電を逃してしまった！！というときにご活用頂ければ幸いです。
・真夜中ナビ深夜営業・24時間営業のお店探し
・真夜中ナビ深夜営業・24時間営業のお店探しモバイル