Street View

Select platform: Android iOS JavaScript

Google Street View provides panoramic 360-degree views from designated roads throughout its coverage area.

Paid feature: Although calls to the Maps SDK for Android are not charged, calls to the Dynamic Street View feature will incur charges. For more details, see Google Maps Platform Billing.

This video shows how you can use the Street View service to give your users a real-world experience of an address on the map, providing them with meaningful context about their destination or any place they're interested in.

The coverage available through the Google Maps Android API v2 is the same as that for the Google Maps app on your Android device. You can read more about Street View and see the supported areas on an interactive map, at About Street View.

The StreetViewPanorama class models the Street View panorama in your application. Within your UI, a panorama is represented by a StreetViewPanoramaFragment or StreetViewPanoramaView object.

Code samples

The ApiDemos repository on GitHub includes samples that demonstrate the use of Street View.

Kotlin samples:

• StreetViewPanoramaBasicDemoActivity: The basics of using Street View
• StreetViewPanoramaEventsDemoActivity: Listening to events
• StreetViewPanoramaNavigationDemoActivity: Controlling Street View panoramas programmatically
• StreetViewPanoramaOptionsDemoActivity: Changing UI and gesture options
• StreetViewPanoramaViewDemoActivity: Using the StreetViewPanoramaView (instead of a Fragment)
• SplitStreetViewPanoramaAndMapDemoActivity: Using an activity that displays a street view and a map

Java samples:

• StreetViewPanoramaBasicDemoActivity: The basics of using Street View
• StreetViewPanoramaEventsDemoActivity: Listening to events
• StreetViewPanoramaNavigationDemoActivity: Controlling Street View panoramas programmatically
• StreetViewPanoramaOptionsDemoActivity: Changing UI and gesture options
• StreetViewPanoramaViewDemoActivity: Using the StreetViewPanoramaView (instead of a Fragment)
• SplitStreetViewPanoramaAndMapDemoActivity: Creating an activity that displays a street view and a map

Overview of Street View in the Maps SDK for Android

The Maps SDK for Android provides a Street View service for obtaining and manipulating the imagery used in Google Street View. Images are returned as panoramas.

Each Street View panorama is an image, or set of images, that provides a full 360-degree view from a single location. Images conform to the equirectangular (Plate Carrée) projection, which contains 360 degrees of horizontal view (a full wrap-around) and 180 degrees of vertical view (from straight up to straight down). The resulting 360-degree panorama defines a projection on a sphere with the image wrapped to the two-dimensional surface of that sphere.

StreetViewPanorama provides a viewer that renders the panorama as a sphere with a camera at its center. You can manipulate the StreetViewPanoramaCamera to control the zoom and the orientation (tilt and bearing) of the camera.

Get started

Set up a project

Follow the getting-started guide to set up a Maps SDK for Android project.

Check Street View panorama availability before adding a panorama

The Google Play services SDK client library includes a few Street View samples which you can import into your project and use as a basis for development. See the introduction for guidelines on importing the samples.

The Maps SDK for Android Utility Library is an open source library of classes that are useful for a range of applications. Included in the GitHub repository is the Street View metadata utility. This utility checks whether a location is supported by Street View. You can avoid errors when adding a Street View panorama to an Android app by calling this metadata utility and only adding a Street View panorama if the response is OK.

Use the API

Follow the instructions below to add a Street View panorama to an Android fragment. That's the simplest way to add Street View to your application. Then read more about fragments, views, and customizing the panorama.

Add a Street View panorama

Follow the steps below to add a Street View panorama like this one:

In summary:

1. Add a Fragment object to the Activity that will handle the Street View panorama. The easiest way to do this is to add a <fragment> element to the layout file for the Activity.
2. Implement the OnStreetViewPanoramaReadyCallback interface and use the onStreetViewPanoramaReady(StreetViewPanorama) callback method to get a handle to the StreetViewPanorama object.
3. Call getStreetViewPanoramaAsync() on the fragment to register the callback.

Below is more detail about each step.

Add a fragment

