ストリートビュー

Google ストリートビューは、対象地域全体について、指定された道路からの 360 度のパノラマビューを提供します。

このビデオでは、ストリートビュー サービスを使って、マップ上の住所をユーザーが仮想訪問できるようにし、ユーザーの目的地や関心のある場所について意味のある情報を提供する方法を説明しています。

Google Maps Android API v2 の対象地域は、Android デバイスの Google マップアプリの対象地域と同じです。ストリートビューの詳細や、インタラクティブ マップでサポートされる地域については、ストリートビューについてをご覧ください。

StreetViewPanorama クラスは、アプリケーションでストリートビュー パノラマをモデル化します。アプリケーションの UI 内では、パノラマは StreetViewPanoramaFragment または StreetViewPanoramaView のオブジェクトで表されます。

コードサンプル

GitHub の ApiDemos リポジトリには、ストリートビューの使い方を示すサンプルが含まれています。

Java サンプル:

Kotlin サンプル:

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 クライアント ライブラリには、ストリートビューのサンプルがいくつか含まれています。このサンプルをプロジェクトにインポートして、開発の基礎として使用できます。サンプルのインポートのガイドラインについては、概要をご覧ください。

API を使用する

次の手順に従って、ストリートビュー パノラマを Android フラグメントに追加します。これは、アプリケーションにストリートビューを追加する最も単純な方法です。続けて、フラグメント、ビュー、パノラマのカスタマイズに関する詳細をお読みください。

ストリートビュー パノラマを追加する

以下のようなストリートビュー パノラマを追加するには、次の手順を行います。

ストリートビュー パノラマのデモ

概要は次のとおりです。

  1. ストリートビュー パノラマを処理する ActivityFragment オブジェクトを追加します。これを行うには、<fragment> 要素を Activity のレイアウト ファイルに追加する方法が最も簡単です。
  2. OnStreetViewPanoramaReadyCallback インターフェースを実装し、onStreetViewPanoramaReady(StreetViewPanorama) コールバック メソッドを使用して、StreetViewPanorama オブジェクトに対するハンドルを取得します。
  3. フラグメントで getStreetViewPanoramaAsync() を呼び出して、コールバックを登録します。

それぞれの手順の詳細は以下のとおりです。

フラグメントを追加する

<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 を使用します。その最初のステップは、コールバック インターフェースの実装です。

Java

class StreetViewActivity extends AppCompatActivity implements OnStreetViewPanoramaReadyCallback {
    // ...
}
      

Kotlin

internal class StreetViewActivity : AppCompatActivity(), OnStreetViewPanoramaReadyCallback {
    // ...
        // ...
    }

    override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) {
        val sanFrancisco = LatLng(37.754130, -122.447129)
        streetViewPanorama.setPosition(sanFrancisco)
    }

    private fun newView() {
        val sanFrancisco = LatLng(37.754130, -122.447129)
        val view = StreetViewPanoramaView(
            this,
            StreetViewPanoramaOptions().position(sanFrancisco)
        )
    }

    private fun setLocationOfThePanorama(streetViewPanorama: StreetViewPanorama) {
        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)

        streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink ->
            streetViewPanorama.setPosition(link.panoId)
        }
    }

    private fun zoom(streetViewPanorama: StreetViewPanorama) {
        val zoomBy = 0.5f
        val camera = StreetViewPanoramaCamera.Builder()
            .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy)
            .tilt(streetViewPanorama.panoramaCamera.tilt)
            .bearing(streetViewPanorama.panoramaCamera.bearing)
            .build()
    }

    private fun pan(streetViewPanorama: StreetViewPanorama) {
        val panBy = 30f
        val camera = StreetViewPanoramaCamera.Builder()
            .zoom(streetViewPanorama.panoramaCamera.zoom)
            .tilt(streetViewPanorama.panoramaCamera.tilt)
            .bearing(streetViewPanorama.panoramaCamera.bearing - panBy)
            .build()
    }

    private fun tilt(streetViewPanorama: StreetViewPanorama) {
        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()
    }

    private fun animate(streetViewPanorama: StreetViewPanorama) {
        // 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)
    }
}
      

ActivityonCreate() メソッドで、レイアウト ファイルをコンテンツ ビューとして設定します。たとえば、レイアウト ファイルの名前が main.xml の場合は、以下のコードを使用します。

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);
}
      

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_street_view)
    // ...
}
      

フラグメントに対するハンドルを取得するには、FragmentManager.findFragmentById() を呼び出して、<fragment> 要素のリソース ID を渡します。 なお、レイアウト ファイルを作成すると、リソース ID R.id.streetviewpanorama が自動的に Android プロジェクトに追加されます。

次に、getStreetViewPanoramaAsync() を使って、フラグメントにコールバックを設定します。

Java

SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
    (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
        .findFragmentById(R.id.street_view_panorama);
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);
      

Kotlin

