You can display Google street view map in your android app using Google maps android API. To show street view map in your app, you need to first setup your project to make Google maps android API available in your android project and use street view related classes such as OnStreetViewPanoramaReadyCallback, StreetViewPanoramaFragment and StreetViewPanoramaOptions.
In this tutorial, you can learn how to show street view maps, configure street view map by applying various settings, and handle events on street view map by adding various listeners.
First create a project in Google developer console, enable Google maps android API, generate key, add the key to your manifest file, make sure Google play services SDK is installed in your android studio, add Google play service library to build.gradle file in your project. For detailed explanation of each of these steps, see Android Google maps API tutorial.
To show street view map, first define StreetViewPanoramaFragment or StreetViewPanoramaView in layout xml as shown below.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".StreetViewMapActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/g_map_street"
android:name="com.google.android.gms.maps.StreetViewPanoramaFragment"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toolbar"/>
</android.support.constraint.ConstraintLayout>
In the activity, get the StreetViewPanoramaFragment object and add OnStreetViewPanoramaReadyCallback callback handler to it by calling getStreetViewPanoramaAsync() method on the fragment. In the callback method onStreetViewPanoramaReady of OnStreetViewPanoramaReadyCallback interface, you can modify street view panorama settings using StreetViewPanorama object passed to it.
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import com.google.android.gms.maps.OnStreetViewPanoramaReadyCallback;
import com.google.android.gms.maps.StreetViewPanorama;
import com.google.android.gms.maps.StreetViewPanoramaFragment;
import com.google.android.gms.maps.model.LatLng;
public class StreetViewMapActivity extends AppCompatActivity
implements OnStreetViewPanoramaReadyCallback {
StreetViewPanorama streetView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.stree_view_layout);
Toolbar tb = findViewById(R.id.toolbar);
setSupportActionBar(tb);
tb.setSubtitle("Street View");
StreetViewPanoramaFragment streetViewFragment =
(StreetViewPanoramaFragment) getFragmentManager()
.findFragmentById(R.id.g_map_street);
streetViewFragment.getStreetViewPanoramaAsync(this);
}
@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
streetView = streetViewPanorama;
streetViewPanorama.setPosition(new LatLng(47.617487, -122.20154330000003));
}
}
You can configure street view map in the callback method onStreetViewPanoramaReady using StreetViewPanorama object. StreetViewPanorama allows you to set various options such as camera, position and enabling and disabling gestures.
Some of the methods of StreetViewPanorama are setStreetNamesEnabled, setPanningGesturesEnabled, setZoomGesturesEnabled and animateTo. Below example shows camera-settings-change animation using animateTo method and also shows configuring camera options using StreetViewPanoramaCamera.Builder()
@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
streetView = streetViewPanorama;
streetViewPanorama.setPosition(new LatLng(47.617487, -122.20154330000003));
streetViewPanorama.setStreetNamesEnabled(false);
streetViewPanorama.setPanningGesturesEnabled(false);
streetViewPanorama.setZoomGesturesEnabled(false);
streetViewPanorama.animateTo(
new StreetViewPanoramaCamera.Builder().
orientation( new StreetViewPanoramaOrientation(20, 20))
.zoom(streetViewPanorama.getPanoramaCamera().zoom)
.build(), 2000);
}
Street view map can be configured initially by creating new instance of StreetViewPanoramaFragment using newInstance method and passing StreetViewPanoramaOptions object or using StreetViewPanoramaView. Using StreetViewPanoramaOptions object, you can set position, enable or disable various gestures and options using panningGesturesEnabled, userNavigationEnabled, zoomGesturesEnabled, etc methods. You can configure camera using StreetViewPanoramaCamera object and adding it to StreetViewPanoramaOptions by calling panoramaCamera method.
Below code shows how to use StreetViewPanoramaView and set initial configuration of street view map.
public class StreetViewMapActivity extends AppCompatActivity
implements OnStreetViewPanoramaReadyCallback {
private static final String STREETVIEW_BUNDLE = "StreetViewBundle";
private StreetViewPanorama streetView;
private StreetViewPanoramaView streetViewPanoramaView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.stree_view_layout);
Toolbar tb = findViewById(R.id.toolbar);
setSupportActionBar(tb);
tb.setSubtitle("Street View");
LinearLayout linearLayout = findViewById(R.id.map_view_layout);
StreetViewPanoramaOptions streetViewPanoramaOptions = new StreetViewPanoramaOptions();
streetViewPanoramaOptions.panningGesturesEnabled(false);
streetViewPanoramaOptions.position(new LatLng(47.617487, -122.20154330000003));
streetViewPanoramaOptions.userNavigationEnabled(false);
streetViewPanoramaOptions.zoomGesturesEnabled(true);
StreetViewPanoramaCamera streetViewPanoramaCamera = new StreetViewPanoramaCamera(25, 30, 1);
streetViewPanoramaOptions.panoramaCamera(streetViewPanoramaCamera);
streetViewPanoramaView = new
StreetViewPanoramaView(this, streetViewPanoramaOptions);
streetViewPanoramaView.getStreetViewPanoramaAsync(this);
linearLayout.addView(streetViewPanoramaView,
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT));
Bundle mStreetViewBundle = null;
if (savedInstanceState != null) {
mStreetViewBundle = savedInstanceState.getBundle(STREETVIEW_BUNDLE);
}
streetViewPanoramaView.onCreate(mStreetViewBundle);
}
@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
streetView = streetViewPanorama;
}
@Override
protected void onResume() {
streetViewPanoramaView.onResume();
super.onResume();
}
@Override
protected void onPause() {
streetViewPanoramaView.onPause();
super.onPause();
}
@Override
protected void onDestroy() {
streetViewPanoramaView.onDestroy();
super.onDestroy();
}
@Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
Bundle mStreetViewBundle = outState.getBundle(STREETVIEW_BUNDLE);
if (mStreetViewBundle == null) {
mStreetViewBundle = new Bundle();
outState.putBundle(STREETVIEW_BUNDLE, mStreetViewBundle);
}
streetViewPanoramaView.onSaveInstanceState(mStreetViewBundle);
}
}
You can do something when certain events such as camera change, panorama change or panoram click event occur by adding listeners such as OnStreetViewPanoramaChangeListener, OnStreetViewPanoramaCameraChangeListener and OnStreetViewPanoramaClickListener to StreetViewPanorama. Below example shows how to handle street view panorama events and add custom behavior in response to those events.
@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
streetView = streetViewPanorama;
streetViewPanorama.setOnStreetViewPanoramaCameraChangeListener(cameraChangeListener);
streetViewPanorama.setOnStreetViewPanoramaClickListener(panoramaClickListener);
streetViewPanorama.setOnStreetViewPanoramaChangeListener(panoramaChangeListener);
}
private StreetViewPanorama.OnStreetViewPanoramaCameraChangeListener
cameraChangeListener =
new StreetViewPanorama.OnStreetViewPanoramaCameraChangeListener() {
@Override
public void onStreetViewPanoramaCameraChange(
StreetViewPanoramaCamera streetViewPanoramaCamera) {
StreetViewMapActivity.this.streetView.animateTo(
new StreetViewPanoramaCamera.Builder().
orientation( new StreetViewPanoramaOrientation(20, 20))
.zoom(streetViewPanoramaCamera.zoom)
.build(), 2000);
}
};
private StreetViewPanorama.OnStreetViewPanoramaChangeListener panoramaChangeListener =
new StreetViewPanorama.OnStreetViewPanoramaChangeListener() {
@Override
public void onStreetViewPanoramaChange(
StreetViewPanoramaLocation streetViewPanoramaLocation) {
LatLng restrict = new LatLng(47.633487, -122.20133);
if(streetViewPanoramaLocation.position.equals(restrict)) {
StreetViewMapActivity.this.streetView.
setUserNavigationEnabled(false);
}
}
};
private StreetViewPanorama.OnStreetViewPanoramaClickListener panoramaClickListener =
new StreetViewPanorama.OnStreetViewPanoramaClickListener() {
@Override
public void onStreetViewPanoramaClick(
StreetViewPanoramaOrientation streetViewPanoramaOrientation) {
if(streetViewPanoramaOrientation.tilt == 30){
StreetViewMapActivity.this.streetView.
setZoomGesturesEnabled(false);
}
}
};