Inicio Android Mapas en Android – Google Maps Android API (1)

Mapas en Android – Google Maps Android API (1)

por sgoliver
mapas-1

[mensaje-curso]

La API de Google Maps se integró con los Google Play Services allá por finales de 2012. Este cambio trajo consigo importantes mejoras, como la utilización de mapas vectoriales y mejoras en el sistema de caché, lo que proporcionaba mayor rendimiento, mayor velocidad de carga, y menor consumo de datos.

También llegó con un cambio en la forma en que los desarrolladores interactuaríamos con los mapas, pasando de los antiguos MapActivity y MapView a un nuevo tipo de fragment llamado MapFragment, con las ventajas que conlleva el uso de este tipo de componentes.

Antes de empezar a utilizar esta API en nuestras aplicaciones será necesario realizar algunos preparativos, y es que para hacer uso de los servicios de Google Maps es necesario que previamente generemos una Clave de API (o API key) asociada a nuestra aplicación. Éste es un proceso sencillo y se realiza accediendo a la Consola de Desarrolladores de Google.

Una vez hemos accedido, tendremos que crear un nuevo proyecto desde la lista desplegable que aparece en la parte superior derecha y seleccionando la opción «Crear proyecto…».

google-dev-console-1

Aparecerá entonces una ventana que nos solicitará el nombre del proyecto. Introducimos algún nombre descriptivo, se generará automáticamente un ID único (que podemos editar aunque no es necesario), y aceptamos pulsando “Crear”.

google-dev-console-2

Una vez creado el proyecto llegamos a una página donde se nos permite seleccionar las APIs de Google que vamos a utilizar (como podéis ver la lista es bastante extensa). En nuestro caso particular vamos a seleccionar «Google Maps Android API«.

google-dev-console-3

Aparecerá entonces una ventana informativa con una breve descripción de la API y una advertencia indicando que se necesitará una clave de API para poder utilizarla. Por el momento vamos a activar la API haciendo click sobre la opción «HABILITAR» que aparece en la parte superior.

google-dev-console-4

Una vez activada nos vuelve a aparecer la advertencia sobre la necesidad de obtener credenciales para el uso de la API por lo que, ahora sí, tendremos que iniciar el proceso de obtención de la clave. Pulsaremos para ello sobre el botón «Ir a las credenciales«.

google-dev-console-5

Esto iniciará un pequeño asistente. En el primer paso nos volverán a preguntar qué API vamos a utilizar (aunque debería aparecer seleccionada por defecto la de Google Maps para Android), y desde dónde vamos a utilizarla. Indicamos «Android» y pulsamos el botón «¿Qué tipo de credenciales necesito?«.

google-dev-console-7

En el segundo paso tendremos que poner un nombre descriptivo a la clave de API que se va a generar, no es demasiado relevante, por lo que podemos dejar el que nos proponen por defecto. También en este paso se nos da la posibilidad de poder restringir el uso de este proyecto a determinadas aplicaciones concretas. Como es una práctica baste recomendable vamos a ver cómo hacerlo. Pulsaremos sobre el botón «+ Añadir nombre de paquete y huella digital» y veremos que se solicitan dos datos:

  • Nombre de paquete
  • Huella digital de certificado SHA-1

El primero de ellos es simplemente el paquete java principal que utilizaremos en nuestra aplicación. Lo indicaremos al crear nuestro proyecto en Android Studio (o si ya tenemos una aplicación creada podemos encontrarlo en el fichero AndroidManifest.xml, en el atributo package del elemento principal). En mi caso de ejemplo utilizaré el paquete «net.sgoliver.android.mapas».

El segundo de los datos requiere más explicación. Toda aplicación Android debe ir firmada para poder ejecutarse en un dispositivo, tanto físico como emulado. Este proceso de firma es uno de los pasos que tenemos que hacer siempre antes de distribuir públicamente una aplicación. Adicionalmente, durante el desarrollo de la misma, para realizar las pruebas y la depuración del código, aunque no seamos conscientes de ello también estamos firmado la aplicación con un “certificado de pruebas”. Pues bien, para obtener la huella digital del certificado con el que estamos firmando la aplicación podemos utilizar la utilidad keytool que se proporciona en el SDK de Java. Importante: en este ejemplo vamos a obtener el SHA1 del certificado de pruebas, que es el que se utilizará para probar en el emulador, pero en caso de que nuestra aplicación se firmara de nuevo para subirla a la tienda de Google tendríamos que obtener de nuevo el SHA1 del nuevo certificado, o de lo contrario los mapas no se visualizarán.

El certificado de pruebas debería encontrarse (en el caso de Windows) en la ruta «<carpeta-usuario-logueado>\.android\debug.keystore». Utilizaremos por tanto el siguiente comando para obtener nuestra huella digital SHA-1:

