Street View

Google Street View proporciona vistas panorámicas de 360 grados de rutas designadas en su área de cobertura.

En este video, se muestra cómo puedes utilizar el servicio de Street View para brindar a tus usuarios una experiencia real en una dirección en el mapa, lo que les proporciona un contexto significativo sobre su destino o cualquier lugar que les interese.

La cobertura disponible a través de la versión 2 de la API de Google Maps para Android es la misma que para la app de Google Maps en tu dispositivo Android. Puedes obtener más información acerca de Street View y ver las áreas admitidas en un mapa interactivo en el artículo sobre Street View.

La clase StreetViewPanorama modela la panorámica de Street View en tu aplicación. Dentro de la IU, una panorámica se representa con un objeto StreetViewPanoramaFragment o StreetViewPanoramaView.

Muestras de código

El repositorio ApiDemos de GitHub incluye muestras de código que ilustran el uso de Street View.

Muestras de Java:

Muestras de Kotlin:

Descripción general de Street View en el SDK de Maps para Android

El SDK de Maps para Android proporciona un servicio de Street View para obtener y administrar las imágenes que se usan en Google Street View. Las imágenes se muestran como panorámicas.

Cada panorámica de Street View es una imagen, o un conjunto de imágenes, que proporciona una vista de 360 grados desde una ubicación. Las imágenes cumplen con la proyección equirrectangular (Plate Carrée), que contiene 360 grados de vista horizontal (vista envolvente completa) y 180 grados de vista vertical (del extremo superior al extremo inferior). La panorámica de 360 grados resultante define una proyección en una esfera con la imagen ajustada a la superficie bidimensional de esa esfera.

El objeto StreetViewPanorama proporciona un visor que renderiza la panorámica como una esfera con una cámara en el centro. Puedes manipular StreetViewPanoramaCamera para controlar el zoom y la orientación (inclinación y rumbo) de la cámara.

Comenzar

Sigue la guía de introducción para configurar un proyecto del SDK de Maps para Android. Luego, agrega una panorámica de Street View, tal como se describe a continuación.

En la biblioteca cliente del SDK de Servicios de Google Play se incluyen algunas muestras de Street View que puedes importar a tu proyecto y usar como base para el desarrollo. Consulta la introducción para obtener lineamientos sobre cómo importar las muestras.

Cómo usar la API

Sigue las instrucciones que aparecen a continuación para agregar una panorámica de Street View a un fragmento de Android. Será la manera más sencilla de agregar Street View a tu aplicación. Luego, obtén más información sobre los fragmentos, las vistas y la personalización de la panorámica.

Cómo agregar una panorámica de Street View

Para agregar una panorámica de Street View como esta, sigue estos pasos:

Demostración de panorámica de Street View

Resumen:

  1. Agrega un objeto Fragment a la actividad (Activity) que controlará la panorámica de Street View. La manera más fácil de hacerlo es agregar un elemento <fragment> al archivo de diseño de la actividad (Activity).
  2. Implementa la interfaz OnStreetViewPanoramaReadyCallback y utiliza el método de devolución de llamada onStreetViewPanoramaReady(StreetViewPanorama) a fin de generar un controlador para el objeto StreetViewPanorama.
  3. Llama a getStreetViewPanoramaAsync() en el fragmento para registrar la devolución de llamada.

A continuación, se ofrece información más detallada sobre cada paso.

Cómo agregar un fragmento

Agrega un elemento <fragment> al archivo de diseño de la actividad para definir un objeto Fragment. En este elemento, establece el atributo class en com.google.android.gms.maps.StreetViewPanoramaFragment (o SupportStreetViewPanoramaFragment).

A continuación, te mostramos un ejemplo de un fragmento de un archivo de diseño:

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

Cómo agregar código de Street View

Para trabajar con la panorámica de Street View dentro de tu app, debes implementar la interfaz OnStreetViewPanoramaReadyCallback y establecer una instancia de la devolución de llamada en un objeto StreetViewPanoramaFragment o StreetViewPanoramaView. En este instructivo, se usa un objeto StreetViewPanoramaFragment, ya que es la manera más sencilla de agregar Street View a tu app. El primer paso es implementar la interfaz de devolución de llamada:

