Android Google Map Street View Example

Hey, today we’re going to learn how we can integrate Google Map Street View into our Android app. Google Street View provides panoramic 360* views. The coverage available through the Google Map Android API v2 is the same as that for Google Map. You can read more about Street View here.

Google Map Setup 

First, sign into your Google console developer account and Create Project. After that go to Library section and search for Android Map API. After that select and enable the key. When you enabled the API key go to Credential sections and copy the API key. It looks like AIzaSyD2gPrI2eAR*****************hoyI this.

 Android App Setup

Create an empty project and open app level build.gradle file. After that add Google Map dependency.

implementation 'com.google.android.gms:play-services-maps:15.0.0'

Now go to Manifest file and add meta tags in application tag.

<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="Paste Google Map API key" />

The first meta tag is for Google play services version. The second one is for Google Map API key.

Now the setup part is done, to show the Street Map add StreetViewPanoramaFragment into activity_main.xml. Below is the activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</FrameLayout>

Now go to the activity and get the StreetViewPanoramaFragment object and add OnStreetViewPanoramaReadyCallback. Below is the code for the StreetViewPanoramaFragment object.

streetViewPanoramaFragment = (StreetViewPanoramaFragment) getFragmentManager()
                .findFragmentById(R.id.streetViewMap);
        streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);

For StreetViewPanoramaCallback we’re setting our activity reference. It means our activity has to override the abstract method of the callback. Below is the code for the StreetViewPanoramaCallback abstract method.

@Override
  public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
      streetViewPanorama.setPosition(new LatLng(-33.873398, 150.976744));
      streetViewPanorama.setOnStreetViewPanoramaChangeListener(streetViewPanoramaChangeListener);
      streetViewPanorama.setOnStreetViewPanoramaClickListener(streetViewPanoramaClickListener);
  }

To set the location of StreetViewPanorama call setPosition method passing a LatLng object. You can also register the listener for when the user clicks on StreetViewMap or when the StreetViewPanorama change.

Below is the code for StreetViewMap click listener.

private StreetViewPanorama.OnStreetViewPanoramaClickListener streetViewPanoramaClickListener = new StreetViewPanorama.OnStreetViewPanoramaClickListener() {
 @Override
 public void onStreetViewPanoramaClick(StreetViewPanoramaOrientation streetViewPanoramaOrientation) {
 Point point = streetViewPanorama.orientationToPoint(streetViewPanoramaOrientation);
 if (point != null) {
 streetViewPanorama.animateTo(
 new StreetViewPanoramaCamera.Builder()
 .orientation(streetViewPanoramaOrientation)
 .zoom(streetViewPanorama.getPanoramaCamera().zoom)
 .build(), 1000);
 }
 }
};

onStreetViewPanorama method hits every time when the user clicks on the map. Also, we get StreetViewPanoramaOrientation object as a parameter, with a streetViewPanoramaOrientation object we can get the Point where the user clicks and simply animate to that point.

Below is the code for StreetViewPanorama change listener.

private StreetViewPanorama.OnStreetViewPanoramaChangeListener streetViewPanoramaChangeListener = new StreetViewPanorama.OnStreetViewPanoramaChangeListener() {
    @Override
    public void onStreetViewPanoramaChange(StreetViewPanoramaLocation streetViewPanoramaLocation) {
        Log.e(TAG, "Street View Panorama Change Listener");
    }
};

onStreetViewPanoramaChange method hits every time when we setPosition to StreetViewMap. 

You can enable and disable user controlled gestures through methods on StreetViewPanorama.

Below is the code how you can disable the street names displayed on the ground. The default is true.

streetViewPanorama.setStreetNamesEnabled(false);

Below is the code how you can disable pinch zoom. The default is true.

streetViewPanorama.setZoomGesturesEnabled(false);

Below is the code how the user will be able to re-orient the camera by dragging.

streetViewPanorama.setPanningGesturesEnabled(false);

You can also set zoom level programmatically. Setting the zoom to 1.0 will magnify the image by a factor of 2. Below is the code how to set zoom level.

private static final float ZOOM_BY = 0.5f;
streetViewPanorama.animateTo(new StreetViewPanoramaCamera.Builder()
    .zoom(mStreetViewPanorama.getPanoramaCamera().zoom + ZOOM_BY)
    .build();

It’s a good approach to resume, stop and destroy the StreetViewPanoramaFragment object throughout the activity life-cycle.

@Override
protected void onResume() {
    super.onResume();
    streetViewPanoramaFragment.onResume();
}

@Override
protected void onStop() {
    super.onStop();
    streetViewPanoramaFragment.onStop();
}
@Override
protected void onDestroy() {
    super.onDestroy();
    if (streetViewPanoramaFragment != null)
        streetViewPanoramaFragment.onDestroy();
}

This is how you can use the activity life-cycle with the StreetViewPanoramaFragment object.

You can also store the state of StreetViewPanoramaFragment instance in an onSaveInstanceState method. Below is the example how you can store the state.

@Override
public void onSaveInstanceState(Bundle outState, PersistableBundle outPersistentState) {
    super.onSaveInstanceState(outState, outPersistentState);
    Bundle mStreetViewBundle = outState.getBundle(STREET_VIEW_BUNDLE);
    if (mStreetViewBundle == null) {
        mStreetViewBundle = new Bundle();
        outState.putBundle(STREET_VIEW_BUNDLE, mStreetViewBundle);
    }
    streetViewPanoramaFragment.onSaveInstanceState(mStreetViewBundle);
}

That’s it, I’m going to complete this blog here. If you guys want to learn how you can show the current location of a user on GoogleStreetViewMap, see this => Current Location With Google Map Street View Android.

Complete source code for the above example sees on GitHub.

Download Complete Code

I hope this blog gives you a good understanding of how you can add GoogleStreetViewMap in Android app. If you’ve any queries please do comment below.

Topic, You might be interested: Android Example : Animate marker on Google map with current location