google maps en android

Usando Google Maps con Android

Escrito por Condesa | Friday, October 7, 2011 a las 6:54 pm | 7 Comentarios

La plataforma Android ofrece una integración sencilla y estrecha entre las aplicaciones Android y Google Maps. No es un secreto que la parte divertida de crear aplicaciones complejas es hacer uso de las distintas API’s de otros servicios web para precisamente potenciar las funcionalidades de nuestras aplicaciones.

Tal y como les habíamos comentado por Twitter, el día de hoy les compartimos un tutorial en el que aprenderemos las bases necesarias para empezar a hacer uso Google Maps en nuestras aplicaciones Android.

Preparando nuestro entorno de desarrollo

1. Con el fin de utilizar Google Maps, es necesario que nos descarguemos la API de Google para agregarla a nuestro SDK desde Eclipse.

Para comprobar si ya la tenemos, nos dirigimos a la opción Window > Android SDK and AVD Manager y en la barra lateral elegimos la opción Installed Packages.

Hay que mencionar que el nombre de los paquetes que nos permiten trabajar con las API’s de Google tienen el formato “Google APIs by Google Inc., Android API [número de la versión], revision [número de la revisión]“. En mi caso, los tutoriales para este blog los hago utilizando la versión Android 2.2 cuyo nivel en la API corresponde a 8; por lo que si no encuentro ese paquete instalado, me paso a la opción Available Packages y en Third part Add-ons deberé seleccionar la versión que corresponda y como te muestro a continuación:

Ya habiendo seleccionado el paquete, damos clic sobre el botón Install Selected y esperamos a que Eclipse haya finalizado con la descarga.

2. Si ya has trabajado con Google Maps en cualquier otro entorno de desarrollo, sabrás que es necesario obtener una clave (key) para poder utilizar la API y que en este caso, estará asociada al certificado con el que firmamos digitalmente nuestra aplicación. En un post anterior, te platicaba acerca de por qué y para qué firmamos las aplicaciones y cómo se realiza este proceso, esto lo puedes consultar en este link.

Como en esta ocasión únicamente estaremos trabajando sobre un demo no la vamos a hacer tan cansada y utilizaremos un certificado de depuración que se crea por defecto y que nos servirá para solicitar nuestra API key de Google Maps.

Nos vamos a la opción Window > Preferences de Eclipse y en el apartado izquierdo elegimos la opción Android > Build como te muestro a continuación:

Como puedes ver, aquí tenemos la ruta completa de dónde se encuentra el archivodebug.keystore que corresponde al certificado de depuración.

4. Copiamos esta ruta y abrimos una consola (cmd) y abrimos desde aquí la herramientakeytool.exe que se encuentra en el JRE de Java con el siguiente comando:

keytool -list -alias androiddebugkey -keystore “[Ruta que copiamos de Eclipse]” -storepass android -keypass android

Es importante que cuando escribas este comando te posiciones en la ruta de tu computadora que contenga el directorio de Java/jre6/bin y después de dar “Enter” obtendremos una huella digital de certificado (MD5) como te muestro a continuación:

Ya con este dato, nos dirigimos a la página Android Maps API Key Signup en dónde escribiremos  el certificado MD5 y después de aceptar los términos y condiciones tendremos por fin nuestra API key generada para empezar a codear:

Es importante mencionar que cuando ya estemos por subir nuestra aplicación al Android Market, debemos firmarla y por consecuencia el certificado MD5 cambiará, así que no te olvides de sustituirlo para que no tengas problemas.

5. Creamos un nuevo proyecto Android llamado GoogleMapsTest definiendo en el apartado de Build Target la opción de Google APIs que es el paquete que descargamos en el paso 1 y que te muestro a continuación:

6. Si hasta el momento es la primera vez que trabajamos con este paquete, creamos también una AVD con este mismo Target, esto con la finalidad de que podamos ejecutar la aplicación sin problemas en el emulador. Si quieres leer más acerca de cómo crear una AVD con Eclipse visita este post.

Creando nuestro mapa

7. Pasaremos ahora a la parte divertida: escribir el código. Empecemos por crear el layout de la aplicación definiendo un elemento MapView que nos ayudará a desplegar un mapa con los datos que obtuvimos pasos anteriores. Esto lo hacemos en el archivo res > layout > main.xml. La estructura en XML te quedaría así:

8. Ahora vamos a modificar el archivo AndroidManifest.xml para indicar que haremos uso de una API externa y que además, requiere de conexión a Internet. Para ello, necesitamos de dos elementos:

• <uses-library> en dónde le decimos a Android que vamos a utilizar las clases contenidas en el paquete com.google.android.maps.
• <uses-permission> que le indicará a nuestra aplicación el permiso que necesita para conectarse a Internet mediante android.permission.INTERNET.

De esta forma, el archivo AndroidManifest.xml deberá verse como sigue:

9. Ahora empezaremos a trabajar propiamente con la API. Te recomiendo que el link deGoogle APIs Add-On lo guardes en tus favoritos pues esta será la documentación que constantemente deberás consultar para trabajar cómodamente con mapas.

En este primer ejemplo vamos a trabajar con Overlays (superposiciones) que básicamente nos permiten posicionar un punto en el mapa dadas ciertas coordenadas.

Para trabajar con ellas, hay que crear una clase que extienda de Overlay. Para hacer más sencillas las cosas, existe otra clase llamada ItemizedOverlay, una subclase de Overlay que consiste en una lista de OverlayItems y que utilizaremos para nuestro demo.

