Bienvenidos sean a este post, hoy hablaremos sobre la API de Google Maps para Android Studio. En el post anterior hemos visto como obtener la clave de la misma para poder trabajar con ella, esta API nos permite utilizar el servicio de imagenes cartograficas del servicio de Google Maps, un detalle a tener en cuenta esta posibilidad solo funciona con dispositivos con Google Play instalado es decir que distpositivos muy viejos no funcionara.

Anuncios

Comencemos con nuestro ejemplo, para ello vamos a crear una nueva app con las siguientes caracteristicas:

  • Application Name: Ejemplo Google Maps
  • Domain Company: example.org
  • API DSK Minimum (Phone and Tablet): 14
  • Add an Activity: Empty Activity

Una vez creada nuestra app deberemos chequear el SDK Manager, en este administrador debemos ir a la seccion Android SDK, despues eligen la pestaña SDK Tools y deben tener seleccionado las opciones de Google Play Services y Google Repository como se ve en la siguiente imagen

En caso de no estar tildadas seleccionen la mismas y pulsen Apply para instalarlas, una vez instaladas pulsen Ok para volver al Android Studio. Una vez en Android Studio debemos importar las librerias recien habilitadas, para ello debemos ir a File -> Project structure y nos aparecera el siguiente cuadro

Aca deben ir a la seccion app, como se ve en la imagen, luego eligen la pestaña Dependencies para pasar a la siguiente imagen

En este cuadro seleccionen el boton mas (+), resaltado en la imagen, donde nos aparecera la siguiente opcion

Anuncios

En estas opciones seleccionaremos la primera, es decir Library dependency para que nos aparezca el siguiente cuadro

En este cuadro les recomiendo escribir play-services, y clickear la lupa, esta traera todas las coincidencias posibles, la libreria que debemos elegir es la que se ve en la imagen com.google.android.gms:play-services:xx.x.x (donde dice X ira la version que tengas en el momento de ver esto), despues pulsen Ok para cerrar el cuadro y agregarlo como se ve en la siguiente imagen

Como pueden ver se agrego se agrego la libreria y con esto tendriamos todas nuestras necesidades cubiertas, pasemos a ver nuestra app pero primero modifiquemos el archivo AndroidManifest.xml agregando las siguientes lineas:

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

 Estas dos lineas se encargaran mas que nada de enviar la licencia que hemos generado en el post anterior para poder conectarnos por medio de la API de Google Maps, como pueden ver en el segundo meta-data en el campo value tendremos la siguiente linea:

android:value="AIzaSyBCndvQHr6Dto3ypf4aFKdbtiviyJpzrnQ"

Como pueden ver ahi deben poner la clave que generaron en el post anterior, no utilicen la del ejemplo porque estas son individuales y personales, nuestra siguiente modificacion sera tambien en el archivo AndroidManifest.xml donde agregaremos los siguientes permisos por fuera de los tags de Application:

Anuncios 
    <permission
        android:name="org.example.ejemplogooglemaps.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />
    <uses-permission
        android:name="org.example.ejemplogooglemaps.permission.MAPS_RECEIVE" />
    <uses-permission 
        android:name="org.example.googlemaps.permission.READ_GSERVICES" />
    <uses-permission 
        android:name="android.permission.INTERNET" />
    <uses-permission 
        android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission 
        android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission 
        android:name="android.permission.ACCESS_FINE_LOCATION" />

En estas lineas concederemos los permisos a nuestra app,, entre ellas como a nuestra memoria, a internet, a nuestro estado, etc. nuestra siguiente modificacion en el archivo AndroidManifest.xml sera la siguiente:

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

