1. Code
  2. Mobile Development
  3. Android Development

SDK de Android: Trabajar con Google Maps - Configuración del mapa

Con la API de Google Maps para Android, puedes crear aplicaciones con funciones de localización. En esta serie, estamos creando una aplicación para Android en la que la ubicación del usuario se presenta en un mapa, al igual que los lugares de interés cercanos. En esta parte usaremos la clase GoogleMap para mostrar la ubicación del usuario y también para controlar cómo se presenta el mapa al usuario. ¡También crearemos marcadores de mapa personalizados!
Scroll to top

Spanish (Español) translation by steven (you can also view the original English article)

Con la API de Google Maps para Android, puedes crear aplicaciones con funciones de localización. En esta serie, estamos creando una aplicación para Android en la que la ubicación del usuario se presenta en un mapa, al igual que los lugares de interés cercanos. En esta parte usaremos la clase GoogleMap para mostrar la ubicación del usuario y también para controlar cómo se presenta el mapa al usuario. ¡También crearemos marcadores de mapa personalizados!

Esta es la segunda de cuatro partes de una serie de tutoriales sobre el uso de Google Maps y Google Places en aplicaciones de Android:

Recuerda que la aplicación que estamos creando en esta serie no funcionará en un emulador de Android, ¡solo en un dispositivo real!

App We Are Working TowardsApp We Are Working TowardsApp We Are Working Towards
Esta es una instantánea de la aplicación final.

1. Crea los elementos de la interfaz de usuario

Paso 1

Cuando visualicemos el mapa, colocaremos marcadores encima de él. Estos marcadores indicarán la ubicación del usuario y los lugares de interés cercanos. Cuando agregas un marcador a un mapa de Google, puedes configurar varios aspectos del mismo, incluido el texto que aparece en él y el icono que se muestra. Para esta aplicación, usaremos la siguiente colección de iconos. Siéntete libre de descargarlos y usarlos (también puedes encontrarlos en la descarga del código fuente de este tutorial):

User Location Marker
Icono de marcador de ubicación de usuario
Blue Marker
Icono de marcador de lugar azul
Red Marker
Icono de marcador de lugar rojo
Green Marker
Icono de marcador de lugar verde
Purple Marker
Icono de marcador de lugar morado

El icono amarillo indica la ubicación del usuario. Usaremos los otros colores para marcar lugares de tipos particulares en el área. Cuando obtienes datos de lugares de la API de Google Places, cada lugar se asocia con uno o más tipos de categorías. Para los propósitos de esta serie de tutoriales, buscaremos lugares enumerados con los siguientes tipos: comida, bar, tienda, museo y galería de arte. Usaremos el ícono rojo para indicar comida, azul para bebida, verde para compras y morado para todos los demás lugares devueltos. Por supuesto, podrás modificar los tipos de lugares que devuelve tu aplicación si lo deseas.

Coloca los iconos de tu marcador en las carpetas de elementos de diseño de tu aplicación.

Paso 2

Ahora podemos incluirlos en el código de actividad para que podamos referirnos a ellos como parte de la interfaz de usuario. En la actividad principal de tu aplicación, agrega las siguientes variables de instancia, que usaremos para almacenar los valores de ID de recursos dibujables para cada ícono de marcador:

1
private int userIcon, foodIcon, drinkIcon, shopIcon, otherIcon;

Dentro del método onCreate después del código existente, inicializa estas variables:

1
userIcon = R.drawable.yellow_point;
2
foodIcon = R.drawable.red_point;
3
drinkIcon = R.drawable.blue_point;
4
shopIcon = R.drawable.green_point;
5
otherIcon = R.drawable.purple_point;

Nos referiremos a estos cuando agreguemos los Marcadores al mapa.


2. Crear un objeto de tipo mapa de Google

Paso 1

Para el código que usaremos en el resto de este tutorial, debes agregar las siguientes declaraciones de importación a tu clase de actividad:

1
import com.google.android.gms.maps.CameraUpdateFactory;
2
import com.google.android.gms.maps.GoogleMap;
3
import com.google.android.gms.maps.MapFragment;
4
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
5
import com.google.android.gms.maps.model.LatLng;
6
import com.google.android.gms.maps.model.Marker;
7
import com.google.android.gms.maps.model.MarkerOptions;
8
9
import android.location.Location;
10
import android.location.LocationManager;
11
import android.content.Context;

Hemos colocado un mapa en la actividad principal de la aplicación al incluir un Fragmento de mapa en el archivo de diseño, pero por el momento no tenemos control sobre él en el código Java. Consigamos ahora una referencia a este como un objeto GoogleMap. En tu clase de actividad agrega una variable de instancia para ello:

1
private GoogleMap theMap;

En el método onCreate después del código existente, agrega un condicional para verificar si el mapa ha sido instanciado (en caso de que ya lo tengamos cuando onCreate se ejecuta después de la primera ejecución):

1
if(theMap==null){
2
    //map not instantiated yet

3
}

El resto del procesamiento onCreate se colocará en este bloque condicional. Dentro de él, primero intenta obtener el mapa del Administrador de fragmentos:

1
theMap = ((MapFragment)getFragmentManager().findFragmentById(R.id.the_map)).getMap();

Pasaremos el ID que le dimos al Fragmento de mapa en el XML de diseño, lo convertiremos en un objeto MapFragment e intentaremos recuperar el objeto GoogleMap de él. Si los recursos de los servicios de Google Play no están disponibles en el dispositivo del usuario, esto devolverá un valor nulo, así que agrega otro condicional antes de continuar:

1
if(theMap != null){
2
    //ok - proceed

3
}