Creamos una clase llamada MyOverlay e inmediatamente escribimos todas las sentenciasimport que necesitaremos para realizar este ejemplo:

import java.util.ArrayList;
 
import android.app.AlertDialog;
import android.content.Context;
import android.graphics.drawable.Drawable;
 
import com.google.android.maps.ItemizedOverlay;
import com.google.android.maps.OverlayItem;

A continuación te escribo el código completo que deberá tener esta clase:

public class MyOverlay extends ItemizedOverlay {
 
 private ArrayList mapOverlays = new ArrayList();
 
 private Context context;
 
 public MyOverlay(Drawable defaultMarker) {
    super(boundCenterBottom(defaultMarker));
 }
 
 public MyOverlay(Drawable defaultMarker, Context context) {
    this(defaultMarker);
    this.context = context;
 }
 
 @Override
 protected OverlayItem createItem(int i) {
  return mapOverlays.get(i);
 }
 
 @Override
 public int size() {
  return mapOverlays.size();
 }
 
 @Override
 protected boolean onTap(int index) {
  OverlayItem item = mapOverlays.get(index);
  AlertDialog.Builder dialog = new AlertDialog.Builder(context);
  dialog.setTitle(item.getTitle());
  dialog.setMessage(item.getSnippet());
  dialog.show();
  return true;
 }
 
 public void addOverlay(OverlayItem overlay) {
  mapOverlays.add(overlay);
     this.populate();
 }
 
}

Pasemos a explicar cada método. Esta clase necesitará de un Android Drawable en su constructor para que podamos utilizarlo como un marcador. Así también, resulta importante definir una variable de tipo Context que definirá el contexto actual en dónde se quiera utilizar el mapa. Estos dos elementos son los que manipularemos dentro de los dos constructores que estamos definiendo para esta clase.

También, utilizamos un ArrayList para almacenar todos los OverlayItems que utilizamos a través de la clase. Sobreescribimos los métodos createItem() y size() que por demás considero autoexplicativos. El tercer método que estamos sobreescribiendo, onTap(), es llamado cuando el usuario realiza el gesto tap sobre el marcador en el mapa y define el comportamiento, alerta o información que se mostrará cuando esto ocurra. En este ejemplo, estamos definiendo un AlertDialog que se le mostrará al usuario como veremos más adelante.

Por último, en el método addOverlay(), añadimos el OverlayItem y llamamos al métodopopulate() que sirve para llevar a cabo todo el procesamiento que requiere un nuevoOverlayItem.

10. Ahora pasamos a la actividad principal del proyecto. El primer paso para lograr la integración de Google Maps con Android es utilizar una actividad que extienda de la claseMapActivity. De esta forma podremos reflejar toda la información que obtengamos del servicio de Google Maps en el MapView que hemos definido ya en XML.

Pasemos primero a agregar las sentencias import que necesitaremos para que todo salga bien:

import java.util.List;
 
import android.graphics.drawable.Drawable;
import android.os.Bundle;
 
import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.OverlayItem;

A continuación, escribo el código completo de la actividad principal del proyecto:

public class GoogleMapsTestActivity extends MapActivity {
 
 private MapView mapView;
 
 private static final int latitudeE6 = 19240000;
 private static final int longitudeE6 = -99120000;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        mapView = (MapView) findViewById(R.id.map_view);
        mapView.setBuiltInZoomControls(true);
 
        List mapOverlays = mapView.getOverlays();
        Drawable drawable = this.getResources().getDrawable(R.drawable.icon);
  MyOverlay itemizedOverlay = new MyOverlay(drawable, this);
 
  GeoPoint point = new GeoPoint(latitudeE6, longitudeE6);
  OverlayItem overlayitem = new OverlayItem(point, "Hola",
    "!Te saludamos desde Ciudad de México!");
 
  itemizedOverlay.addOverlay(overlayitem);
  mapOverlays.add(itemizedOverlay);
 
  MapController mapController = mapView.getController();
 
  mapController.animateTo(point);
  mapController.setZoom(6);
 
    }
 
 @Override
 protected boolean isRouteDisplayed() {
  return false;
 }
 
}

Lo primero que hacemos es crear una variable de tipo MapView con la que obtendremos la referencia al mapa que definimos en XML. Como en este demo definiremos un punto en específico, necesitamos las coordenadas de latitud y longitud definidas en dos variables enteras de tipo final.

Después, creamos un objeto de la clase MyOverlay utilizando el constructor que recibe un icono y el contexto en el que estamos trabajando. El icono (o recurso drawable) será la imagen que viene por default en los directorios drawable del proyecto.

Ahora, creamos un objeto GeoPoint al cuál le pasaremos las coordenadas definidas líneas arriba. Este objeto lo pasaremos como primer parámetro en la creación de un OverlayItemy como segundo parámetro, el mensaje que queremos se despliegue cuando el usuario realice el gesto tap sobre el item.

Por último, creamos un MapController para que el punto geográfico que nos interesa mostrar en el mapa aparezca sin problemas y además para poder definir el nivel de zoom que queremos se muestre en el mapa.

11. Pasemos a correr nuestro demo y este será el resultado final:

Se muestra el mapa

Desplegamos el mensaje al dar clic sobre el punto geográfico que definimos

fuente http://androideity.com/2011/10/07/usando-google-maps-con-android/