Esta configuracion le dice a la aplicacion que para utilizar a google maps debe utilizar gl 2.0 para poder visualizar los mapas, veamos como queda finalmente nuestro archivo AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="org.example.ejemplogooglemaps">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action
                    android:name="android.intent.action.MAIN" />

                <category
                    android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <meta-data
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />
        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="AIzaSyBCndvQHr6Dto3ypf4aFKdbtiviyJpzrnQ" />
    </application>
    <permission
        android:name="org.example.ejemplogooglemaps.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />
    <uses-permission
        android:name="org.example.ejemplogooglemaps.permission.MAPS_RECEIVE" />
    <uses-permission
        android:name="org.example.googlemaps.permission.READ_GSERVICES" />
    <uses-permission
        android:name="android.permission.INTERNET" />
    <uses-permission
        android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission
        android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission
        android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-feature android:glEsVersion="0x00020000"
        android:required="true" />
</manifest>

Con todas nuestras modificaciones realizadas en el archivo procedamos a modificar el archivo activity_main.xml con el siguiente codigo:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <fragment
        android:id="@+id/mapa"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.SupportMapFragment" />
</RelativeLayout>
Anuncios

En este caso modificamos el tipo de layout por RelativeLayout y utilizamos el elemento fragment, el cual se encargara de mostrar el fragmento del mapa, procedamos a modificar nuestra clase MainActivity, veamos el encabezado de nuestra clase:

public class MainActivity extends AppCompatActivity

Modifiquemoslo de la siguiente manera:

public class MainActivity extends FragmentActivity

Con esta simple modificacion ya podriamos probar nuestra app, si lo probamos en algun emulador se deberia ver de la siguiente forma

Nota: Se debe agregar automaticamente el paquete mediante import android.support.v4.app.FragmentActivity; de lo contrario agreguenlo a mano.

Con esto podremos probar nuestra API pero ahora haremos algunas modificaciones para permitirnos configurarlo y agregar un marcador, para ello volvamos a nuestro archivo activity_main.xml y agreguemos los siguientes elementos despues de fragment:

Anuncios 
    <Button
        android:id="@+id/boton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/boton2"
        android:onClick="moveCamera"
        android:text="ir a Tinchicus" />
    <Button
        android:id="@+id/boton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:onClick="animateCamera"
        android:text="a mi Posicion" />
    <Button
        android:id="@+id/boton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@+id/boton2"
        android:onClick="addMarker"
        android:text="marcador" />

En este caso tendremos tres elementos de tipo boton, los cuales estan ubicados en la parte inferior, en este caso a boton1 lo asignaremos a la izquierda de boton2 (android:layout_toLeftOf=»@+id/boton2″), a boton2 en el centro (android:layout_centerHorizontal=»true») y por ultimo boton3 ubicado a la derecha de boton2 (android:layout_toRightOf=»@+id/boton2″) y cada boton esta relacionado a una accion, con esta modificacion realizada nuestro archivo layout quedara de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <fragment
        android:id="@+id/mapa"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.SupportMapFragment" />
    <Button
        android:id="@+id/boton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/boton2"
        android:onClick="moveCamera"
        android:text="ir a Tinchicus" />
    <Button
        android:id="@+id/boton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:onClick="animateCamera"
        android:text="a mi Posicion" />
    <Button
        android:id="@+id/boton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@+id/boton2"
        android:onClick="addMarker"
        android:text="marcador" />

</RelativeLayout>

Con nuestras modificaciones realizadas pasemos a modificar el codigo de la clase MainActivity de la siguiente forma:

package org.example.ejemplogooglemaps;

import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.view.View;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

