"Creación de Mapas Android" con Marcadores usando la API de Google Maps

Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).

Cartago, Valle del Cauca

1

Ejercicio Día 3

1. Realizar un mapa con los siguientes destinos de Cartago, Valle del Cauca.

Centro de Tecnologías Agroindustriales

Latitud: 4.745401

Longitud: -75.914672

Parque de la Salud

Latitud: 4.739865

Longitud: -75.914790



2

Solución

1. Ingresamos a eclipse y hacemos lo siguiente:

Luego de haber hecho esto, nos aparecerá la siguiente pantalla y en ella le daremos un nombre a

nuestra aplicación, el nombre del paquete, la versión mínima requerida para visualizar nuestra

aplicación desde un dispositivo y la versión máxima de compilación, luego de esto damos clic en

siguiente.

1

2 3

Damos clic



3

Posteriormente seleccionamos la ubicación donde guardaremos nuestro proyecto, luego clic en

siguiente

Posteriormente escogemos el icono que tendrá nuestra aplicación, en este caso escogeremos el

que viene por defecto (Opcional). Luego de esto damos clic en siguiente.

Damos clic

Ubicación donde se

guardará nuestro

proyecto.

Damos clic aquí si

queremos cambiar

nuestro icono.

Damos clic



4

Después nos aparecerá esta pantalla en la cual seleccionaremos la primera opción y daremos clic

en siguiente

Por último le damos un nombre a nuestra activity (en este caso será Ejercicio3 “Opcional”). Y

damos clic en finalizar.

Seleccionamos

esta opción

Damos clic

Nombre de

nuestra Activity.

Damos clic



5

Luego de ello visualizaremos esto.

Antes de continuar, revisar el Tutorial_para_Configurar_la_Api_de_Google_Maps y realizar los

pasos allí mencionados.

Posteriormente ingresaremos al .xml de nuestra activity; donde seleccionamos su contenido y

borraremos todo a excepción de la primera línea de código que es la siguiente:

Luego ingresamos el siguiente código en nuestro archivo .xml de la activity:

<LinearLayout 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/map" android:layout_width="match_parent" android:layout_height="match_parent" class="com.google.android.gms.maps.SupportMapFragment" />

.xml de nuestra

activity



6

</LinearLayout>

Después de haber hecho esto visualizamos como quedo nuestra activity.

Luego necesitamos vincular nuestro proyecto con la librería de googleplayservices. Lo haremos de

la siguiente manera:

1



7

Luego de ello daremos clic en el ítem siguiente:

2

Damos clic en

este ítem.



8

Y después visualizaremos la siguiente ventana, en la cual daremos clic en browse:

Después visualizaremos la siguiente ventana en la cual buscaremos el siguiente directorio

(C:\Android\android-sdk\extras\google\google_play_services) para extraer la librería de

googleplayservices que necesitamos, en este caso este es mi directorio, tenga en cuenta que el

directorio varía dependiendo la ubicación del sdk. Luego de haber hecho esto damos clic en

aceptar.

Damos clic

browse.



9

1

2

3

4

5

6

Damos clic en

aceptar.



10

Y visualizaremos la siguiente ventana en donde solo seleccionaremos lo que necesitamos y damos

clic en finalizar.

Y deberá aparecer en nuestro lado izquierdo donde están ubicados nuestros proyectos la librería

que acabamos de agregar.

Seleccionamos

solo esta librería.

Damos clic en

finish.



11

Luego de haber hecho esto tendrás que vincular tu proyecto (Ejercicio3) con la librería (google-

play-services_lib). Lo cual se hará de la siguiente manera.

Primero damos clic derecho sobre nuestro proyecto (en este caso Ejercicio3) y luego buscamos

properties y damos clic.

Visualizamos que

se nos ha agregado

la librería.



12

Al hacer lo anterior nos debe aparecer la siguiente ventana:

Luego buscamos en la parte izquierda Android y damos clic y luego de ello en lo que se nos

visualiza en la parte derecha nos deslizamos al final y al hacer esto nos debe aparecer lo siguiente:

Damos clic

derecho sobre

nuestro proyecto.

Luego damos clic

en properties



13

Luego de ello visualizaremos la siguiente ventana, en la cual daremos OK.

Buscamos Android

y damos clic.

Nos dirigimos al

final de esto y

damos clic en Add.

Seleccionamos la