Java

class StreetViewActivity extends AppCompatActivity implements OnStreetViewPanoramaReadyCallback {
    // ...
}
      

Kotlin

internal class StreetViewActivity : AppCompatActivity(), OnStreetViewPanoramaReadyCallback {
    // ...
        // ...
    }

    override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) {
        val sanFrancisco = LatLng(37.754130, -122.447129)
        streetViewPanorama.setPosition(sanFrancisco)
    }

    private fun newView() {
        val sanFrancisco = LatLng(37.754130, -122.447129)
        val view = StreetViewPanoramaView(
            this,
            StreetViewPanoramaOptions().position(sanFrancisco)
        )
    }

    private fun setLocationOfThePanorama(streetViewPanorama: StreetViewPanorama) {
        val sanFrancisco = LatLng(37.754130, -122.447129)

        // Set position with LatLng only.
        streetViewPanorama.setPosition(sanFrancisco)

        // Set position with LatLng and radius.
        streetViewPanorama.setPosition(sanFrancisco, 20)

        // Set position with LatLng and source.
        streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR)

        // Set position with LaLng, radius and source.
        streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR)

        streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink ->
            streetViewPanorama.setPosition(link.panoId)
        }
    }

    private fun zoom(streetViewPanorama: StreetViewPanorama) {
        val zoomBy = 0.5f
        val camera = StreetViewPanoramaCamera.Builder()
            .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy)
            .tilt(streetViewPanorama.panoramaCamera.tilt)
            .bearing(streetViewPanorama.panoramaCamera.bearing)
            .build()
    }

    private fun pan(streetViewPanorama: StreetViewPanorama) {
        val panBy = 30f
        val camera = StreetViewPanoramaCamera.Builder()
            .zoom(streetViewPanorama.panoramaCamera.zoom)
            .tilt(streetViewPanorama.panoramaCamera.tilt)
            .bearing(streetViewPanorama.panoramaCamera.bearing - panBy)
            .build()
    }

    private fun tilt(streetViewPanorama: StreetViewPanorama) {
        var tilt = streetViewPanorama.panoramaCamera.tilt + 30
        tilt = if (tilt > 90) 90f else tilt
        val previous = streetViewPanorama.panoramaCamera
        val camera = StreetViewPanoramaCamera.Builder(previous)
            .tilt(tilt)
            .build()
    }

    private fun animate(streetViewPanorama: StreetViewPanorama) {
        // Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
        val duration: Long = 1000
        val camera = StreetViewPanoramaCamera.Builder()
            .zoom(streetViewPanorama.panoramaCamera.zoom)
            .tilt(streetViewPanorama.panoramaCamera.tilt)
            .bearing(streetViewPanorama.panoramaCamera.bearing - 60)
            .build()
        streetViewPanorama.animateTo(camera, duration)
    }
}
      

En el método onCreate() de tu actividad (Activity) establece el archivo de diseño como la vista de contenido. Por ejemplo, si el archivo de diseño tiene el nombre main.xml, utiliza este código:

Java

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_street_view);
    SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
        (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
            .findFragmentById(R.id.street_view_panorama);
    streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);
}
      

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_street_view)
    // ...
}
      

A fin de generar un controlador para el fragmento, llama a FragmentManager.findFragmentById() y pásale el ID de recurso de tu elemento <fragment>. Ten en cuenta que el ID de recurso R.id.streetviewpanorama se agrega automáticamente al proyecto de Android cuando creas el archivo de diseño.

Luego, utiliza getStreetViewPanoramaAsync() para configurar la devolución de llamada en el fragmento.

Java

SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
    (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
        .findFragmentById(R.id.street_view_panorama);
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);
      

Kotlin

val streetViewPanoramaFragment =
    supportFragmentManager
        .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)
      

Utiliza el método de devolución de llamada onStreetViewPanoramaReady(StreetViewPanorama) a fin de recuperar una instancia no nula de StreetViewPanorama, lista para usar.

Java

@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
    LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
    streetViewPanorama.setPosition(sanFrancisco);
}
      

Kotlin

