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
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
7
Luego de ello daremos clic en el ítem siguiente:
2
Damos clic en
este ítem.
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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.
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
9
1
2
3
4
5
6
Damos clic en
aceptar.
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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.
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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.
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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.
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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.
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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(); //
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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) {
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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
Realizadores: Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles). Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
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.