Ahora sabemos que la aplicación no intentará realizar el procesamiento de mapas si los paquetes requeridos no están instalados en el dispositivo del usuario.

Paso 2

Ahora podemos realizar manipulaciones en el mapa usando la clase GoogleMap. Comencemos configurando el tipo de mapa. Podemos elegir entre satélite, terreno, normal e híbrido, que corresponden a las opciones que ves en la propia aplicación de Google Maps. Vamos por el híbrido:

1
theMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);

Aquí hay una descripción general de los tipos de mapas:

HybridHybridHybrid
Híbrido
NormalNormalNormal
Normal
SatelliteSatelliteSatellite
Satélite
TerrainTerrainTerrain
Terreno

En esta etapa, puedes experimentar ejecutando la aplicación con los diferentes tipos de mapas establecidos. Como proyecto avanzado, puedes agregar un control de interfaz de usuario para permitir que el usuario elija entre los tipos.


3. Mostrar la ubicación del usuario

Paso 1

La aplicación mostrará la última ubicación registrada del usuario. Dado que realiza este proceso más de una vez, cuando la aplicación se ejecuta por primera vez y luego cuando cambia la ubicación del usuario, colocaremos el código en un método auxiliar. Agrega el siguiente esquema de método después de tu método onCreate:

1
private void updatePlaces(){
2
//update location

3
}

En la parte superior de la clase, agrega la siguiente variable para representar una instancia de Administrador de locación:

1
private LocationManager locMan;

De vuelta en el método updatePlaces, intenta obtener esto:

1
locMan = (LocationManager)getSystemService(Context.LOCATION_SERVICE);

Ahora podemos usar esto para obtener la última ubicación registrada del usuario:

1
Location lastLoc = locMan.getLastKnownLocation(LocationManager.NETWORK_PROVIDER);

Necesitaremos la longitud y la latitud para marcar esta ubicación en el mapa, así que debemos obtenerlas ahora como variables de tipo double:

1
double lat = lastLoc.getLatitude();
2
double lng = lastLoc.getLongitude();

Podemos envolverlos en un objeto LatLng para pasar al objeto Marcador de mapa que crearemos pronto:

1
LatLng lastLatLng = new LatLng(lat, lng);

Paso 2

Ahora tenemos la última longitud y latitud conocidas del usuario, por lo que podemos usar esta información para marcar la ubicación en el mapa. Para hacer esto usaremos un objeto Marcador. Dado que la ubicación del usuario se actualizará continuamente, agreguemos una variable de instancia en la parte superior de la declaración de clase para representar su Marcador:

1
private Marker userMarker;

De vuelta dentro de updatePlaces, primero verifiquemos si el Marcardor ya ha sido instanciado, en cuyo caso podemos eliminarlo:

1
if(userMarker!=null) userMarker.remove();

Esto significará que después de la primera vez que se agrega el Marcador al mapa, cuando se actualiza la ubicación del usuario, la aplicación eliminará el Marcador anterior para que pueda ser reemplazado por uno que represente la ubicación actualizada. Ahora creemos una instancia del Marcador. Puedes pasar varias configuraciones a la clase Marcadador, incluidos los detalles de la ubicación y los detalles de la pantalla, como el etiquetado de iconos y texto. Crea el marcador y agrégalo al mapa:

1
userMarker = theMap.addMarker(new MarkerOptions()
2
	.position(lastLatLng)
3
	.title("You are here")
4
	.icon(BitmapDescriptorFactory.fromResource(userIcon))
5
	.snippet("Your last recorded location"));

Tómate un momento para revisar este código. Primero le indicamos al objeto de mapa que agregue un nuevo Marcador, instanciando el nuevo objeto Marcador al mismo tiempo. Pasamos la posición de latitud y longitud, una cadena de texto para el título, el icono de ubicación del usuario que creamos y configuramos como una variable de instancia, luego un fragmento de cadena de texto que aparecerá cuando el usuario toque el Marcador.

Paso 3

Ahora que tenemos marcada la posición del usuario, animemos la cámara del mapa para acercar la ubicación. Esta vez usaremos el objeto GoogleMap, llamando al método animateCamera:

1
theMap.animateCamera(CameraUpdateFactory.newLatLng(lastLatLng), 3000, null);

Pasamos una actualización de la cámara que comprende la ubicación del usuario, un valor de duración y un valor nulo para el parámetro del método de devolución de llamada opcional.

Ahora podemos llamar al nuevo método auxiliar, al que agregaremos más código más adelante. De vuelta en tu método onCreate, después de configurar el tipo de mapa:

1
updatePlaces();

Puedes ejecutar tu aplicación ahora para acercar la última ubicación registrada en tu dispositivo. También vale la pena explorar los métodos disponibles para configurar las opciones con el objeto GoogleMap y para hacer zoom en las ubicaciones. También puedes agregar superposiciones al mapa con métodos para varias formas y otros elementos visuales.

User LocationUser LocationUser Location
Ubicación del usuario

Conclusión

En este tutorial, exploramos cómo manipular el objeto del mapa y creamos íconos para nuestros marcadores de ubicación. También recuperamos y mostramos la ubicación del usuario, acercándola cuando se ejecuta la aplicación. En las siguientes dos partes de la serie, configuraremos el acceso a la API para Google Places y pasaremos la ubicación del usuario para recuperar lugares de interés cercanos. Colocaremos marcadores adicionales en el mapa para mostrar información sobre estos lugares, actualizándose a medida que el usuario se mueve. Aunque tenemos un conjunto específico de funcionalidades en mente para esta aplicación, es posible que desees explorar las posibilidades de las diversas clases de mapas y ubicación a medida que avanzamos, ¡ya que hay muchas características disponibles para experimentar!