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.
|
1 2 3 4 5 6 7 |
<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 constantStreetViewSource.OUTDOORto 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()andsetZoomGesturesEnabled()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:
|
1 2 3 4 5 6 7 8 |
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
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 :
|
1 2 3 4 5 |
<meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY" /> |
Add the following permissions as well:
|
1 2 3 4 5 |
<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:
|
1 2 3 4 |
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
Code
The code for the activity_main.xml is given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
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:
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