Android Google Map Street View Example

Filed Under: Android

In this tutorial, we’ll be implementing the StreetView feature of Google Maps in our Android Application.

To integrate Google Maps API in your application follow this tutorial.

Google Map StreetView

As the name says, Street View provides a view of the street. Instead of seeing the location’s pin on the road, with a StreetView you can an image of the entire Street!

Google Street View provides panoramic 360-degree views of the location. Street View is available with Google Maps v2 in Android.

To view Street View in your application you need to use the StreetViewPanorama class.
StreetViewPanorama is responsible for displaying the 360-degree panoramic image with the viewer(you) at the center of the sphere.

To integrate Street View in your application you need to use add the fragment StreetViewPanoramaFragment in your XML layout.


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

SupportStreetViewPanoramaFragment is used in place of StreetViewPanoramaFragment to support backward compatibility.

To load Google Maps Street View in your application you need to implement the interface : OnStreetViewPanoramaReadyCallback.

The method onStreetViewPanoramaReady gets triggered. In this method we set the following properties on the StreetViewPanaroma instance:

  • setPosition – We pass the LatLang here. Optionally we can pass a constant StreetViewSource.OUTDOOR to view the outdoor view of the location(on the street) instead of the inside view.
  • setStreetNamesEnabled(boolean) – Enabling this would show the street name (if it exists) on the panoramic image.
  • setUserNavigationEnabled(boolean) – Enabling this allows the user to navigate to different panoramas by clicking on the navigation links.
  • setPanningGesturesEnabled() and setZoomGesturesEnabled() allow us to change the camera angles and zoom into the streets respectively.

To get the current location in the Street View we do: streetViewPanorama.getLocation().position.

getLocation() returns a StreetViewPanoramaLocation instance. On this instance we can retrieve the properties links.

Links is basically an array of all the panoramic images connected to the current one.


Street View Panorama Listeners

We can add listener events on the StreetViewPanaroma instance :

  • OnStreetViewPanoramaChangeListener
  • OnStreetViewPanoramaCameraChangeListener
  • OnStreetViewPanoramaClickListener

Example:


streetViewPanorama.setOnStreetViewPanoramaClickListener(new StreetViewPanorama.OnStreetViewPanoramaClickListener() {
            @Override
            public void onStreetViewPanoramaClick(StreetViewPanoramaOrientation streetViewPanoramaOrientation) {
               //Enter you logic.   
            }
        });

Inside the method, we can add any custom action such as disabling the zoom gestures when the orientation is tilted beyond a certain level.

In the next section, we’ll implement Google Maps Street View in our Android Application.


Getting Started

android google maps streetview integrate api

Add your own SHA-1 Key and generate the API key in the Google console.

Add the following meta-data in the Android Manifest.xml application tag :

 
<meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="YOUR_API_KEY" />

Add the following permissions as well:


<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />

Add the following dependencies in your build.gradle file:


implementation 'com.google.android.gms:play-services-maps:15.0.1'
implementation 'com.android.support:design:28.0.0-alpha3'

Now we are all set to implement Google Maps Street View in our Android Application.


Project Structure

android google maps streetview project


Code

The code for the activity_main.xml is given 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=".MainActivity">

    <fragment
        android:id="@+id/googleMapStreetView"
        android:name="com.google.android.gms.maps.SupportStreetViewPanoramaFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:src="@android:drawable/ic_dialog_map"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />


</android.support.constraint.ConstraintLayout>

We’ve added a FloatingActionButton which would toggle the StreetView Fragment to display a new location.

The code for the MainActivity.java is given below:


package com.journaldev.androidgooglemapstreetview;

import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.google.android.gms.maps.OnStreetViewPanoramaReadyCallback;
import com.google.android.gms.maps.StreetViewPanorama;
import com.google.android.gms.maps.SupportStreetViewPanoramaFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.StreetViewPanoramaCamera;
import com.google.android.gms.maps.model.StreetViewPanoramaLocation;
import com.google.android.gms.maps.model.StreetViewPanoramaOrientation;
import com.google.android.gms.maps.model.StreetViewSource;

public class MainActivity extends AppCompatActivity
        implements OnStreetViewPanoramaReadyCallback {

    private StreetViewPanorama mStreetViewPanorama;
    private boolean secondLocation = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SupportStreetViewPanoramaFragment streetViewFragment =
                (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.googleMapStreetView);
        streetViewFragment.getStreetViewPanoramaAsync(this);

        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                secondLocation = !secondLocation;
                onStreetViewPanoramaReady(mStreetViewPanorama);
            }
        });

    }

    @Override
    public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
        mStreetViewPanorama = streetViewPanorama;

        if (secondLocation) {
            streetViewPanorama.setPosition(new LatLng(51.52887, -0.1726073), StreetViewSource.OUTDOOR);
        } else {
            streetViewPanorama.setPosition(new LatLng(51.52887, -0.1726073));
        }
        streetViewPanorama.setStreetNamesEnabled(true);
        streetViewPanorama.setPanningGesturesEnabled(true);
        streetViewPanorama.setZoomGesturesEnabled(true);
        streetViewPanorama.setUserNavigationEnabled(true);
        streetViewPanorama.animateTo(
                new StreetViewPanoramaCamera.Builder().
                        orientation(new StreetViewPanoramaOrientation(20, 20))
                        .zoom(streetViewPanorama.getPanoramaCamera().zoom)
                        .build(), 2000);

        streetViewPanorama.setOnStreetViewPanoramaChangeListener(panoramaChangeListener);

    }

    private StreetViewPanorama.OnStreetViewPanoramaChangeListener panoramaChangeListener =
            new StreetViewPanorama.OnStreetViewPanoramaChangeListener() {
                @Override
                public void onStreetViewPanoramaChange(
                        StreetViewPanoramaLocation streetViewPanoramaLocation) {


                    Toast.makeText(getApplicationContext(), "Lat: " + streetViewPanoramaLocation.position.latitude + " Lng: " + streetViewPanoramaLocation.position.longitude, Toast.LENGTH_SHORT).show();

                }
            };
}

We show two locations in the same place. One is indoor and the other is outdoor.
panoramaChangeListener gets triggered whenever the panorama image changes. It displays a Toast of the current position.

And the place is Lords! The mecca of Cricket. Relish it in the output below:

android googlemaps-streetview output

If the Street View displays a black screen that means either the place doesn’t have a panoramic image or there is no authorized image available.

This brings an end to this tutorial. You can download the project from the link below:

References : Google Documentation

Comments

  1. sameer kumar pattanaik says:

    Street View displays a black screen even with the same code you had use how solve it

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages