AI-generated Key Takeaways

outlined_flag

• The Google Street View feature in the Maps SDK for Android provides 360° panoramic views, allowing users to pan, zoom, and navigate between locations.

• Developers can integrate Street View by adding aStreetViewPanoramaFragment orStreetViewPanoramaView to their layout and using theStreetViewPanorama object to control its functionality.

• Customization options include enabling/disabling user gestures, setting the panorama's position, and programmatically adjusting zoom and camera orientation.

• The Street View Panorama Control enables developers to programmatically set the position, zoom, and orientation of the camera, including the ability to animate transitions for smooth user experience.

• Remember that dynamic Street View usage incurs charges, and multiple Street View objects are not supported within a single activity.

Google Street View provides panoramic 360-degree viewsfrom 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, seeGoogle Maps Platform Billing.

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

The coverage available through the Google Maps Android API v2 is the same asthat for the Google Maps app on your Android device. You can read more aboutStreet View and see the supported areas on aninteractive map, atAbout Street View.

TheStreetViewPanorama class models the StreetView panorama in your application. Within your UI, a panorama is representedby aStreetViewPanoramaFragment orStreetViewPanoramaView object.

Code samples

TheApiDemos repository on GitHub includessamples that demonstrate the use of Street View.

Kotlin samples:

• StreetViewPanoramaBasicDemoActivity: The basics of usingStreet View
• StreetViewPanoramaEventsDemoActivity: Listening to events
• StreetViewPanoramaNavigationDemoActivity: ControllingStreet View panoramas programmatically
• StreetViewPanoramaOptionsDemoActivity: Changing UI andgesture options
• StreetViewPanoramaViewDemoActivity: Using theStreetViewPanoramaView (instead of a Fragment)
• SplitStreetViewPanoramaAndMapDemoActivity: Using anactivity that displays a street view and a map

Java samples:

• StreetViewPanoramaBasicDemoActivity: The basics of usingStreet View
• StreetViewPanoramaEventsDemoActivity: Listening to events
• StreetViewPanoramaNavigationDemoActivity: ControllingStreet View panoramas programmatically
• StreetViewPanoramaOptionsDemoActivity: Changing UI andgesture options
• StreetViewPanoramaViewDemoActivity: Using theStreetViewPanoramaView (instead of a Fragment)
• SplitStreetViewPanoramaAndMapDemoActivity: Creating anactivity 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 Viewservice for obtaining and manipulating the imagery used in GoogleStreet 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 tothe equirectangular (Plate Carrée) projection, which contains 360 degreesof horizontal view (a full wrap-around) and 180 degrees of vertical view (fromstraight up to straight down). The resulting 360-degree panorama defines aprojection on a sphere with the image wrapped to the two-dimensional surface ofthat sphere.

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

Get started

Set up a project

Follow thegetting-started guide to set up aMaps SDK for Android project.

Check Street View panorama availability before adding a panorama

The Google Play services SDK client library includes a fewStreet View samples which you can import into your projectand use as a basis for development. See theintroduction forguidelines on importing the samples.

TheMaps SDK for Android Utility Libraryis an open source library of classes that are useful for a range ofapplications. Included in the GitHub repository is theStreet View metadata utility.This utility checks whether a location is supported byStreet View. You can avoid errors when adding aStreet View panorama to an Android app by calling thismetadata utility and only adding a Street View panoramaif the response isOK.

Use the API

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

Add a Street View panorama

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

In summary:

1. Add aFragment object to theActivity that will handle theStreet View panorama. The easiest way to do this isto add a<fragment> element to the layout file for theActivity.
2. Implement theOnStreetViewPanoramaReadyCallbackinterface and use theonStreetViewPanoramaReady(StreetViewPanorama)callback method to get a handle to theStreetViewPanorama object.
3. CallgetStreetViewPanoramaAsync() on thefragment 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 aFragment object. In this element, set theclassattribute tocom.google.android.gms.maps.StreetViewPanoramaFragment (orSupportStreetViewPanoramaFragment).

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 theOnStreetViewPanoramaReadyCallbackinterface and set an instance of the callback on aStreetViewPanoramaFragment orStreetViewPanoramaView object. This tutorial uses aStreetViewPanoramaFragment, because that's the simplest way to addStreet View to your app. The first step is to implementthe callback interface:

classStreetViewActivity:AppCompatActivity(),OnStreetViewPanoramaReadyCallback{// ...}

classStreetViewActivityextendsAppCompatActivityimplementsOnStreetViewPanoramaReadyCallback{// ...}

In yourActivity'sonCreate()method, set the layout file as the content view. For example, if the layout filehas the namemain.xml, use this code:

overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContentView(R.layout.activity_street_view)valstreetViewPanoramaFragment=supportFragmentManager.findFragmentById(R.id.street_view_panorama)asSupportStreetViewPanoramaFragmentstreetViewPanoramaFragment.getStreetViewPanoramaAsync(this)}

@OverrideprotectedvoidonCreate(@NullableBundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_street_view);SupportStreetViewPanoramaFragmentstreetViewPanoramaFragment=(SupportStreetViewPanoramaFragment)getSupportFragmentManager().findFragmentById(R.id.street_view_panorama);streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);}

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

Then usegetStreetViewPanoramaAsync()to set the callback on the fragment.