override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) {
    val sanFrancisco = LatLng(37.754130, -122.447129)
    streetViewPanorama.setPosition(sanFrancisco)
}
      

Más información sobre la configuración del estado inicial

A diferencia de lo que sucede con un mapa, no es posible configurar el estado inicial de la panorámica de Street View mediante XML. Sin embargo, puedes configurar la panorámica de manera programática pasando un objeto StreetViewPanoramaOptions que contenga las opciones que especificaste.

Java

LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
StreetViewPanoramaView view = new StreetViewPanoramaView(this,
    new StreetViewPanoramaOptions().position(sanFrancisco));
      

Kotlin

val sanFrancisco = LatLng(37.754130, -122.447129)
val view = StreetViewPanoramaView(
    this,
    StreetViewPanoramaOptions().position(sanFrancisco)
)
      

Más información sobre StreetViewPanoramaFragment

El objeto StreetViewPanoramaFragment es una subclase de la clase Android Fragment y te permite colocar una panorámica de Street View en un fragmento de Android. Los objetos StreetViewPanoramaFragment actúan como contenedores de la panorámica y proporcionan acceso al objeto StreetViewPanorama.

StreetViewPanoramaView

El objeto StreetViewPanoramaView, una subclase de la clase View de Android, te permite colocar una panorámica de Street View en un objeto View de Android. Un objeto View representa una sección rectangular de la pantalla y es un componente fundamental de las aplicaciones y los widgets para Android. De manera similar a un fragmento StreetViewPanoramaFragment, el objeto StreetViewPanoramaView actúa como un contenedor para la panorámica, lo que expone la funcionalidad principal a través del objeto StreetViewPanorama. Los usuarios de esta clase deben enviar todos los métodos del ciclo de vida de la actividad, como onCreate(), onDestroy(), onResume() y onPause()), a los métodos correspondientes en la clase StreetViewPanoramaView.

Cómo personalizar las funcionalidades controladas por el usuario

De manera predeterminada, las siguientes funcionalidades se encuentran disponibles para el usuario cuando mira la panorámica de Street View: desplazamiento lateral, zoom y acceso a panorámicas adyacentes. Puedes habilitar o inhabilitar los gestos controlados por el usuario mediante los métodos de StreetViewPanorama. Es posible, no obstante, realizar cambios programáticos cuando los gestos están inhabilitados.

Cómo establecer la ubicación de la panorámica

Para establecer la ubicación de la panorámica de Street View, llama a StreetViewPanorama.setPosition() y pasa un objeto LatLng. También puedes pasar radius y source como parámetros opcionales.

Un radio resulta útil si deseas ampliar o reducir el área en la que Street View buscará una panorámica coincidente. Un radio de valor 0 implica que la panorámica debe vincularse con exactitud al objeto LatLng especificado. El radio predeterminado es de 50 metros. Si hay más de una panorámica en el área coincidente, la API mostrará la mejor coincidencia.

Una fuente resulta útil si deseas restringir Street View para que busque únicamente las panorámicas al aire libre. De manera predeterminada, las panorámicas de Street View podrían encontrarse en el interior de ciertos lugares, como museos, edificios públicos, cafeterías y negocios. Ten en cuenta que es posible que no existan panorámicas al aire libre para la ubicación especificada.

Java

LatLng sanFrancisco = new LatLng(37.754130, -122.447129);

// Set position with LatLng only.
streetViewPanorama.setPosition(sanFrancisco);

// Set position with LatLng and radius.
streetViewPanorama.setPosition(sanFrancisco, 20);

// Set position with LatLng and source.
streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR);

// Set position with LaLng, radius and source.
streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR);
      

Kotlin

val sanFrancisco = LatLng(37.754130, -122.447129)

// Set position with LatLng only.
streetViewPanorama.setPosition(sanFrancisco)

// Set position with LatLng and radius.
streetViewPanorama.setPosition(sanFrancisco, 20)

// Set position with LatLng and source.
streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR)

// Set position with LaLng, radius and source.
streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR)
      

También puedes establecer la ubicación en función de un ID de panorámica pasando un objeto panoId a StreetViewPanorama.setPosition().

