Cargando



Google Maps API con Android Studio

Aquí presentamos la iniciación para usar las librerías y métodos incluidos en la interfaz de desarrollo de aplicaciones de Google Maps dirigido a desarrollo en Android nativo (JAVA y XML)


abr 28 2016 10:28
Avanzado
abr 28 2016 10:35

Android Studio: Google Maps API

 

Una vez instalado el Android Studio, ábrelo y espera que el Gradle ejecute todas sus actividades de inicio. Nos dirígimos a archivo > nuevo > proyecto nuevo, haz clic y rellena los campos como aparecen en la imagen de abajo.

 

 

google-maps-api-1.jpg

 

 

Nota
Los campos están llenos con información de ejemplo, puedes usar los nombres que desees.

 

Haz clic en Siguiente.

 

 

 

 

En el siguiente recuadro seleccionaras a qué dispositivos dirigirás tu app, lo dejaremos en la opción por defecto. Haz clic en Siguiente.

 

 

google-maps-api-3.jpg

 

 

En este recuadro puedes añadir alguna plantilla de actividad prediseñada o comenzar desde cero. En este tutorial lo haremos de ambas formas. Comenzando con la plantilla de Actividad de Google Maps. Clic en Siguiente.
Y por último, en el recuadro solo daremos clic en Finalizar.

 

Por otro lado, desde tu explorador de internet ingresa a google.com e inicia sesión con tu cuenta de google, en caso de no tener una cuenta debes de crearla haciendo clic en el enlace Crear Cuenta.

 

Una vez creada la cuenta, dirígete a este enlace: https://console.deve...gle.com/project

 

Debes crear un proyecto nuevo, al cual le pondrás un nombre y se le asignará un ID, como lo muestra la siguiente imagen:

 

google-maps-api-4.jpg

 

Cuando el servidor termine de crear el proyecto, ve a este enlace: https://console.deve...ackend/overview

 

Haces clic en el panel de la derecha llamado Administrador de las API y luego en Visión general ahí habilitarás el proyecto para usar la api de Google maps.

 

 

[color=#a9a9a9]Pulsa imagen para ampliarla[/color]

 

 

Ahora, presiona el botón ir a las credenciales, para crear una credencial que te asignará una llave (key) de acceso que será usada en el proyecto de Android Studio.

 

 

[color=#a9a9a9]Pulsa imagen para ampliarla[/color]

 

 

El cual mostrará la opción de Crear credenciales, haz clic en ese botón.

 

 

[color=#a9a9a9]Pulsa imagen para ampliarla[/color]

 

 

Selecciona la opción sombreada: Clave de API.

 

 

google-maps-api-8.jpg

 

 

Ahora clic en el botón Clave de Android.

 

 

google-maps-api-9.jpg

 

 

Escribe el nombre en el recuadro, o puedes dejar el nombre por defecto.

 

Nota
Solo cambiaremos ese recuadro.

 

Da clic en Crear.

 

 

google-maps-api-10.jpg

 

 

Te aparecerá un recuadro, con la Clave de API.

 

Nota
¡No debes compartir esa clave con nadie!

 

Ahora presiona Aceptar, puedes chequear la información de tu proyecto junto con tu clave desde tu cuenta de Google. Luego, cuando Android Studio finalice la creación del proyecto, verás el siguiente esquema:

 

 

google-maps-api-11.jpg

 

 

Los archivos resaltados son los que vamos a tomar en cuenta para usar la api de Google maps.

  • El archivo MapsActivity es el que contiene el código de Java para la misma actividad.
  • El archivo activity_maps.xml es el layout que está enlazado y pertenece al código de java que mencionamos anteriormente.
  • El archivo google_maps_api.xml es el que contiene las credenciales y las configuraciones que se aplican al llamado de la api dentro de la aplicación.

 

En Android Studio daremos doble click al archivo google_maps_api.xml, allí encontraremos la siguiente línea de código:

<string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">YOUR_KEY_HERE</string>
Reemplazarás la cadena your key here y la cambiarás por la llave que se te concedió al crear tu credencial (la misma que comentamos que no compartieras). Esta clave debe comenzar con las letras: AIza (ai mayúscula).

 

En este punto ya puedes correr la aplicación en tu dispositivo Android o en un emulador de Android, en el cual se abrirá una simple vista de un mapa en la ciudad de Sydney (este marcador es añadido por defecto al crearse la plantilla de google maps, y se genera en el archivo de java Maps Activity), en el método onMapReady:

@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;
    // Add a marker in Sydney and move the camera
    LatLng sydney = new LatLng(-34, 151);
    mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney"));
    mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
}
onMapReady es el método que puedes modificar para establecer líneas y marcas. Se ejecuta cuando la aplicación ha terminado de cargar por completo el mapa, recuerda que debes tener instalado Google play services en tu emulador o dispositivo donde vayas a correr o instalar la aplicación.

 

Ahora, justo debajo de: mMap = googleMap; en el método que se mencionó, agreguemos la siguiente línea de código:

mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
La aplicación se verá de esta forma al ser ejecutada:

 

 

google-maps-api-12.jpg

 

 

La Api de Google maps ofrece cuatro estilos de vista para el mapa que pueden ser cambiados con la function setMapType(int type).

 

1. Mapa normal
El mapa normal (MAP_TYPE_NORMAL) que contiene la vista y etiquetas de las carreteras, elementos naturales importantes y elementos artificiales.

 

google-maps-api-13.jpg

 

 

2. Mapa Híbrido
El mapa híbrido (MAP_TYPE_HYBRID) que contiene fotos satelitales junto al trazo de las carreteras y las mismas etiquetas del estilo anterior.

 

google-maps-api-14.jpg

 

 

3. Mapa Satelital
El mapa satelital (MAP_TYPE_SATELLITE) donde se visualizan solo imágenes satelitales de la tierra sin ningún tipo de etiquetas. Es el mapa que vimos al agregar la línea de código.

 

4. Mapa de tierra
El mapa de tierra (MAP_TYPE_TERRAIN) que incluye datos topográficos. Reemplaza el código en la línea que fue agregada para ver el resultado.

 

Por último, la api incluye un tipo de mapa que no carga ningún mosaico, solamente una cuadricula. MAP_TYPE_NONE

 

El archivo xml activity_maps.xml puede modificarse de manera que el fragment* de google maps no llene toda la pantalla, de este modo podemos ubicar una dirección específica y fija que ocupe un espacio pequeño; por ejemplo:

<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="com.omglabs.myapplication.MapsActivity"
    android:background="#54DF12DF">

<fragment
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_centerInParent="true"
     />
</RelativeLayout>
*fragment se define como una porción de la interfaz de usuario que puede añadirse o eliminarse de la misma, de forma independiente al resto de elementos de la actividad, y que por supuesto puede reutilizarse en otras actividades.

 

 

google-maps-api-15.jpg

 

 

Otro método de la api a implementar es mMap.setMyLocationEnabled(true); que integra un botón el cual dirigirá el mapa al punto de nuestra propia ubicación actual.

 

El icono que aparece en la esquina superior derecha de la siguiente imagen muestra el botón que ejecuta esta función.

 

 

google-maps-api-16.jpg

 

 

Una de las funcionalidades de la api es que permite mostrar un mapa estático sin desplazamientos de modo que se muestre una ubicación exacta y que el usuario no pueda desplazar el mapa a ningún otro sitio, como por ejemplo una foto. Este estado se llama modo básico.

 

Puedes activarlo con la siguiente línea de código en java:

GoogleMapOptions options = new GoogleMapOptions().liteMode(true);
O usando atributos xml en el archivo activity_maps.xml
Añadiendo al fragment del mapa este atributo:
xmlns:map="http://schemas.android.com/apk/res-auto"
junto con el modificador:
map:liteMode="true"
Lucirá como está en esta foto.

 

 

google-maps-api-17.jpg

 

 

Puedes recurrir a esta práctica para cambiar el estilo del mapa con el atributo:

map:mapType="normal"

¿Te ayudó este Tutorial?


1 Comentarios


Fede Robles
abr 28 2016 14:15

Brutal, muchas gracias, me encanta este tutorial para salir de dudas con lo de las API de Google Maps.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X