Google ストリートビューは、対象地域全体について、指定された道路からの 360 度のパノラマビューを提供します。
この動画では、ストリートビュー サービスを使って、地図上の住所をユーザーが仮想訪問できるようにし、ユーザーの目的地や関心のある場所について意味のある情報を提供する方法を説明しています。
Google Maps Android API v2 の対象地域は、Android デバイスの Google マップ アプリの対象地域と同じです。ストリートビューの詳細や、インタラクティブ マップでサポートされる地域については、ストリートビューについてをご覧ください。
StreetViewPanorama
クラスは、アプリケーションでストリートビュー パノラマをモデル化します。アプリケーションの UI 内では、パノラマは StreetViewPanoramaFragment
または StreetViewPanoramaView
のオブジェクトで表されます。
コードサンプル
GitHub の ApiDemos リポジトリには、ストリートビューの使い方を示すサンプルが含まれています。
Kotlin サンプル:
- StreetViewPanoramaBasicDemoActivity: ストリートビューの基本的な使い方
- StreetViewPanoramaEventsDemoActivity: イベントのリッスン
- StreetViewPanoramaNavigationDemoActivity: ストリートビュー パノラマのプログラマティックな制御
- StreetViewPanoramaOptionsDemoActivity: UI と操作のオプションの変更
- StreetViewPanoramaViewDemoActivity:(Fragment ではなく)
StreetViewPanoramaView
の使用 - SplitStreetViewPanoramaAndMapDemoActivity: ストリートビューと地図を表示するアクティビティの使用
Java サンプル:
- StreetViewPanoramaBasicDemoActivity: ストリートビューの基本的な使い方
- StreetViewPanoramaEventsDemoActivity: イベントのリッスン
- StreetViewPanoramaNavigationDemoActivity: ストリートビュー パノラマのプログラマティックな制御
- StreetViewPanoramaOptionsDemoActivity: UI と操作のオプションの変更
- StreetViewPanoramaViewDemoActivity:(Fragment ではなく)
StreetViewPanoramaView
の使用 - SplitStreetViewPanoramaAndMapDemoActivity: ストリートビューと地図を表示するアクティビティの作成
Maps SDK for Android のストリートビューの概要
Maps SDK for Android には、Google ストリートビューで使用される画像を取得および操作するためのストリートビュー サービスが用意されています。画像はパノラマとして返されます。
各ストリートビュー パノラマは、単一地点からの 360 度ビューを提供する 1 枚の画像または画像のセットです。画像は正距円筒図法(Plate Carrée 図法)に準拠し、360 度の水平ビュー(周囲全体)と 180 度の垂直ビュー(真上から真下)を含みます。生成される 360 度パノラマ画像は、球体の 2 次元表面を包む画像により、その球体に対する投影を定義します。
StreetViewPanorama
では、カメラが中央に配置された、パノラマ画像を球体としてレンダリングするビューアを提供します。StreetViewPanoramaCamera
を操作してズームやカメラの向き(チルトと方向指定)を制御できます。
使ってみる
プロジェクトを設定する
スタートガイドに沿って、Maps SDK for Android プロジェクトを設定します。
パノラマを追加する前にストリートビュー パノラマへの対応状況を確認する
Google Play 開発者サービス SDK クライアント ライブラリには、ストリートビューのサンプルがいくつか含まれています。このサンプルをプロジェクトにインポートして、開発の基礎として使用できます。サンプルのインポートのガイドラインについては、概要をご覧ください。
Maps SDK for Android ユーティリティ ライブラリは、幅広いアプリケーションで役立つクラスのオープンソース ライブラリです。GitHub リポジトリにはストリートビュー メタデータ ユーティリティがあります。このユーティリティでは、場所がストリートビューでサポートされているかどうかを確認できます。このメタデータ ユーティリティを呼び出して、レスポンスが OK
の場合にのみストリートビュー パノラマを追加すると、Android アプリにストリートビュー パノラマを追加する際にエラーが発生するのを回避できます。
API を使用する
次の手順に従って、ストリートビュー パノラマを Android フラグメントに追加します。これは、アプリケーションにストリートビューを追加する最も単純な方法です。続けて、フラグメント、ビュー、パノラマのカスタマイズに関する詳細をお読みください。
ストリートビュー パノラマを追加する
以下のようなストリートビュー パノラマを追加するには、次の手順を踏みます。
![ストリートビュー パノラマ ストリートビュー パノラマのデモ](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/android-sdk/images/streetview.png?authuser=8&hl=ja)
概要は次のとおりです。
- ストリートビュー パノラマを処理する Activity に Fragment オブジェクトを追加します。これを行うには、
<fragment>
要素をActivity
のレイアウト ファイルに追加する方法が最も簡単です。 OnStreetViewPanoramaReadyCallback
インターフェースを実装し、onStreetViewPanoramaReady(StreetViewPanorama)
コールバック メソッドを使用して、StreetViewPanorama
オブジェクトに対するハンドルを取得します。- フラグメントで
getStreetViewPanoramaAsync()
を呼び出して、コールバックを登録します。
それぞれの手順の詳細は以下のとおりです。
フラグメントを追加する
<fragment>
要素をアクティビティのレイアウト ファイルに追加して、Fragment オブジェクトを定義します。この要素の中で、class
属性を com.google.android.gms.maps.StreetViewPanoramaFragment
(または SupportStreetViewPanoramaFragment
)に設定します。
次に、レイアウト ファイル内のフラグメントの例を示します。
<fragment android:name="com.google.android.gms.maps.StreetViewPanoramaFragment" android:id="@+id/streetviewpanorama" android:layout_width="match_parent" android:layout_height="match_parent"/>
ストリートビュー コードを追加する
ストリートビュー パノラマをアプリ内で操作するには、OnStreetViewPanoramaReadyCallback
インターフェースを実装し、StreetViewPanoramaFragment
または StreetViewPanoramaView
オブジェクトでコールバックのインスタンスを設定する必要があります。このチュートリアルでは、アプリにストリートビューを追加する最も簡単な方法である StreetViewPanoramaFragment
を使用します。その最初のステップは、コールバック インターフェースの実装です。
Kotlin
class StreetViewActivity : AppCompatActivity(), OnStreetViewPanoramaReadyCallback { // ... }
Java
class StreetViewActivity extends AppCompatActivity implements OnStreetViewPanoramaReadyCallback { // ... }
Activity
の onCreate()
メソッドで、レイアウト ファイルをコンテンツ ビューとして設定します。たとえば、レイアウト ファイルの名前が main.xml
の場合は、以下のコードを使用します。
Kotlin
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_street_view) val streetViewPanoramaFragment = supportFragmentManager .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment streetViewPanoramaFragment.getStreetViewPanoramaAsync(this) }
Java
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_street_view); SupportStreetViewPanoramaFragment streetViewPanoramaFragment = (SupportStreetViewPanoramaFragment) getSupportFragmentManager() .findFragmentById(R.id.street_view_panorama); streetViewPanoramaFragment.getStreetViewPanoramaAsync(this); }
フラグメントに対するハンドルを取得するには、FragmentManager.findFragmentById()
を呼び出して、<fragment>
要素のリソース ID を渡します。
なお、レイアウト ファイルを作成すると、リソース ID R.id.streetviewpanorama
が自動的に Android プロジェクトに追加されます。
次に、getStreetViewPanoramaAsync()
を使って、フラグメントにコールバックを設定します。
Kotlin
val streetViewPanoramaFragment = supportFragmentManager .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)
Java
SupportStreetViewPanoramaFragment streetViewPanoramaFragment = (SupportStreetViewPanoramaFragment) getSupportFragmentManager() .findFragmentById(R.id.street_view_panorama); streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);
onStreetViewPanoramaReady(StreetViewPanorama)
コールバック メソッドを使って、使用準備が整った StreetViewPanorama
の null ではないインスタンスを取得します。
Kotlin
override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) { val sanFrancisco = LatLng(37.754130, -122.447129) streetViewPanorama.setPosition(sanFrancisco) }
Java
@Override public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) { LatLng sanFrancisco = new LatLng(37.754130, -122.447129); streetViewPanorama.setPosition(sanFrancisco); }
初期状態の設定の詳細
地図とは異なり、ストリートビュー パノラマの初期状態を XML で設定することはできません。ただし、指定したオプションを含む StreetViewPanoramaOptions
オブジェクトを渡すことによって、パノラマをプログラマティックに設定することは可能です。
StreetViewPanoramaFragment
を使っている場合は、StreetViewPanoramaFragment.newInstance(StreetViewPanoramaOptions options)
静的ファクトリー メソッドを使ってフラグメントを作成し、カスタム設定のオプションを渡します。StreetViewPanoramaView
を使っている場合は、StreetViewPanoramaView(Context, StreetViewPanoramaOptions)
コンストラクタを使って、カスタム設定のオプションを渡します。
Kotlin
val sanFrancisco = LatLng(37.754130, -122.447129) val view = StreetViewPanoramaView( this, StreetViewPanoramaOptions().position(sanFrancisco) )
Java
LatLng sanFrancisco = new LatLng(37.754130, -122.447129); StreetViewPanoramaView view = new StreetViewPanoramaView(this, new StreetViewPanoramaOptions().position(sanFrancisco));
StreetViewPanoramaFragment の詳細
Android Fragment クラスのサブクラスである StreetViewPanoramaFragment
を使用すると、Android フラグメントにストリートビュー パノラマを配置できます。StreetViewPanoramaFragment
オブジェクトはパノラマのコンテナとして機能し、StreetViewPanorama
オブジェクトへのアクセスを提供します。
StreetViewPanoramaView
Android View
クラスのサブクラスである StreetViewPanoramaView
を使用すると、Android View
にストリートビュー パノラマを配置できます。View
は長方形の画面領域を表すもので、Android のアプリやウィジェットを作成する際の基本的な構成要素です。StreetViewPanoramaFragment
と同様に、StreetViewPanoramaView
はパノラマのコンテナとして機能し、StreetViewPanorama
オブジェクトを通じてコア機能を公開します。このクラスのユーザーは、すべてのアクティビティ ライフサイクル メソッド (例: onCreate()
、onDestroy()
、onResume()
、onPause())
を StreetViewPanoramaView
クラスの対応するメソッドに転送する必要があります。
ユーザー制御機能をカスタマイズする
デフォルトで、ユーザーはストリートビュー パノラマを表示するときに、パン、ズーム、隣接するパノラマへの移動の各機能を使用できます。ユーザー制御の操作は、StreetViewPanorama
でメソッドを使用すると有効と無効を切り替えることができます。操作を無効にした場合でも、プログラマティックに変更することは可能です。
パノラマの位置を設定する
ストリートビュー パノラマの位置を設定するには、StreetViewPanorama.setPosition()
を呼び出して LatLng
を渡します。また、オプションのパラメータとして radius
と source
を渡すこともできます。
radius は、ストリートビューで一致するパノラマを検索する地域を拡大または縮小する場合に役立ちます。radius が 0 の場合は、パノラマが指定された正確な LatLng
の位置にリンクされている必要があることを意味します。デフォルトの radius は 50 メートルです。一致したエリアに複数のパノラマがある場合、API は最も一致するものを返します。
source は、ストリートビューの検索を屋外のパノラマのみに制限する場合に役立ちます。デフォルトでは、ストリートビュー パノラマは、博物館や、公共の建物、カフェ、お店などの施設の中の画像になることがあります。なお、指定された場所の屋外のパノラマが存在しない場合があります。
Kotlin
val sanFrancisco = LatLng(37.754130, -122.447129) // Set position with LatLng only. streetViewPanorama.setPosition(sanFrancisco) // Set position with LatLng and radius. streetViewPanorama.setPosition(sanFrancisco, 20) // Set position with LatLng and source. streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR) // Set position with LaLng, radius and source. streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR)
Java
LatLng sanFrancisco = new LatLng(37.754130, -122.447129); // Set position with LatLng only. streetViewPanorama.setPosition(sanFrancisco); // Set position with LatLng and radius. streetViewPanorama.setPosition(sanFrancisco, 20); // Set position with LatLng and source. streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR); // Set position with LaLng, radius and source. streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR);
または、panoId
を StreetViewPanorama.setPosition()
に渡して、パノラマ ID に基づいて位置を設定することもできます。
隣接するパノラマのパノラマ ID を取得するには、まず getLocation()
を使って StreetViewPanoramaLocation
を取得します。このオブジェクトには、現在のパノラマの ID と、StreetViewPanoramaLink
オブジェクトの配列が含まれ、各オブジェクトには、現在のパノラマと関連付けられているパノラマの ID が含まれます。
Kotlin
streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink -> streetViewPanorama.setPosition(link.panoId) }
Java
StreetViewPanoramaLocation location = streetViewPanorama.getLocation(); if (location != null && location.links != null) { streetViewPanorama.setPosition(location.links[0].panoId); }
ズームイン / ズームアウト
プログラマティックにズームレベルを変更するには、StreetViewPanoramaCamera.zoom
を設定します。ズームを 1.0 に設定すると、画像が 2 倍に拡大されます。
以下のスニペットでは、StreetViewPanoramaCamera.Builder()
を使って、既存のカメラのチルトと方向指定で新しいカメラを作成し、ズームを 50% 拡大しています。
Kotlin
val zoomBy = 0.5f val camera = StreetViewPanoramaCamera.Builder() .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy) .tilt(streetViewPanorama.panoramaCamera.tilt) .bearing(streetViewPanorama.panoramaCamera.bearing) .build()
Java
float zoomBy = 0.5f; StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder() .zoom(streetViewPanorama.getPanoramaCamera().zoom + zoomBy) .tilt(streetViewPanorama.getPanoramaCamera().tilt) .bearing(streetViewPanorama.getPanoramaCamera().bearing) .build();
カメラの向き(視点)を設定する
ストリートビュー カメラの向きを決定するには、StreetViewPanoramaCamera
で方向指定とチルトを設定します。
- bearing
- カメラが指している方向。カメラの中心を軸に、真北からの時計回り方向への度数で指定します。真北が 0、東が 90、南が 180、西が 270 です。
- tilt
- Y 軸のチルトアップまたはチルトダウン。範囲は -90 から 0 を経て 90 までです。-90 を指定すると真下を向き、0 は水平を向き、90 では真上を向きます。差分はカメラの初期デフォルト ピッチを基準に測定されます。多くの場合、初期デフォルト ピッチは水平方向ですが、必ずそうであるとは限りません。たとえば、山で撮影された画像は、水平ではないデフォルトのピッチで表示されます。
以下のスニペットでは、StreetViewPanoramaCamera.Builder()
を使って、既存のカメラと同じズームとチルトでカメラを作成し、方向指定を 30 度左に変更しています。
Kotlin
val panBy = 30f val camera = StreetViewPanoramaCamera.Builder() .zoom(streetViewPanorama.panoramaCamera.zoom) .tilt(streetViewPanorama.panoramaCamera.tilt) .bearing(streetViewPanorama.panoramaCamera.bearing - panBy) .build()
Java
float panBy = 30; StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder() .zoom(streetViewPanorama.getPanoramaCamera().zoom) .tilt(streetViewPanorama.getPanoramaCamera().tilt) .bearing(streetViewPanorama.getPanoramaCamera().bearing - panBy) .build();
以下のスニペットでは、カメラを上方向に 30 度チルトしています。
Kotlin
var tilt = streetViewPanorama.panoramaCamera.tilt + 30 tilt = if (tilt > 90) 90f else tilt val previous = streetViewPanorama.panoramaCamera val camera = StreetViewPanoramaCamera.Builder(previous) .tilt(tilt) .build()
Java
float tilt = streetViewPanorama.getPanoramaCamera().tilt + 30; tilt = (tilt > 90) ? 90 : tilt; StreetViewPanoramaCamera previous = streetViewPanorama.getPanoramaCamera(); StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder(previous) .tilt(tilt) .build();
カメラの動きにアニメーションを付ける
カメラの動きにアニメーションを付けるには、StreetViewPanorama.animateTo()
を呼び出します。アニメーションによって、現在のカメラ属性から新しいカメラ属性にスムーズに表示が切り替わります。アニメーションなしで直接カメラに移動するには、duration を 0 に設定します。
Kotlin
// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds. val duration: Long = 1000 val camera = StreetViewPanoramaCamera.Builder() .zoom(streetViewPanorama.panoramaCamera.zoom) .tilt(streetViewPanorama.panoramaCamera.tilt) .bearing(streetViewPanorama.panoramaCamera.bearing - 60) .build() streetViewPanorama.animateTo(camera, duration)
Java
// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds. long duration = 1000; StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder() .zoom(streetViewPanorama.getPanoramaCamera().zoom) .tilt(streetViewPanorama.getPanoramaCamera().tilt) .bearing(streetViewPanorama.getPanoramaCamera().bearing - 60) .build(); streetViewPanorama.animateTo(camera, duration);
以下の画像は、Handler.postDelayed()
を使って 2000 ミリ秒ごとに上述のアニメーションを実行するようにスケジュールした場合の結果を示しています。
![ストリートビュー パノラマのアニメーション ストリートビュー パノラマのアニメーションのデモ](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/android-sdk/images/streetview_anim.gif?authuser=8&hl=ja)