A fin de recuperar el ID de panorámica para las panorámicas adyacentes, primero usa getLocation() para recuperar un objeto StreetViewPanoramaLocation. Este objeto contiene el ID de la panorámica actual y un array de objetos StreetViewPanoramaLink, cada uno de los cuales contiene el ID de una panorámica conectada a la panorámica actual.

Java

StreetViewPanoramaLocation location = streetViewPanorama.getLocation();
if (location != null && location.links != null) {
    streetViewPanorama.setPosition(location.links[0].panoId);
}
      

Kotlin

streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink ->
    streetViewPanorama.setPosition(link.panoId)
}
      

Cómo acercar y alejar la imagen

Para cambiar el nivel de zoom de manera programática, configura StreetViewPanoramaCamera.zoom. La configuración del zoom en 1.0 duplicará el tamaño de la imagen.

En el siguiente fragmento, se usa StreetViewPanoramaCamera.Builder() para construir una nueva cámara con la inclinación y el rumbo de la existente y, al mismo tiempo, se aumenta el zoom en un cincuenta por ciento.

Java

float zoomBy = 0.5f;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom + zoomBy)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing)
    .build();
      

Kotlin

val zoomBy = 0.5f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing)
    .build()
      

Cómo configurar la orientación (punto de vista) de la cámara

Para determinar la orientación de la cámara de Street View, configura el rumbo y la inclinación en StreetViewPanoramaCamera.

bearing
Rumbo en que apunta la cámara, especificado en grados en sentido horario a partir del norte geográfico, alrededor del sitio de la cámara. El norte geográfico es el grado 0; el este, el 90; el sur, el 180, y el oeste, el 270.
tilt
Inclinación hacia arriba o abajo sobre el eje Y. El rango es de -90 a 0 y 90, donde -90 representa la posición extrema inferior, 0 la posición centrada en el horizonte y 90 la posición extrema superior. La variación se mide a partir de la inclinación inicial predeterminada de la cámara, que a menudo (no siempre) es horizontal y plana. Por ejemplo, una imagen que se toma en una colina posiblemente tenga una inclinación predeterminada que no es horizontal.

En el siguiente fragmento, se usa StreetViewPanoramaCamera.Builder() para construir una nueva cámara con el zoom y la inclinación de la existente y, al mismo tiempo, se modifica el rumbo 30 grados hacia la izquierda.

Java

float panBy = 30;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing - panBy)
    .build();
      

Kotlin

val panBy = 30f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - panBy)
    .build()
      

En el siguiente fragmento se inclina la cámara 30 grados hacia arriba.

Java

float tilt = streetViewPanorama.getPanoramaCamera().tilt + 30;
tilt = (tilt > 90) ? 90 : tilt;

StreetViewPanoramaCamera previous = streetViewPanorama.getPanoramaCamera();

StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build();
      

Kotlin

var tilt = streetViewPanorama.panoramaCamera.tilt + 30
tilt = if (tilt > 90) 90f else tilt
val previous = streetViewPanorama.panoramaCamera
val camera = StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build()
      

Cómo animar los movimientos de la cámara

Para animar los movimientos de la cámara, llama a StreetViewPanorama.animateTo(). En la animación se interpolan los atributos actuales y los nuevos de la cámara. Si deseas ir directamente a la cámara sin animación, puedes configurar la duración en 0.

Java

// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
long duration = 1000;
StreetViewPanoramaCamera camera =
    new StreetViewPanoramaCamera.Builder()
        .zoom(streetViewPanorama.getPanoramaCamera().zoom)
        .tilt(streetViewPanorama.getPanoramaCamera().tilt)
        .bearing(streetViewPanorama.getPanoramaCamera().bearing - 60)
        .build();
streetViewPanorama.animateTo(camera, duration);
      

Kotlin

// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
val duration: Long = 1000
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - 60)
    .build()
streetViewPanorama.animateTo(camera, duration)
      

En la siguiente imagen, se muestra el resultado que se obtiene si programas la animación anterior para que se ejecute cada 2,000 milisegundos mediante Handler.postDelayed():

Demostración de animación de panorámica de Street View