valstreetViewPanoramaFragment=supportFragmentManager.findFragmentById(R.id.street_view_panorama)asSupportStreetViewPanoramaFragmentstreetViewPanoramaFragment.getStreetViewPanoramaAsync(this)

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

Use theonStreetViewPanoramaReady(StreetViewPanorama)callback method to to retrieve a non-null instance ofStreetViewPanorama, ready to be used.

overridefunonStreetViewPanoramaReady(streetViewPanorama:StreetViewPanorama){valsanFrancisco=LatLng(37.754130,-122.447129)streetViewPanorama.setPosition(sanFrancisco)}

@OverridepublicvoidonStreetViewPanoramaReady(StreetViewPanoramastreetViewPanorama){LatLngsanFrancisco=newLatLng(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 theStreet View panorama via XML. However, you can configurethe panorama programmatically by passing in aStreetViewPanoramaOptions objectcontaining your specified options.

• If you are using aStreetViewPanoramaFragment, use theStreetViewPanoramaFragment.newInstance(StreetViewPanoramaOptions options)static factory method to construct the fragment and pass in your customconfigured options.
• If you are using aStreetViewPanoramaView, use theStreetViewPanoramaView(Context, StreetViewPanoramaOptions)constructor and pass in your custom configured options.

valsanFrancisco=LatLng(37.754130,-122.447129)valview=StreetViewPanoramaView(this,StreetViewPanoramaOptions().position(sanFrancisco))

LatLngsanFrancisco=newLatLng(37.754130,-122.447129);StreetViewPanoramaViewview=newStreetViewPanoramaView(this,newStreetViewPanoramaOptions().position(sanFrancisco));

More about StreetViewPanoramaFragment

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

StreetViewPanoramaView, a subclass of the AndroidView class, lets you place aStreet View panorama in an AndroidView. AViewrepresents a rectangular region of the screen, and is a fundamental buildingblock for Android applications and widgets. Much like aStreetViewPanoramaFragment, theStreetViewPanoramaView acts as a containerfor the panorama, exposing core features through theStreetViewPanoramaobject. Users of this class must forward all the activity lifecycle methods,such asonCreate(),onDestroy(),onResume(), andonPause()) to thecorresponding methods in theStreetViewPanoramaView class.

By default, the following feature is available to the user when viewing theStreet View panorama: panning, zooming, and travelingto adjacent panoramas. You can enable and disable user-controlled gesturesthrough methods onStreetViewPanorama. Programmaticchanges are still possible when the gesture is disabled.

Set the location of the panorama

To set the location of the Street View panorama, callStreetViewPanorama.setPosition(), passing aLatLng.You can also passradius andsource as optional parameters.

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

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

valsanFrancisco=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)

LatLngsanFrancisco=newLatLng(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 apanoId toStreetViewPanorama.setPosition().

To retrieve the panorama ID for adjacent panoramas, first usegetLocation()to retrieve aStreetViewPanoramaLocation.This object contains the ID of thecurrent panorama and an array ofStreetViewPanoramaLink objects, eachof which contains the ID of a panorama connected to the current one.

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

StreetViewPanoramaLocationlocation=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 settingStreetViewPanoramaCamera.zoom.Setting the zoom to 1.0 will magnify the imageby a factor of 2.

The following snippet usesStreetViewPanoramaCamera.Builder() to construct anew camera with the tilt and bearing of the existing camera, while increasingthe zoom by fifty percent.

valzoomBy=0.5fvalcamera=StreetViewPanoramaCamera.Builder().zoom(streetViewPanorama.panoramaCamera.zoom+zoomBy).tilt(streetViewPanorama.panoramaCamera.tilt).bearing(streetViewPanorama.panoramaCamera.bearing).build()

floatzoomBy=0.5f;StreetViewPanoramaCameracamera=newStreetViewPanoramaCamera.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 orientationby setting the bearing and tilt onStreetViewPanoramaCamera.

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 usesStreetViewPanoramaCamera.Builder() to construct anew camera with the zoom and tilt of the existing camera, while changing thebearing by 30 degrees to the left.

valpanBy=30fvalcamera=StreetViewPanoramaCamera.Builder().zoom(streetViewPanorama.panoramaCamera.zoom).tilt(streetViewPanorama.panoramaCamera.tilt).bearing(streetViewPanorama.panoramaCamera.bearing-panBy).build()

floatpanBy=30;StreetViewPanoramaCameracamera=newStreetViewPanoramaCamera.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.

vartilt=streetViewPanorama.panoramaCamera.tilt+30tilt=if(tilt >90)90felsetiltvalprevious=streetViewPanorama.panoramaCameravalcamera=StreetViewPanoramaCamera.Builder(previous).tilt(tilt).build()

floattilt=streetViewPanorama.getPanoramaCamera().tilt+30;tilt=(tilt >90)?90:tilt;StreetViewPanoramaCameraprevious=streetViewPanorama.getPanoramaCamera();StreetViewPanoramaCameracamera=newStreetViewPanoramaCamera.Builder(previous).tilt(tilt).build();

Animate the camera movements

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

// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.valduration:Long=1000valcamera=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.longduration=1000;StreetViewPanoramaCameracamera=newStreetViewPanoramaCamera.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 torun every 2000 milliseconds, usingHandler.postDelayed():