val streetViewPanoramaFragment =
    supportFragmentManager
        .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)
      

onStreetViewPanoramaReady(StreetViewPanorama) コールバック メソッドを使って、使用準備が整った StreetViewPanorama の null ではないインスタンスを取得します。

Java

@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
    LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
    streetViewPanorama.setPosition(sanFrancisco);
}
      

Kotlin

override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) {
    val sanFrancisco = LatLng(37.754130, -122.447129)
    streetViewPanorama.setPosition(sanFrancisco)
}
      

初期状態の設定の詳細

マップとは異なり、ストリートビューのパノラマは、XML を使用して初期状態を設定することはできません。ただし、指定したオプションを含む StreetViewPanoramaOptions オブジェクトを渡すことによって、プログラムでパノラマを設定することができます。

Java

LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
StreetViewPanoramaView view = new StreetViewPanoramaView(this,
    new StreetViewPanoramaOptions().position(sanFrancisco));
      

Kotlin

val sanFrancisco = LatLng(37.754130, -122.447129)
val view = StreetViewPanoramaView(
    this,
    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 を渡します。また、オプションのパラメータとして radiussource を渡すこともできます。

radius は、ストリートビューで一致するパノラマを検索する地域を拡大または縮小する場合に役立ちます。radius が 0 の場合は、パノラマが指定された正確な LatLng の位置にリンクされている必要があることを意味します。デフォルトの radius は 50 メートルです。一致したエリアに複数のパノラマがある場合、API は最も一致するものを返します。

source は、ストリートビューの検索を屋外のパノラマのみに制限する場合に役立ちます。デフォルトでは、ストリートビュー パノラマは、博物館や、公共の建物、カフェ、お店などの施設の中の画像になることがあります。なお、指定された場所の屋外のパノラマが存在しない場合があります。

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);
      

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)
      

または、panoIdStreetViewPanorama.setPosition() に渡して、パノラマ ID に基づいて位置を設定することもできます。

隣接するパノラマのパノラマ ID を取得するには、まず getLocation() を使って StreetViewPanoramaLocation を取得します。このオブジェクトには、現在のパノラマの ID と、StreetViewPanoramaLink オブジェクトの配列が含まれ、各オブジェクトには、現在のパノラマと関連付けられているパノラマの ID が含まれます。

Java

StreetViewPanoramaLocation location = streetViewPanorama.getLocation();
if (location != null && location.links != null) {
    streetViewPanorama.setPosition(location.links[0].panoId);
}
      

Kotlin

streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink ->
    streetViewPanorama.setPosition(link.panoId)
}
      

ズームイン / ズームアウト

プログラムでズームレベルを変更するには、StreetViewPanoramaCamera.zoom を設定します。ズームを 1.0 に設定すると、画像が 2 倍に拡大されます。

以下のスニペットでは、StreetViewPanoramaCamera.Builder() を使って、既存のカメラのチルトと方向指定で新しいカメラを作成し、ズームを 50% 拡大しています。

Java

float zoomBy = 0.5f;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom + zoomBy)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing)
    .build();
      

Kotlin

val zoomBy = 0.5f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing)
    .build()
      

カメラの向き(視点)を設定する

ストリートビュー カメラの向きを決定するには、StreetViewPanoramaCamera で方向指定とチルトを設定します。

bearing
カメラが指している方向。カメラの中心を軸に、真北からの時計回り方向への度数で指定します。真北が 0、東が 90、南が 180、西が 270 です。
tilt
Y 軸のチルトアップまたはチルトダウン。範囲は -90 から 0 を経て 90 までです。-90 を指定すると真下を向き、0 は水平に揃えられ、90 では真上を向きます。差分はカメラの初期デフォルト ピッチを基準に測定されます。多くの場合、初期デフォルト ピッチは水平方向ですが、必ずそうであるとは限りません。たとえば、山で撮影された画像は、水平ではないデフォルトのピッチで表示されます。

以下のスニペットでは、StreetViewPanoramaCamera.Builder() を使って、既存のカメラと同じズームとチルトでカメラを作成し、方向指定を 30 度左に変更しています。

Java

float panBy = 30;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing - panBy)
    .build();
      

Kotlin

val panBy = 30f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - panBy)
    .build()
      

以下のスニペットでは、カメラを上方向に 30 度チルトしています。

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();
      

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()
      

カメラの動きにアニメーションを付ける

カメラの動きにアニメーションを付けるには、StreetViewPanorama.animateTo() を呼び出します。アニメーションによって、現在のカメラ属性から新しいカメラ属性にスムーズに表示が切り替わります。アニメーションなしで直接カメラに移動するには、duration を 0 に設定します。

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);
      

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)
      

以下の画像は、Handler.postDelayed() を使って 2000 ミリ秒ごとに上記のアニメーションを実行するようにスケジュールした場合の結果を示しています。

ストリートビュー パノラマのアニメーションのデモ