Add a <fragment> element to the activity's layout file to define a Fragment object. In this element, set the class attribute to com.google.android.gms.maps.StreetViewPanoramaFragment (or SupportStreetViewPanoramaFragment).

Here is an example of a fragment in a layout file:

<fragment
    android:name="com.google.android.gms.maps.StreetViewPanoramaFragment"
    android:id="@+id/streetviewpanorama"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Add Street View code

To work with the Street View panorama inside your app, you'll need to implement the OnStreetViewPanoramaReadyCallback interface and set an instance of the callback on a StreetViewPanoramaFragment or StreetViewPanoramaView object. This tutorial uses a StreetViewPanoramaFragment, because that's the simplest way to add Street View to your app. The first step is to implement the callback interface:

KotlinJava

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

      

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

      

In your Activity's onCreate() method, set the layout file as the content view. For example, if the layout file has the name main.xml, use this code:

KotlinJava

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

      

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

      

Get a handle to the fragment by calling FragmentManager.findFragmentById(), passing it the resource ID of your <fragment> element. Notice that the resource ID R.id.streetviewpanorama is added automatically to the Android project when you build the layout file.

Then use getStreetViewPanoramaAsync() to set the callback on the fragment.

KotlinJava

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

      

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

      

Note: getStreetViewPanoramaAsync() must be called from the main thread, and the callback will be executed in the main thread. If Google Play services is not installed on the user's device, the callback won't be triggered until the user installs Play services.

Use the onStreetViewPanoramaReady(StreetViewPanorama) callback method to to retrieve a non-null instance of StreetViewPanorama, ready to be used.

KotlinJava

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

      

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

      

More about configuring initial state

Unlike with a map, it's not possible to configure the initial state of the Street View panorama via XML. However, you can configure the panorama programmatically by passing in a StreetViewPanoramaOptions object containing your specified options.

• If you are using a StreetViewPanoramaFragment, use the StreetViewPanoramaFragment.newInstance(StreetViewPanoramaOptions options) static factory method to construct the fragment and pass in your custom configured options.
• If you are using a StreetViewPanoramaView, use the StreetViewPanoramaView(Context, StreetViewPanoramaOptions) constructor and pass in your custom configured options.

KotlinJava

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

      

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

      

More about StreetViewPanoramaFragment

StreetViewPanoramaFragment is a subclass of the Android Fragment class, and lets you place a Street View panorama in an Android fragment. StreetViewPanoramaFragment objects act as containers for the panorama, and provide access to the StreetViewPanorama object.

Note: The Maps SDK for Android requires API level 12 or higher for the support of StreetViewPanoramaFragment objects. If you are targeting an application earlier than API level 12, you can access the same features through the SupportStreetViewPanoramaFragment class. You will also need to include the Android Support Library.

Note: The Maps SDK for Android does not support multiple StreetViewPanoramaFragment objects in one activity.

StreetViewPanoramaView

StreetViewPanoramaView, a subclass of the Android View class, lets you place a Street View panorama in an Android View. A View represents a rectangular region of the screen, and is a fundamental building block for Android applications and widgets. Much like a StreetViewPanoramaFragment, the StreetViewPanoramaView acts as a container for the panorama, exposing core features through the StreetViewPanorama object. Users of this class must forward all the activity lifecycle methods, such as onCreate(), onDestroy(), onResume(), and onPause()) to the corresponding methods in the StreetViewPanoramaView class.

Note: The Maps SDK for Android does not support multiple StreetViewPanoramaView objects in one activity.

Customize the user-controlled feature

By default, the following feature is available to the user when viewing the Street View panorama: panning, zooming, and traveling to adjacent panoramas. You can enable and disable user-controlled gestures through methods on StreetViewPanorama. Programmatic changes are still possible when the gesture is disabled.

< > Show/Hide the Java methods.

setPanningGesturesEnabled()

Determines whether the user will be able to re-orient the camera by dragging.

        mStreetViewPanorama.setPanningGesturesEnabled(false);

setUserNavigationEnabled()

