Aspectos avanzados de Android 09.1: Google Maps

1. Te damos la bienvenida

Este codelab es parte del curso de capacitación sobre desarrollo avanzado de Android, desarrollado por el equipo de capacitación de Google Developers. Aprovecharás al máximo este curso si trabajas con los codelabs de forma secuencial.

Para obtener detalles completos sobre el curso, consulta la descripción general de Advanced Android Development.

Introducción

Crear apps con Google Maps te permite agregar funciones a tu app, como imágenes satelitales, controles de IU sólidos, seguimiento de ubicaciones y marcadores de ubicación. Puedes agregar valor a Google Maps estándar mostrando información de tu propio conjunto de datos, como las ubicaciones de áreas de pesca o escalada conocidas. También puedes crear juegos vinculados al mundo real, como Pokémon Go.

En este ejercicio práctico, crearás una app de Google Maps llamada Wander.

Conocimientos que ya deberías tener

Debes estar familiarizado con lo siguiente:

  • Funcionalidad básica de Google Maps
  • Permisos de tiempo de ejecución
  • Crear, compilar y ejecutar apps en Android Studio
  • Incluir bibliotecas externas en tu archivo build.gradle

Qué aprenderás

  • Integra un mapa de Google en tu app.
  • Mostrar diferentes tipos de mapas
  • Aplica un diseño al mapa de Google.
  • Agrega marcadores a tu mapa.
  • Permite al usuario colocar un marcador en un punto de interés (POI).
  • Habilita el seguimiento de la ubicación.
  • Habilita Google Street View.

Actividades

  • Obtén una clave de API de la Consola de APIs de Google y regístrala en tu app.
  • Crea la app de Wander, que tiene un mapa de Google incorporado.
  • Agrega funciones personalizadas a tu app, como marcadores, estilos y seguimiento de la ubicación.
  • Habilita el seguimiento de la ubicación y Street View en tu app.

2. Descripción general de la app

En esta práctica, crearás la app de Wander, que es un mapa de Google Maps con diseño. La app de Wander te permite colocar marcadores en ubicaciones, ver tu ubicación en tiempo real y mirar panoramas de Street View.

Un mapa de Google Maps con diseño

Google Street View en una app para Android

3. Tarea 1: Configura el proyecto y obtén una clave de API

La API de Google Maps, al igual que la API de Places, requiere una clave de API. Para obtener la clave de API, debes registrar tu proyecto en la Consola de APIs de Google. La clave de API está vinculada a un certificado digital que asocia la app con su autor. Para obtener más información sobre el uso de certificados digitales y la firma de tu app, consulta Firma tu app.

En este ejercicio práctico, usarás la clave de API para el certificado de depuración. El certificado de depuración no es seguro por diseño, como se describe en Firma tu compilación de depuración. Las apps para Android publicadas que usan la API de Google Maps requieren una segunda clave de API: la clave del certificado de lanzamiento. Para obtener más información sobre cómo obtener un certificado de lanzamiento, consulta Obtén una clave de API.

Android Studio incluye una plantilla de actividad de Google Maps que genera código de plantilla útil. El código de la plantilla incluye un archivo google_maps_api.xml que contiene un vínculo que simplifica la obtención de una clave de API.

1.1 Crea el proyecto Wander con la plantilla de Maps

  1. Crea un proyecto nuevo de Android Studio.
  2. Asigna el nombre "Wander" a la nueva app. Acepta los valores predeterminados hasta que llegues a la página Add an Activity.
  3. Selecciona la plantilla Google Maps Activity.
  4. Deja los valores predeterminados de Activity Name y Layout Name.
  5. Cambia el Título a "Wander" y haz clic en Finalizar.

Android Studio crea varios archivos adicionales relacionados con los mapas:

google_maps_api**.xml**

Usarás este archivo de configuración para almacenar tu clave de API. La plantilla genera dos archivos google_maps_api.xml: uno para la depuración y otro para el lanzamiento. El archivo de la clave de API para el certificado de depuración se encuentra en src/debug/res/values. El archivo de la clave de API del certificado de lanzamiento se encuentra en src/release/res/values. En esta práctica, solo usamos el certificado de depuración.

activity_maps.xml

Este archivo de diseño contiene un solo fragmento que ocupa toda la pantalla. La clase SupportMapFragment es una subclase de la clase Fragment. Puedes incluir SupportMapFragment en un archivo de diseño con una etiqueta <fragment> en cualquier ViewGroup, con un atributo adicional:

android:name="com.google.android.gms.maps.SupportMapFragment"

MapsActivity.java

El archivo MapsActivity.java crea una instancia de la clase SupportMapFragment y usa el método getMapAsync() de la clase para preparar el mapa de Google Maps. La actividad que contiene el SupportMapFragment debe implementar la interfaz OnMapReadyCallback y el método onMapReady() de esa interfaz. El método getMapAsync() devuelve un objeto GoogleMap, lo que indica que el mapa se cargó.

1.2 Obtén la clave de API

  1. Abre la versión de depuración del archivo google_maps_api.xml.

El archivo incluye un comentario con una URL larga. Los parámetros de la URL incluyen información específica sobre tu app.

  1. Copia y pega la URL en un navegador.
  2. Sigue las indicaciones para crear un proyecto en la Consola de APIs de Google. Debido a los parámetros de la URL proporcionada, la consola de APIs sabe que debe habilitar automáticamente la API de Google Maps para Android.
  3. Crea una clave de API y haz clic en Restringir clave para restringir el uso de la clave a las apps para Android. La clave de API generada debe comenzar con AIza.
  4. En el archivo google_maps_api.xml, pega la clave en la cadena google_maps_key donde dice YOUR_KEY_HERE.
  5. Ejecuta tu app. Tienes un mapa integrado en tu actividad, con un marcador establecido en Sídney, Australia. (El marcador de Sídney forma parte de la plantilla y lo cambiarás más adelante).

4. Tarea 2: Agrega tipos de mapas y marcadores

Google Maps incluye varios tipos de mapas: normal, híbrido, satelital, de terreno y "ninguno". En esta tarea, agregarás una barra de la app con un menú de opciones que le permita al usuario cambiar el tipo de mapa. Mueves la ubicación inicial del mapa a la ubicación de tu casa. Luego, agregarás compatibilidad con marcadores, que indican ubicaciones únicas en un mapa y pueden incluir una etiqueta.

2.1 Agrega tipos de mapas

El tipo de mapa que quiere usar el usuario depende del tipo de información que necesita. Cuando usas mapas para navegar en tu auto, es útil ver los nombres de las calles con claridad. Cuando haces senderismo, probablemente te preocupe más cuánto tienes que escalar para llegar a la cima de la montaña. En este paso, agregarás una barra de la app con un menú de opciones que le permita al usuario cambiar el tipo de mapa.

  1. Para crear un nuevo archivo XML de menú, haz clic con el botón derecho en el directorio res y selecciona New > Android Resource File.
  2. En el diálogo, asigna el nombre map_options al archivo. Elige Menú para el tipo de recurso. Haz clic en OK.
  3. Reemplaza el código del archivo nuevo por el siguiente para crear las opciones del mapa. Se omite el tipo de mapa "none" porque "none" genera la ausencia de cualquier mapa.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item android:id="@+id/normal_map"
       android:title="@string/normal_map"
       app:showAsAction="never"/>
   <item android:id="@+id/hybrid_map"
       android:title="@string/hybrid_map"
       app:showAsAction="never"/>
   <item android:id="@+id/satellite_map"
       android:title="@string/satellite_map"
       app:showAsAction="never"/>
   <item android:id="@+id/terrain_map"
       android:title="@string/terrain_map"
       app:showAsAction="never"/>
</menu>
  1. Crea recursos de cadenas para los atributos title.
  2. En el archivo MapsActivity, cambia la clase para que extienda la clase AppCompatActivity en lugar de extender la clase FragmentActivity. Si usas AppCompatActivity, se mostrará la barra de la app y, por lo tanto, se mostrará el menú.
  3. En MapsActivity, anula el método onCreateOptionsMenu() y expande el archivo map_options:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
   MenuInflater inflater = getMenuInflater();
   inflater.inflate(R.menu.map_options, menu);
   return true;
}
  1. Para cambiar el tipo de mapa, usa el método setMapType() en el objeto GoogleMap y pasa una de las constantes de tipo de mapa.

Anula el método onOptionsItemSelected(). Pega el siguiente código para cambiar el tipo de mapa cuando el usuario seleccione una de las opciones del menú:

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
       // Change the map type based on the user's selection.
       switch (item.getItemId()) {
           case R.id.normal_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
               return true;
           case R.id.hybrid_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
               return true;
           case R.id.satellite_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
               return true;
           case R.id.terrain_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
               return true;
           default:
               return super.onOptionsItemSelected(item);
       }
    }
  1. Ejecuta la app. Usa el menú de la barra de la app para cambiar el tipo de mapa. Observa cómo cambia la apariencia del mapa.

2.2 Mueve la ubicación predeterminada del mapa

De forma predeterminada, la devolución de llamada onMapReady() incluye código que coloca un marcador en Sídney, Australia, donde se creó Google Maps. La devolución de llamada predeterminada también anima el mapa para que se desplace a Sídney. En este paso, harás que el mapa se desplace hasta la ubicación de tu casa sin colocar un marcador y, luego, harás un acercamiento hasta el nivel que especifiques.

  1. En el método onMapReady(), quita el código que coloca el marcador en Sídney y mueve la cámara.
  2. Ve a www.google.com/maps en tu navegador y busca tu casa.
  3. Haz clic con el botón derecho en la ubicación y selecciona ¿Qué hay aquí?

Cerca de la parte inferior de la pantalla, aparece una pequeña ventana con información de la ubicación, incluidas la latitud y la longitud.

  1. Crea un objeto LatLng nuevo llamado home. En el objeto LatLng, usa las coordenadas que encontraste en Google Maps en el navegador.
  2. Crea una variable float llamada zoom y establécela en el nivel de zoom inicial que desees. En la siguiente lista, se indica el nivel de detalle que se muestra en cada nivel de zoom:
  • 1: Mundial
  • 5: Tierra firme y continente
  • 10: Ciudad
  • 15: Calles
  • 20: Edificios
  1. Crea un objeto CameraUpdate con CameraUpdateFactory.newLatLngZoom(), pasando tu objeto LatLng y la variable zoom. Para desplazar y hacer zoom con la cámara, llama a moveCamera() en el objeto GoogleMap y pasa el nuevo objeto CameraUpdate:
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(home, zoom));
  1. Ejecuta la app. El mapa debería desplazarse hasta tu casa y acercarse al nivel deseado.

2.3 Agrega marcadores de mapa

Google Maps puede destacar una ubicación con un marcador, que se crea con la clase Marker. El marcador predeterminado usa el ícono estándar de Google Maps: Marcador de Google Maps

Puedes extender los marcadores para mostrar información contextual en ventanas de información.

En este paso, agregarás un marcador cuando el usuario mantenga presionada una ubicación en el mapa. Luego, agrega un InfoWindow que muestre las coordenadas del marcador cuando se presione.

Una ventana de información para una chinche colocada

  1. Crea un stub de método en MapsActivity llamado setMapLongClick() que tome un final GoogleMap como argumento y devuelva void:
private void setMapLongClick(final GoogleMap map) {}
  1. Usa el método setOnMapLongClickListener() del objeto GoogleMap para colocar un marcador en el lugar donde el usuario mantiene el toque. Pasa una instancia nueva de OnMapLongClickListener que anule el método onMapLongClick(). El argumento entrante es un objeto LatLng que contiene las coordenadas de la ubicación en la que presionó el usuario:
private void setMapLongClick(final GoogleMap map) {
   map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
       @Override
       public void onMapLongClick(LatLng latLng) {
       }
   });
}
  1. Dentro de onMapLongClick(), llama al método addMarker(). Pasa un nuevo objeto MarkerOptions con la posición establecida en el LatLng pasado:
map.addMarker(new MarkerOptions().position(latLng));
  1. Llama a setMapLongClick() al final del método onMapReady(). Pasa mMap.
  2. Ejecuta la app. Mantén presionado el mapa para colocar un marcador en una ubicación.
  3. Presiona el marcador para centrarlo en la pantalla.

Los botones de navegación aparecen en la parte inferior izquierda de la pantalla y permiten que el usuario use la app de Google Maps para navegar a la posición marcada.

Para agregar una ventana de información al marcador, haz lo siguiente:

  1. En el objeto MarkerOptions, configura los campos title y snippet.
  2. En onMapLongClick(), establece el campo title en "Pin dejado". Configura el campo snippet en las coordenadas de ubicación dentro del método addMarker().
map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
   @Override
   public void onMapLongClick(LatLng latLng) {
       String snippet = String.format(Locale.getDefault(),
               "Lat: %1$.5f, Long: %2$.5f",
               latLng.latitude,
               latLng.longitude);

       map.addMarker(new MarkerOptions()
               .position(latLng)
               .title(getString(R.string.dropped_pin))
               .snippet(snippet));
   }
});
  1. Ejecuta la app. Mantén presionado el mapa para colocar un marcador de ubicación. Presiona el marcador para mostrar la ventana de información.

2.4 Agrega un objeto de escucha de PDI

De forma predeterminada, los lugares de interés aparecen en el mapa junto con sus íconos correspondientes. Los POI incluyen parques, escuelas, edificios gubernamentales y mucho más. Cuando el tipo de mapa se establece en normal, los POI comerciales también aparecen en el mapa. Estos representan a empresas como tiendas, restaurantes y hoteles.

En este paso, agregarás un GoogleMap.OnPoiClickListener al mapa. Este objeto de escucha de clics coloca un marcador en el mapa de inmediato, en lugar de esperar a que se mantenga presionado. El objeto de escucha de clics también muestra la ventana de información que contiene el nombre del PDI.

Marcador de lugar de interés

  1. Crea un método auxiliar en MapsActivity llamado setPoiClick() que tome un final GoogleMap como argumento y muestre void:
private void setPoiClick(final GoogleMap map) {}
  1. En el método setPoiClick(), establece un OnPoiClickListener en el GoogleMap que se pasó:
map.setOnPoiClickListener(new GoogleMap.OnPoiClickListener() {
   @Override
   public void onPoiClick(PointOfInterest poi) {
   }
});
  1. En el método onPoiClick(), coloca un marcador en la ubicación del PDI. Establece el título como el nombre del PDI. Guarda el resultado en una variable llamada poiMarker.
public void onPoiClick(PointOfInterest poi) {
   Marker poiMarker = mMap.addMarker(new MarkerOptions()
       .position(poi.latLng)
       .title(poi.name);
}
  1. Llama a showInfoWindow() en poiMarker para mostrar la ventana de información de inmediato.
poiMarker.showInfoWindow();
  1. Llama a setPoiClick() al final de onMapReady(). Pasa mMap.
  2. Ejecuta la app y busca un PDI, como un parque. Presiona el PDI para colocar un marcador en él y mostrar su nombre en una ventana de información.

5. Tarea 3: Elige un estilo para tu mapa

Puedes personalizar Google Maps de muchas maneras para darle a tu mapa un aspecto único.

Puedes personalizar un objeto MapFragment con los atributos XML disponibles, como lo harías con cualquier otro fragmento. Sin embargo, en este paso, personalizarás la apariencia del contenido del MapFragment con métodos en el objeto GoogleMap. Usas el Asistente de diseño en línea para agregar un diseño a tu mapa y personalizar tus marcadores. También puedes agregar un GroundOverlay a la ubicación de tu casa que se ajusta y gira con el mapa.

3.1 Agrega un diseño a tu mapa

Para crear un diseño personalizado para tu mapa, genera un archivo JSON que especifique cómo se muestran los elementos del mapa.No es necesario que crees este archivo JSON de forma manual: Google proporciona el Asistente de diseño, que genera el JSON por ti después de que diseñes visualmente tu mapa. En este ejercicio práctico, le aplicarás un estilo al mapa para el "modo nocturno", lo que significa que el mapa usará colores tenues y un contraste bajo para su uso durante la noche.

  1. Navega a https://mapstyle.withgoogle.com/ en tu navegador.
  2. Selecciona Crear un diseño.
  3. Selecciona el tema Noche.
  4. Haz clic en Más opciones en la parte inferior del menú.
  5. En la parte inferior de la lista Tipo de componente, selecciona Agua > Relleno. Cambia el color del agua a un azul oscuro (por ejemplo, #160064).
  6. Haz clic en Finalizar. Copia el código JSON de la ventana emergente resultante.
  7. En Android Studio, crea un directorio de recursos llamado raw en el directorio res. Crea un archivo en res/raw llamado map_style.json.
  8. Pega el código JSON en el nuevo archivo de recursos.
  9. Para establecer el diseño JSON en el mapa, llama a setMapStyle() en el objeto GoogleMap. Pasa un objeto MapStyleOptions, que carga el archivo JSON. El método setMapStyle() devuelve un valor booleano que indica si el diseño se aplicó correctamente. Si no se puede cargar el archivo, el método arroja un Resources.NotFoundException.

Copia el siguiente código en el método onMapReady() para definir el diseño del mapa. Es posible que debas crear una cadena TAG para tus instrucciones de registro:

     try {
        // Customize the styling of the base map using a JSON object defined
        // in a raw resource file.
        boolean success = googleMap.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
                   this, R.raw.map_style));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
     } catch (Resources.NotFoundException e) {
        Log.e(TAG, "Can't find style. Error: ", e);
     }
  1. Ejecuta tu app. El nuevo diseño debería ser visible cuando el mapa esté en modo normal.

Mapa de Google en estilo de modo nocturno

3.2 Aplica estilo a tu marcador

Puedes personalizar aún más tu mapa aplicando un diseño a los marcadores. En este paso, cambiarás los marcadores rojos predeterminados para que coincidan con el esquema de colores del modo nocturno.

  1. En el método onMapLongClick(), agrega la siguiente línea de código al constructor MarkerOptions() para usar el marcador predeterminado, pero cambiar el color a azul:
.icon(BitmapDescriptorFactory.defaultMarker
       (BitmapDescriptorFactory.HUE_BLUE))
  1. Ejecuta la app. Los marcadores que colocas ahora están sombreados en azul, lo que es más coherente con el tema de modo nocturno de la app.

Ten en cuenta que los marcadores de PDI siguen siendo rojos, ya que no agregaste diseño al método onPoiClick().

3.3 Agrega una superposición

Una forma de personalizar el mapa de Google es dibujar sobre él. Esta técnica es útil si deseas destacar un tipo de ubicación en particular, como los lugares de pesca populares. Se admiten tres tipos de superposiciones:

  • Formas: Puedes agregar polilíneas, polígonos y círculos al mapa.
  • Objetos TileOverlay: Una superposición de mosaicos define un conjunto de imágenes que se agregan sobre los mosaicos del mapa base. Las superposiciones de mosaicos son útiles cuando deseas agregar muchas imágenes al mapa. Una superposición de mosaicos típica cubre un área geográfica grande.
  • Objetos GroundOverlay: Una superposición de suelo es una imagen que se fija a un mapa. A diferencia de los marcadores, las superposiciones de suelo se orientan hacia la superficie de la Tierra en lugar de hacia la pantalla. La rotación, la inclinación o el zoom del mapa cambian la orientación de la imagen. Las superposiciones de suelo resultan útiles cuando deseas fijar una sola imagen en un área del mapa.

En este paso, agregarás una superposición terrestre con la forma de un Android a la ubicación de tu casa.

  1. Descarga esta imagen de Android y guárdala en tu carpeta res/drawable.
  2. En onMapReady(), después de la llamada para mover la cámara a la posición inicial, crea un objeto GroundOverlayOptions. Asigna el objeto a una variable llamada homeOverlay:
GroundOverlayOptions homeOverlay = new GroundOverlayOptions();
  1. Usa el método BitmapDescriptorFactory.fromResource() para crear un objeto BitmapDescriptor a partir de la imagen anterior. Pasa el objeto al método image() del objeto GroundOverlayOptions:
GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.android));
  1. Llama al método position() para establecer la propiedad position del objeto GroundOverlayOptions. Pasa el objeto home LatLng y un float para el ancho en metros de la superposición deseada. Para este ejemplo, un ancho de 100 m funciona bien:
GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
     .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
       .position(home, 100);
  1. Llama a addGroundOverlay() en el objeto GoogleMap. Pasa tu objeto GroundOverlayOptions:
mMap.addGroundOverlay(homeOverlay);
  1. Ejecuta la app. Acercar la ubicación de tu casa y verás la imagen de Android como una superposición.

6. Tarea 4: Habilita el seguimiento de la ubicación y Street View

Los usuarios suelen usar Google Maps para ver su ubicación actual, y tú puedes obtener la ubicación del dispositivo con la API de Location Services. Para mostrar la ubicación del dispositivo en tu mapa sin usar más datos de Location, puedes usar la capa de datos de ubicación.

La capa de datos de ubicación agrega un botón Mi ubicación en la parte superior derecha del mapa. Cuando el usuario presiona el botón, el mapa se centra en la ubicación del dispositivo. La ubicación se muestra como un punto azul si el dispositivo está quieto y como un corchete angular azul si está en movimiento.

Un mapa de Google Maps con diseño y seguimiento de la ubicación

Puedes proporcionar información adicional sobre una ubicación con Google Street View, que es una foto panorámica navegable de una ubicación determinada.

En esta tarea, habilitarás la capa de datos de ubicación y Street View para que, cuando el usuario presione la ventana de información del marcador de POI, el mapa cambie al modo de Street View.

4.1 Habilita el seguimiento de la ubicación

Para habilitar el rastreo de la ubicación en Google Maps, se requiere una sola línea de código. Sin embargo, debes asegurarte de que el usuario haya otorgado permisos de ubicación (con el modelo de permisos de tiempo de ejecución).

En este paso, solicitarás permisos de ubicación y habilitarás el seguimiento de la ubicación.

  1. En el archivo AndroidManifest.xml, verifica que el permiso FINE_LOCATION ya esté presente. Android Studio insertó este permiso cuando seleccionaste la plantilla de Google Maps.
  2. Para habilitar el seguimiento de la ubicación en tu app, crea un método en MapsActivity llamado enableMyLocation() que no tome argumentos y no muestre nada.
  3. Define el método enableMyLocation(). Verifica si tienes el permiso ACCESS_FINE_LOCATION. Si se otorga el permiso, habilita la capa de ubicación. De lo contrario, solicita el permiso:
private void enableMyLocation() {
   if (ContextCompat.checkSelfPermission(this,
           Manifest.permission.ACCESS_FINE_LOCATION)
           == PackageManager.PERMISSION_GRANTED) {
       mMap.setMyLocationEnabled(true);
   } else {
       ActivityCompat.requestPermissions(this, new String[]
                       {Manifest.permission.ACCESS_FINE_LOCATION},
               REQUEST_LOCATION_PERMISSION);
   }
}
  1. Llama a enableMyLocation() desde la devolución de llamada onMapReady() para habilitar la capa de ubicación.
  2. Anula el método onRequestPermissionsResult(). Si se otorga el permiso, llama a enableMyLocation():
@Override
public void onRequestPermissionsResult(int requestCode,
       @NonNull String[] permissions,
       @NonNull int[] grantResults) {
   // Check if location permissions are granted and if so enable the
   // location data layer.
   switch (requestCode) {
       case REQUEST_LOCATION_PERMISSION:
           if (grantResults.length > 0
                   && grantResults[0]
                   == PackageManager.PERMISSION_GRANTED) {
               enableMyLocation();
               break;
           }
   }
}
  1. Ejecuta la app. En la esquina superior derecha, ahora se encuentra el botón Mi ubicación, que muestra la ubicación actual del dispositivo.

4.2 Habilita Street View

Google Maps proporciona Street View, que es una vista panorámica de una ubicación con controles para navegar por una ruta designada. Street View no tiene cobertura global.

En este paso, habilitarás una panorámica de Street View que se activará cuando el usuario presione la ventana de información de un PDI. Debes hacer dos cosas:

  1. Distingue los marcadores de POI de otros marcadores, ya que deseas que la funcionalidad de tu app funcione solo en los marcadores de POI. De esta manera, puedes iniciar Street View cuando el usuario presiona una ventana de información de un POI, pero no cuando presiona cualquier otro tipo de marcador.

La clase Marker incluye un método setTag() que te permite adjuntar datos. (Los datos pueden ser cualquier elemento que se extienda desde Object). Establecerás una etiqueta en los marcadores que se crean cuando los usuarios hacen clic en los POI.

  1. Cuando el usuario presione una ventana de información etiquetada en un OnInfoWindowClickListener, reemplaza el MapFragment por un StreetViewPanoramaFragment. (El siguiente código usa SupportMapFragment y SupportStreetViewPanoramaFragment para admitir versiones de Android anteriores a la API 12).

Si alguno de los fragmentos cambia durante el tiempo de ejecución, debes agregarlos en la clase Activity contenedora y no de forma estática en XML.

Etiqueta el marcador de lugar de interés

  1. En la devolución de llamada onPoiClick(), llama a setTag() en poiMarker. Pasa cualquier cadena arbitraria:
poiMarker.setTag("poi");

Reemplaza el SupportMapFragment estático por una instancia del tiempo de ejecución

  1. Abre activity_maps.xml y cambia el elemento a un diseño de frame que servirá como contenedor para tus fragmentos:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/fragment_container"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />
  1. En onCreate() en MapsActivity, quita el código que encuentra el SupportMapFragment por ID, ya que ya no hay un SupportMapFragment estático en el XML. En su lugar, crea una instancia nueva del entorno de ejecución de SupportMapFragment llamando a SupportMapFragment.newInstance():
SupportMapFragment mapFragment = SupportMapFragment.newInstance();
  1. Agrega el fragmento al FrameLayout con una transacción de fragmento con el FragmentManager:
getSupportFragmentManager().beginTransaction()
       .add(R.id.fragment_container, mapFragment).commit();
  1. Conserva la línea de código que activa la carga asíncrona del mapa:
mapFragment.getMapAsync(this);

Cómo establecer un OnInfoWindowClickListener y verificar la etiqueta del marcador

  1. Crea un stub de método en MapsActivity llamado setInfoWindowClickToPanorama() que tome un GoogleMap como argumento y devuelva void:
private void setInfoWindowClickToPanorama(GoogleMap map) {}
  1. Establece un OnInfoWindowClickListener en GoogleMap:
map.setOnInfoWindowClickListener(
       new GoogleMap.OnInfoWindowClickListener() {
           @Override
           public void onInfoWindowClick(Marker marker) {
           }
       });
  1. En el método onInfoWindowClick(), verifica si el marcador contiene la etiqueta de cadena que configuraste en el método onPoiClick():
if (marker.getTag() == "poi") {}

Reemplaza SupportMapFragment por SupportStreetViewPanoramaFragment

  1. En el caso en que el marcador contenga la etiqueta, especifica la ubicación de la panorámica de Street View con un objeto StreetViewPanoramaOptions. Establece la propiedad position del objeto en la posición del marcador que se pasó:
StreetViewPanoramaOptions options =
       new StreetViewPanoramaOptions().position(
               marker.getPosition());
  1. Crea una instancia nueva de SupportStreetViewPanoramaFragment y pasa el objeto options que creaste:
SupportStreetViewPanoramaFragment streetViewFragment
       = SupportStreetViewPanoramaFragment
       .newInstance(options);
  1. Inicia una transacción de fragmento. Reemplaza el contenido del contenedor de fragmentos por el fragmento nuevo, streetViewFragment. Agrega la transacción a la pila de actividades para que, cuando se presione Atrás, se navegue de vuelta a SupportMapFragment y no se salga de la app:
getSupportFragmentManager().beginTransaction()
       .replace(R.id.fragment_container,
               streetViewFragment)
       .addToBackStack(null).commit();
  1. Llama a setInfoWindowClickToPanorama(mMap) en onMapReady() después de la llamada a setPoiClick()..
  2. Ejecuta la app. Haz zoom en una ciudad que tenga cobertura de Street View, como Mountain View (sede central de Google), y busca un PDI, como un parque. Presiona el PDI para colocar un marcador y mostrar la ventana de información. Presiona la ventana de información para ingresar al modo de Street View de la ubicación del marcador. Presiona el botón Atrás para volver al fragmento del mapa.

Google Street View en una app para Android

7. Código de solución

Código de solución Wander

8. Desafío de programación

Desafío: Si presionas la ventana de información de un PDI en una ubicación donde no hay cobertura de Street View, verás una pantalla negra.

9. Resumen

  • Para usar la API de Maps, necesitas una clave de API de la Consola de API de Google.
  • En Android Studio, usar la plantilla de actividad de Google Maps genera un Activity con un solo SupportMapFragment en el diseño de la app. La plantilla también agrega ACCESS_FINE_PERMISSION al manifiesto de la app, implementa OnMapReadyCallback en tu actividad y anula el método onMapReady() requerido.

Para cambiar el tipo de mapa de un objeto GoogleMap durante el tiempo de ejecución, usa el método GoogleMap.setMapType(). Un mapa de Google puede ser uno de los siguientes tipos de mapas:

  • Normal: Es un mapa de ruta típico. Muestra rutas, algunos elementos creados por el hombre y elementos naturales importantes, como ríos. También muestra etiquetas de rutas y elementos.
  • Híbrido: Muestra datos de fotos satelitales, además de los mapas de ruta. También muestra etiquetas de rutas y elementos.
  • Satélite: Datos de fotografías No se ven etiquetas de carreteras y elementos.
  • Terreno: Muestra datos topográficos. El mapa incluye colores, isolíneas y etiquetas relacionadas, y sombras que agregan perspectiva. También muestra algunas rutas y etiquetas.
  • None**: No hay mapa.

Acerca de Google Maps:

  • Un marcador es un indicador de una ubicación geográfica específica.
  • Cuando se presiona, el comportamiento predeterminado del marcador es mostrar una ventana de información con datos sobre la ubicación.
  • De forma predeterminada, los puntos de interés (POI) aparecen en el mapa básico con sus íconos correspondientes. Los POI incluyen parques, escuelas, edificios gubernamentales y mucho más.
  • Además, los POI comerciales (tiendas, restaurantes, hoteles y mucho más) aparecen de forma predeterminada en el mapa cuando el tipo de mapa es normal.
  • Puedes capturar clics en los POIs con OnPoiClickListener.
  • Puedes cambiar la apariencia visual de casi todos los elementos de un mapa de Google con el Asistente de diseño. El asistente de diseño genera un archivo JSON que pasas al mapa de Google con el método setMapStyle().
  • Puedes personalizar los marcadores cambiando el color predeterminado o reemplazando el ícono predeterminado del marcador por una imagen personalizada.

Otra información importante:

  • Usa una superposición de suelo para fijar una imagen a una ubicación geográfica.
  • Usa un objeto GroundOverlayOptions para especificar la imagen, su tamaño en metros y su posición. Pasa este objeto al método GoogleMap.addGroundOverlay() para establecer la superposición en el mapa.
  • Siempre que tu app tenga el permiso ACCESS_FINE_LOCATION, puedes habilitar el seguimiento de la ubicación con el método mMap.setMyLocationEnabled(true).
  • Google Street View proporciona vistas panorámicas de 360 grados de rutas designadas en su área de cobertura.
  • Usa el método StreetViewPanoramaFragment.newInstance() para crear un nuevo fragmento de Street View.
  • Para especificar las opciones de la vista, usa un objeto StreetViewPanoramaOptions. Pasa el objeto al método newInstance().

10. Más información

La documentación del concepto relacionado se encuentra en 9.1: API de Google Maps.

Documentación para desarrolladores de Android:

Documentación de referencia:

11. Actividades para el hogar

En esta sección, se enumeran las posibles actividades para el hogar para los alumnos que trabajan en este codelab como parte de un curso dirigido por un instructor. Depende del instructor hacer lo siguiente:

  • Si es necesario, asigna una tarea.
  • Comunicarles a los alumnos cómo enviar las actividades para el hogar.
  • Califica las actividades para el hogar.

Los instructores pueden usar estas sugerencias en la medida que quieran y deben asignar cualquier otra actividad para el hogar que consideren apropiada.

Si estás trabajando en este codelab por tu cuenta, usa estas actividades para el hogar para probar tus conocimientos.

Compila y ejecuta una app

  1. Crea una app nueva que use la plantilla de actividad de Google Maps, que carga Google Maps cuando se inicia la app.
  2. Cuando se cargue el mapa de Google, mueve la cámara a la ubicación de tu escuela, la de tu casa o alguna otra que tenga significado para ti.
  3. Agrega dos marcadores al mapa, uno en la ubicación de tu institución educativa y otro en tu casa o en alguna otra ubicación significativa.
  4. Personaliza los íconos de los marcadores cambiando el color predeterminado o reemplazando el ícono de marcador predeterminado por una imagen personalizada.

Sugerencia: Consulta la documentación de onMapReady (GoogleMap googleMap).

Responde estas preguntas:

Pregunta 1

¿Qué método se llama cuando se carga el mapa y está listo para usarse en la app?

Pregunta 2

¿Qué componentes de Android puedes usar para incluir Google Maps en tu app?

  • MapView y MapFragment
  • MapFragment y MapActivity
  • MapView y MapActivity
  • Solo MapFragment

Pregunta 3

¿Qué tipos de mapas ofrece la API de Google Maps para Android?

  • Normal, híbrido, de terreno, satelital y de ruta
  • Normal, híbrido, terreno, satelital y "ninguno"
  • Híbrido, terreno, satelital, mapa de ruta y "ninguno"
  • Normal, terreno, satélite, mapa de imágenes y "ninguno"

Pregunta 4

¿Qué interfaz implementas para agregar funcionalidad de clic a un lugar de interés (POI)?

  • GoogleMap.OnPoiListener
  • GoogleMap.OnPoiClickListener
  • GoogleMap.OnPoiClick
  • GoogleMap.OnPoiClicked

Envía tu app para que se la califique

Orientación para calificadores

Verifica que la app tenga las siguientes funciones:

  • Cuando se inicia la app, el mapa de Google Maps se muestra correctamente, lo que indica que se generó una clave de API de forma adecuada.
  • Después de que se cargue el mapa de Google, la cámara se moverá a la ubicación de la casa o la escuela del estudiante. En el código, este paso debe ocurrir en el método de devolución de llamada onMapReady (GoogleMap googleMap).
  • Los marcadores se muestran en la ubicación de la escuela del estudiante y en otra ubicación, como su casa.
  • Los dos marcadores están personalizados. Por ejemplo, los marcadores usan un color diferente del rojo predeterminado o un ícono personalizado.

12. Próximo codelab

Para ver todos los codelabs del curso de capacitación Desarrollo avanzado de Android, visita la página de destino de los codelabs de Desarrollo avanzado de Android.