c:\>"C:\Program Files\Java\jdk1.8.0_91\bin\keytool" -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

Por supuesto que tu instalación de Java está en la ruta “C:\Program Files\Java\jdk1.8.0_91“. Si no es así sólo debes sustituir ésta por la correcta.

obtener sha-1

Una vez tenemos ya los dos datos necesarios (paquete y SHA-1) los introducimos en el asistente de obtención de credenciales y pulsamos el botón «Crear clave de API«.

google-dev-console-8

Hecho esto, obtendremos por fin nuestra clave de API. La copiamos en lugar seguro (más tarde nos hará falta para nuestra aplicación Android), y pulsamos el botón «Listo» para finalizar.

google-dev-console-9

Con esto ya habríamos concluido los preparativos iniciales necesarios para utilizar el servicio de mapas de Android en nuestras aplicaciones, por lo que empecemos a crear un proyecto de ejemplo en Android Studio.

Abriremos Android Studio y crearemos un nuevo proyecto de Android, en mi caso lo he llamado “android-mapas-1”, utilizando la plantilla «Empty Activity» y dejando todas las demás opciones por defecto. Recordemos utilizar para el proyecto el mismo paquete java que hemos indicado durante la obtención de la clave de API.

Creado el proyecto, lo primero que haremos será dirigirnos al fichero build.gradle de nuestro módulo principal para añadir la referencia a la librería específica de mapas de Google Play Services. En la última actualización de este capítulo la versión más reciente disponible es la 9.4.0, pero es posible que en tu caso puedas ya utilizar alguna versión posterior.

dependencies {
    //...
    compile 'com.google.android.gms:play-services-maps:9.4.0'
}

A continuación modificaremos el fichero AndroidManifest.xml para añadir tres elementos nuevos. En primer lugar, dentro del elemento <application> tendremos que añadir un nuevo elemento <meta-data> en el que se especificará la versión de los Google Play Services utilizada para compilar la aplicación.

<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />

Inmediatamente después añadiremos otro nuevo <meta-data> donde indicaremos la clave de API para Google Maps que hemos obtenido a través de la consola de desarrolladores.

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="AIzaSyAbl4F-oTWeHQxC4EljT9V8tNz8kXj0fkc"/>

Por último, también dentro del elemento <application> añadiremos un nuevo elemento <uses-feature> para indicar que nuestra aplicación, o más concretamente Google Maps, hará uso de OpenGL ES versión 2.

<uses-feature
    android:glEsVersion="0x00020000"
    android:required="true"/>

Y con esto hemos terminado de configurar todo lo necesario. Ya podemos empezar a escribir nuestro código. Para este primer artículo sobre el tema nos vamos a limitar a mostrar un mapa en la pantalla principal de la aplicación. En artículos posteriores veremos como añadir otras opciones o elementos al mapa.

Para esto tendremos simplemente que añadir el control correspondiente al layout de nuestra actividad principal. Lo añadiremos en forma de fragment de tipo com.google.android.gms.maps.MapFragment, quedando de la siguiente forma (no preocuparos si veis algún error de renderizado en el editor visual de layouts de Android Studio):

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.MapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Con esto ya podríamos ejecutar nuestra aplicación y deberíamos ver sin problemas un mapa a pantalla completa en su posición y zoom por defecto. Pero antes vamos a avanzar sólo un poco más para dejar nuestro proyecto preparado para los próximos artículos. Además de visualizar el mapa vamos a obtener una referencia a él desde nuestro código, referencia a partir de la cual podremos más adelante modificar sus propiedades y realizar determinadas acciones sobre el mapa.

Para esto, vamos a crear en primer lugar un atributo privado de tipo GoogleMap en nuestra actividad principal (que debe heredar de AppCompatActivity), siendo original yo lo llamaré mapa. Haremos además que nuestra actividad implemente la interfaz OnMapReadyCallback, en breve veremos para qué.

En el método onCreate() de la actividad obtendremos en primer lugar una referencia al MapFragment que hemos añadido a nuestro layout a través del fragment manager, y seguidamente llamaremos a su método getMapAsync() pasándole un objeto que implemente la interfaz OnMapReadyCallback, en nuestro caso la propia actividad principal.

Con esto conseguimos que en cuanto esté disponible la referencia al mapa (de tipo GoogleMap) incluido dentro de nuestro MapFragment se llame automáticamente al método onMapReady() de la interfaz. Por el momento la implementación de este método va a ser muy sencilla, limitándonos a guardar el objeto GoogleMap recibido como parámetro en nuestro atributo mapa.

Todo lo anterior quedaría de la siguiente forma:

public class MainActivity extends AppCompatActivity
        implements OnMapReadyCallback {

    private GoogleMap mapa;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MapFragment mapFragment = (MapFragment) getFragmentManager()
                .findFragmentById(R.id.map);

        mapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap map) {
        mapa = map;
    }
}

Y ahora sí, ejecutemos la aplicación para ver el aspecto de nuestro mapa.

demo-mapas-1

Sobre este mapa, aunque básico, ya podréis moveros y hacer zoom utilizando los gestos clásicos.

Con este artículo espero haber descrito todos los pasos necesarios para comenzar a utilizar los servicios de mapas de Google utilizando la API de Google Maps para Android. Si tenéis cualquier duda o propuesta de mejora no dudéis en escribirlo en los comentarios.

Como habéis podido comprobar hay muchos preparativos que hacer, aunque ninguno de ellos de excesiva dificultad. En los próximos artículos aprenderemos a utilizar más características de esta API.

Puedes consultar y/o descargar el código completo de los ejemplos desarrollados en este artículo accediendo a la pagina del curso en GitHub.

[mensaje-curso]

También te puede interesar

12 comentarios

Mapas en Android – Google Maps Android API [Serie] | sgoliver.net 12/09/2016 - 16:42

[…] Mapas en Android – Google Maps Android API (1) [Act. Septiembre 2016] […]

Responder
Mapas en Android – Google Maps Android API (2) | sgoliver.net 13/09/2016 - 10:00

[…] el artículo anterior del curso vimos cómo realizar todos los preparativos necesarios para comenzar a utilizar la […]

Responder
Mapas en Android – Google Maps Android API (3) | sgoliver.net 15/09/2016 - 16:23

[…] los dos artículos anteriores (I y II) del curso hemos visto cómo crear aplicaciones utilizando la API de Google Maps para Android […]

Responder
Mapas en Android – Google Maps Android API (4) | sgoliver.net 22/09/2016 - 17:32

[…] la aplicación Android de ejemplo tomaré como base la ya creada en el primer artículo de la serie sobre Google […]

Responder
Google Drive en Android (1) | sgoliver.net 27/09/2016 - 15:15

[…] Como es algo con lo que ya deberíamos estar familiarizados (si no es así, revisar por ejemplo el primer articulo sobre Google Maps) pasaré muy rápidamente por todos los pasos […]

Responder
EduinMarshall 08/10/2016 - 18:53

Hola buen día. Me intereso su curso, y seguí al pie de la letra todo el proceso y la verdad había buscado por muchos sitios, ya que en todos usaban la plantilla de googlemaps. y pues al fin encontré este curso donde pude por fin hacer que mi app se lanzara en mi teléfono móvil. y ahora me encuentro con que el mapa solo se quedo en blanco, solo aparece el logo de google en la parte abajo pero no carga. ¿A que creen que se deba? muchas gracias por el curso.

Responder
Firebase para Android: Base de Datos en Tiempo Real (1) | sgoliver.net 10/11/2016 - 16:40

[…] al certificado de pruebas (tienes más información sobre cómo obtener este dato por ejemplo en el primer artículo sobre mapas), pero recuerda cambiarlo por el certificado de producción si subes tu aplicación a Google […]

Responder
Daniel Esparza 16/11/2016 - 1:49

«Por último, también dentro del elemento añadiremos un nuevo elemento para indicar que nuestra aplicación, o más concretamente Google Maps, hará uso de OpenGL ES versión 2.»

me parece que va por encima de

Responder
Notificaciones Push en Android: Firebase Cloud Messaging (1) | sgoliver.net 20/12/2016 - 20:57

[…] al certificado de pruebas (tienes más información sobre cómo obtener este dato por ejemplo en el primer artículo sobre mapas), pero recuerda cambiarlo por el certificado de producción si subes tu aplicación a Google […]

Responder
omar 18/05/2017 - 21:47

Creo que puedes mejorar tus explicaciones en un tipo paso a paso, o crear vídeos, por que soy principiante y hay temas que das por entendido y me pierdo.

Responder
manu 28/09/2017 - 17:10

A mí tampoco me mostraba el mapa en un inicio, y el problema era porque en la consola de google, por error, había configurado la api key y la libreria maps para otro proyecto. Además cambie el MapFragment por SupportMapFragment.

Responder
Ivan 04/04/2018 - 22:30

Hola, alguien me puede ayudar a encontrar el SHA-1 de producción puesto que he subido la app a play store con el SHA-1 de prueba y no me carga el mapa. por favor si alguien sabe como puedo diferenciar estos y como usar el de produccion le agradezco me envíe información a ivan.lobelo@gmail.com

Responder

Dejar un comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. Aceptar Más Información

Política de Privacidad y Cookies