Determines whether the user will be able to move to a different panorama. Users can use a single tap on navigation links, or double tap the view, to move to a new panorama.

        mStreetViewPanorama.setUserNavigationEnabled(false);

setZoomGesturesEnabled()

Determines whether the user will be able to pinch to zoom.

        mStreetViewPanorama.setZoomGesturesEnabled(false);

setStreetNamesEnabled()

Determines whether the user is able to see street names displayed on the ground.

        mStreetViewPanorama.setStreetNamesEnabled(false);

< > Show/Hide the Kotlin methods.

isPanningGesturesEnabled()

Determines whether the user will be able to re-orient the camera by dragging.

        streetViewPanorama.isPanningGesturesEnabled = false

isUserNavigationEnabled

Determines whether the user will be able to move to a different panorama. Users can use a single tap on navigation links, or double tap the view, to move to a new panorama.

        streetViewPanorama.isUserNavigationEnabled = false

isZoomGesturesEnabled

Determines whether the user will be able to pinch to zoom.

        streetViewPanorama.isZoomGesturesEnabled = false

isStreetNamesEnabled

Determines whether the user is able to see street names displayed on the ground.

        streetViewPanorama.isStreetNamesEnabled = false

Set the location of the panorama

To set the location of the Street View panorama, call StreetViewPanorama.setPosition(), passing a LatLng. You can also pass radius and source as optional parameters.

A radius is useful if you want to widen or narrow the area in which Street View will look for a matching panorama. A radius of 0 means that the panorama must be linked to exactly the specified LatLng. The default radius is 50 meters. If there is more than one panorama in the matching area, the API will return the best match.

A source is useful if you want to restrict Street View to only look for panoramas which are outdoors. By default, Street View panoramas could be inside places such as museums, public buildings, cafes and businesses. Note that outdoor panoramas may not exist for the specified location.

KotlinJava

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)

      

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

      

Alternatively, you can set the location based upon a panorama ID by passing a panoId to StreetViewPanorama.setPosition().

To retrieve the panorama ID for adjacent panoramas, first use getLocation() to retrieve a StreetViewPanoramaLocation. This object contains the ID of the current panorama and an array of StreetViewPanoramaLink objects, each of which contains the ID of a panorama connected to the current one.

KotlinJava

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

      

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

      

Zoom in and out

You can change the zoom level programmatically by setting StreetViewPanoramaCamera.zoom. Setting the zoom to 1.0 will magnify the image by a factor of 2.

The following snippet uses StreetViewPanoramaCamera.Builder() to construct a new camera with the tilt and bearing of the existing camera, while increasing the zoom by fifty percent.

KotlinJava

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

      

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

      

Set the camera orientation (point of view)

You can determine the Street View camera's orientation by setting the bearing and tilt on StreetViewPanoramaCamera.

bearing

The direction in which the camera is pointing, specified in degrees clockwise from true north, around the camera locus. True north is 0, east is 90, south is 180, west is 270.

tilt

The Y-axis tilt up or down. The range is -90 through 0 to 90, with -90 looking straight down, 0 centered on the horizon, and 90 looking straight up. The variance is measured from the camera's initial default pitch, which is often (but not always) flat horizontal. For example, an image taken on a hill will probably have a default pitch that is not horizontal.

The following snippet uses StreetViewPanoramaCamera.Builder() to construct a new camera with the zoom and tilt of the existing camera, while changing the bearing by 30 degrees to the left.

KotlinJava

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

      

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

      

The following snippet tilts the camera upward by 30 degrees.

KotlinJava

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

      

float tilt = streetViewPanorama.getPanoramaCamera().tilt + 30;
tilt = (tilt > 90) ? 90 : tilt;

StreetViewPanoramaCamera previous = streetViewPanorama.getPanoramaCamera();

StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build();

      

Animate the camera movements

To animate the camera movements, call StreetViewPanorama.animateTo(). The animation interpolates between the current camera attributes and the new camera attributes. If you want to jump directly to the camera without animation, you can set the duration to 0.

KotlinJava

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

      

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

      

The following image shows the result when you schedule the above animation to run every 2000 milliseconds, using Handler.postDelayed():