librería.

Damos clic.



14

Luego de realizar esto, aparecerá la siguiente ventana en donde seleccionaremos nuestra librería y

luego damos clic en OK.

Al hacer esto ya tendremos vinculado nuestro proyecto con la librería.

Seleccionamos

nuestra librería. Damos clic.



15

Luego nos dirigimos a nuestra clase principal de java perteneciente a nuestra activiy.

Luego copiamos el siguiente código. Y después visualizaremos nuestra aplicación en nuestro

emulador.

public class Ejercicio3 extends FragmentActivity { GoogleMap googleMap; String lati = "4.745401"; String longi = "-75.914672"; String lati2 = "4.739865"; String longi2 = "-75.914790"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_ejercicio3); //Disponibilidad de los servicios de google int status = GooglePlayServicesUtil.isGooglePlayServicesAvailable(getBaseContext()); if(status!=ConnectionResult.SUCCESS){ // Los servicios de google play no estan

Damos clic



16

int requestCode = 10; Dialog dialog = GooglePlayServicesUtil.getErrorDialog(status, this, requestCode); dialog.show(); }else { // Google Play Services are available SupportMapFragment supportMapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map); // Getting a reference to the map googleMap = supportMapFragment.getMap(); // Enable MyLocation Button in the Map googleMap.setMyLocationEnabled(true); cargarSena(); // Setting a click event handler for the map googleMap.setOnMapClickListener(new OnMapClickListener() { @Override public void onMapClick(LatLng latLng) { // Creating a marker MarkerOptions markerOptions = new MarkerOptions(); // Setting the title for the marker. // This will be displayed on taping the marker markerOptions.title(latLng.latitude+ " : " + latLng.longitude); // Setting the position for the marker markerOptions.position(latLng); // Clears the previously touched position googleMap.clear(); // Animating to the touched position googleMap.animateCamera(CameraUpdateFactory.newLatLng(latLng)); // Placing a marker on the touched position googleMap.addMarker(markerOptions); } }); } // SupportMapFragment fm = (SupportMapFragment)getSupportFragmentManager().findFragmentById(R.id.map); // googleMap = fm.getMap(); //



17

// googleMap.setMyLocationEnabled(true); } private void cargarSena() { // TODO Auto-generated method stub // Clears the previously touched position googleMap.clear(); // Creating a marker MarkerOptions markerOptions = new MarkerOptions(); // declaramos la posicion del marcador LatLng pos = new LatLng(Double.parseDouble(lati), Double.parseDouble(longi)); // Setting the title for the marker. // This will be displayed on taping the marker markerOptions.title("Centro de tecnologias Agroindustriales"); // Setting the position for the marker markerOptions.position(pos); // Animating to the touched position googleMap.animateCamera(CameraUpdateFactory.newLatLng(pos)); // Placing a marker on the touched position googleMap.addMarker(markerOptions); pos = new LatLng(Double.parseDouble(lati2), Double.parseDouble(longi2)); markerOptions.title("Parque de la Salud"); markerOptions.position(pos); googleMap.animateCamera(CameraUpdateFactory.newLatLng(pos)); // Placing a marker on the touched position googleMap.addMarker(markerOptions); } @Override public boolean onCreateOptionsMenu(Menu menu) {



18

// Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.ejercicio3, menu); return true; }

Luego de ello debemos dar clic en nuestro manifest de nuestro proyecto y en este

ingresamos el siguiente código, con este damos los permisos necesarios para que

funcione nuestro mapa. Copiamos el código resaltado.

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.adsi.ejercicio3" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="18" /> <permission android:name="com.adsi.ejercicio3.permission.MAPS_RECEIVE" android:protectionLevel="signature"/> <uses-permission android:name="com.adsi.ejercicio3.permission.MAPS_RECEIVE" /> <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="com.google.android.providers.gsf.permission.READ_GSERVICES"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-feature android:glEsVersion="0x00020000" android:required="true" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="AIzaSyC0tcfccKer88liPFtTviDMmRxaSs-EaAw" /> Huella digital



19

<meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> <activity android:name="com.adsi.ejercicio3.Ejercicio3" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>

Luego de ello visualizaremos en nuestro emulador o dispositivo el mapa con los

respectivos marcadores propuestos en el ejercicio.

Software

"Creación de Mapas Android" con Marcadores usando la API de Google Maps