public class MainActivity extends FragmentActivity
        implements GoogleMap.OnMapClickListener, OnMapReadyCallback {

    private final LatLng tinchicus = new LatLng(-32.0728125,-64.5750594);
    private GoogleMap mapa;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ((SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.mapa)).getMapAsync(this);
    }

    public void moveCamera(View view){
        mapa.moveCamera(CameraUpdateFactory.newLatLng(tinchicus));
    }

    public void animateCamera(View view){
        if(mapa.getMyLocation() != null){
            mapa.animateCamera(CameraUpdateFactory
                    .newLatLngZoom(new LatLng(mapa.getMyLocation().getLatitude()
                            ,mapa.getMyLocation().getLongitude()),15));
        }
    }

    public void addMarker(View view){
        mapa.addMarker(new MarkerOptions()
                .position(mapa.getCameraPosition().target));
    }

    @Override
    public void onMapClick(LatLng puntoPulsado){
        mapa.addMarker(new MarkerOptions().position(puntoPulsado)
                .icon(BitmapDescriptorFactory.defaultMarker(
                        BitmapDescriptorFactory.HUE_YELLOW)));
    }

    @Override
    public void onMapReady(GoogleMap map){
        mapa = map;
        mapa.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
        mapa.moveCamera(CameraUpdateFactory.newLatLngZoom(tinchicus, 15));
        mapa.setMyLocationEnabled(true);
        mapa.getUiSettings().setZoomControlsEnabled(false);
        mapa.getUiSettings().setCompassEnabled(true);
        mapa.addMarker(new MarkerOptions()
                .position(tinchicus).title("Tinchicus")
                .snippet("El bunker de Tinchicus")
                .icon(BitmapDescriptorFactory
                        .fromResource(android.R.drawable.ic_menu_compass))
                .anchor(0.5f, 0.5f));
        mapa.setOnMapClickListener(this);
    }
}
Anuncios

A la clase le implementaremos una nueva interfaz, en este caso OnMapReady, esta es para poder utilizar el metodo getMapAsync(), primero crearemos una variable con la latitud y longitud de una ubicacion por defecto, en este caso mi bunker, llamada tinchicus luego crearemos el objeto de GoogleMap llamado mapa, luego en onCreate() agregaremos la siguiente linea:

((SupportMapFragment) getSupportFragmentManager()
     .findFragmentById(R.id.mapa)).getMapAsync(this);

Esta linea sera la encargada de mostrar el fragmento del mapa en pantalla pero para lograr esto debemos implementar los siguientes metodos. Hablemos del primero, la cual se encarga de mover la pantalla (moveCamera) pero a un lugar especifico, en este caso la constante tinchicus, nuestro siguiente metodo (animateCamera) se encarga de mover a la nueva ubicacion donde se pulsó, esto lo hace por medio de getMyLocation() y en conjuncion con getLatitude() y getLongitude() en base al lugar donde se clickeo, nuestro siguiente metodo (addMarker) sera el encargado de agregar marcadores en la pantalla en base a donde se dejo ubicada la pantalla sobre el mapa, el siguiente metodo es en base a donde se pulsa en el mapa (onMapClick) donde en base al punto pulsado agregara un nuevo icono de marcador, y por ultimo hablaremos sobre el metodo mas importante, en este caso onMapReady(), en este caso setearemos el tipo de imagen a mostrar en nuestro mapa, luego moveremos la camara a la ubicacion por defecto, setearemos algunas herramientas de la interfaz del usuario (UI), luego le agregaremos el marcador con todos los datos de la ubicacion, icono y tamaño, por ultimo setearemos un escuchador de eventos relacionados al click o pulsar. Si lo compilamos y probamos con nuestro emulador podremos usarlo como se ve en el siguiente video:

Nota: El metodo getMyLocation() es obsoleto pero todavia se puede seguir utilizando

Como pueden ver automaticamente nos llevo al lugar que establecimos por defecto, en el video no probe mi posicion porque en realidad nos iba a mostrar el bunker.

Nota: Pueden encontrar algunos ejemplos mas simples donde utilizan getMap() pero este metodo fue eliminado, a pesar de ser obsoleto no se lo dejo, desde la version de Google Play v. 9.2 y desde ese momento se debe utilizar el metodo getMapAsync(), puede utilizarse el metodo antes citado pero la version de Google Play debera ser menor a la comentada.
Anuncios

En resumen, hemos visto como se configura el acceso a google maps desde nuestra app, los permisos que debemos conceder, como es una app basica, como podemos agragar una serie de modificaciones que nos permiten darle un mejor aspecto, espero les haya sido util sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.50

Anuncio publicitario