ZOFTINO.COM android and web dev tutorials

Android Google Map Street View Example

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.

Android Google Maps Setup

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.

Android Google Map Street View Example Output

android google maps street view example

Android Google Map Street View Example

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

StreetViewPanorama Settings

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

Initial StreetViewPanorama Settings Using StreetViewPanoramaView

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

StreetViewPanorama Listeners

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