ストリートビュー

プラットフォームを選択: Android iOS JavaScript

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

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

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

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

コードサンプル

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

Kotlin サンプル:

Java サンプル:

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

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

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

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

概要は次のとおりです。

  1. ストリートビュー パノラマを処理する Activity に Fragment オブジェクトを追加します。これを行うには、<fragment> 要素を Activity のレイアウト ファイルに追加する方法が最も簡単です。
  2. OnStreetViewPanoramaReadyCallback インターフェースを実装し、onStreetViewPanoramaReady(StreetViewPanorama) コールバック メソッドを使用して、StreetViewPanorama オブジェクトに対するハンドルを取得します。
  3. フラグメントで 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 オブジェクトを渡すことによって、パノラマをプログラマティックに設定することは可能です。

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 ミリ秒ごとに上述のアニメーションを実行するようにスケジュールした場合の結果を示しています。

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