Curso 14/15 Mapas en
Al final de la sesión sabremos... Utilizar un servicio externo: Google Maps Utilizar la consola de Google Unifica los desarrollos con los diversos web services de la empresa google (cloud, mapas, mensajería, etc.) Los conceptos básicos de Google Play Services con respecto a los mapas 2
Nuestro destino... 3
Geolocalización Dispositivos, servicios, personas, cosas geolocalizadas abren un nuevo mundo de posibilidades en cómo buscamos información acerca de lugares, interaccionamos con el entorno, etc. Según Juniper Research, unos ingresos de 12.000 millones $ (unos 8.000 millones ) de los servicios de localización móvil para 2014. 4
Instalación Requerimientos: Trabajaremos con 4.4.2 (API 19) Google Play Services Y por supuesto todo lo necesario para desarrollar en Java. El paquete com.google.android.maps Contiene todas las clases relacionadas con mapas. 5
7 sencillos pasos... 1. Instalar Google Play Services 2. Crear un proyecto 3. Añadir Google Play Services a tu proyecto 4. Obtener un certificado y las claves para el uso de Google Maps API 5. Especificar los permisos y configuraciones adicionales 6. Añadir un mapa 7. Probar que todo funciona 6
Conceptos claves Google Maps API v2 Clase GoogleMap: Se conecta al servicio externo Se baja las capas (losetas) que superpone Las visualiza Visualiza controles estandar (pan, tilt, zoom) Visualiza el mapa acorde a las órdenes de los controles estándar http://goo.gl/vqrlpy 7
Google Map API level 12 o superior 8
Paso 1: Instalar Google Play Services 9
Paso 2: Crear un proyecto Seguir los pasos del Hola Mundo 10
Paso 3: Añadir Google Play Services a tu proyecto Añadir una nueva regla en build.gradle apply plugin: 'com.android.application'... dependencies { compile 'com.android.support:appcompat-v7:21.0.3' compile 'com.google.android.gms:play-services:6.5.87' } 11
Paso 3: Añadir Google Play Services a tu proyecto Añadir una nueva regla en build.gradle Guarda los cambios y sincroniza tu proyecto 12
Paso 3: Añadir Google Play Services a tu proyecto Añadir una nueva regla en build.gradle Guarda los cambios y sincroniza tu proyecto Añade la siguiente marca al manifiesto como hijo de application <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> 13
Paso 4: Obtener un certificado y las claves para el uso de Google Maps API Visualizar la huella SHA-1 de nuestra aplicación: depuración o release Localizar el almacén de claves OS X and Linux: ~/.android/ Windows Vista and Windows 7: C:\Users\your_user_name\.android\ Ejecutar el siguiente comando GNU/Linux keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android Windows keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android 14
Paso 4: Obtener un certificado y las claves para el uso de Google Maps API Alias name: androiddebugkey Creation date: Mar 5, 2015 Entry type: PrivateKeyEntry Certificate chain length: 1 Certificate[1]: Owner: CN= Debug, O=, C=US Issuer: CN= Debug, O=, C=US Serial number: 66cee2db Valid from: Thu Mar 05 12:28:41 CET 2015 until: Sat Feb 25 12:28:41 CET 2045 Certificate fingerprints: MD5: 29:FE:96:03:D8:3D:E4:5B:70:E9:1D:5C:3B:29:A6:5E SHA1: 9A:41:80:5A:4B:EA:D8:B6:6D:36:A5:C7:77:1C:EA:14:F8:F8:DC:EA SHA256: B3:1A:07:90:B4:01:33:32:AA:66:73:EF:1C:79:1C:C6:13:54:2E:4A:7F:DE:25:F6:8C:F3:... Signature algorithm name: SHA256withRSA Version: 3 Extensions: 15
Paso 4: Obtener un certificado y las claves para el uso de Google Maps API Visualizar la huella SHA-1 Crear un proyecto API en la consola Google https://console.developers.google.com/ 16
Paso 4: Obtener un certificado y las claves para el uso de Google Maps API 17
Paso 4: Obtener un certificado y las claves para el uso de Google Maps API 18
Paso 4: Obtener un certificado y las claves para el uso de Google Maps API Visualizar la huella SHA-1 Crear un proyecto API en la consola Google Habilitar el uso de Google Maps API v2 19
Paso 4: Obtener un certificado y las claves para el uso de Google Maps API 20
Paso 4: Obtener un certificado y las claves para el uso de Google Maps API Visualizar la huella SHA-1 Crear un proyecto API en la consola Google Habilitar el uso de Google Maps API v2 Solicitar una clave Google Maps API 21
Paso 4: Obtener un certificado y las claves para el uso de Google Maps API 22
Paso 4: Obtener un certificado y las claves para el uso de Google Maps API 23
Paso 4: Obtener un certificado y las claves para el uso de Google Maps API 24
Paso 4: Obtener un certificado y las claves para el uso de Google Maps API Visualizar la huella SHA-1 Crear un proyecto API en la consola Google Habilitar el uso de Google Maps API v2 Solicitar una clave Google Maps API Añadir la clave a tu manifiesto <meta-data android:name="com.google.android.maps.v2.api_key" android:value="xxxxxxxxxxx_????????????"/> 25
Paso 5: Especificar los permisos y configuraciones adicionales <!-- Siempre --> <uses-permission android:name="android.permission.internet"/> <uses-permission android:name="android.permission.write_external_storage"/> <uses-permission android:name="android.permission.access_network_state"/> <!-- Opcional --> <uses-permission android:name="android.permission.access_coarse_location"/> <uses-permission android:name="android.permission.access_fine_location"/> Se recomienda indicar que nuestra aplicación necesita de OpenGL ES versión 2. De esta forma, servicios de terceros pueden satisfacer los requisitos e instalar dicha dependencia. <!-- Bajo manifest --> <uses-feature android:glesversion="0x00020000" android:required="true"/> 26
Paso 6: Añadir un mapa Modificar la definición del layout de la aplicación o añadir una nueva. <?xml version="1.0" encoding="utf-8"?> <fragment xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/map" android:layout_width="match_parent" android:layout_height="match_parent" android:name="com.google.android.gms.maps.mapfragment"/> 27
Paso 6: Añadir un mapa Modificar la definición del layout de la aplicación o añadir una nueva. Si creaste un recurso layout nuevo, asegurate de que asocias su vista con la actividad. setcontentview(r.layout.nombre_recurso); 28
Paso 7: Probar que todo funciona 29
Funcionalidad del API 30
GoogleMap object Es la representación interna del propio mapa Es necesario obtener una referencia a este objeto en primer lugar: onmapready(googlemap) Implementar la interfaz OnMapReadyCallback Registar el objeto de callback (getmapasync) 31
GoogleMap object public class MainActivity extends WhateverActivity implements OnMapReadyCallback { private GoogleMap mmap;... } @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); } MapFragment mapfragment = (MapFragment) getfragmentmanager().findfragmentbyid(r.id.map); mapfragment.getmapasync(this); Mmap = mapfragment.getmap(); 32
Configuración del estado inicial... Posición de cámara: localización, zoom, etc. Tipo de mapa Controles en pantalla Gestos de IU permitidos Activación modo ligero 33
...mediante el XML <fragment xmlns:android="http://schemas.android.com/apk/res/android" xmlns:map="http://schemas.android.com/apk/res-auto" android:id="@+id/map" android:layout_width="match_parent" android:layout_height="match_parent" android:name="com.google.android.gms.maps.mapfragment" map:camerabearing="112.5" map:cameratargetlat="38.9615441" map:cameratargetlng="-3.9787218" map:cameratilt="30" map:camerazoom="13" map:maptype="normal" map:uicompass="false" map:uirotategestures="true" map:uiscrollgestures="false" map:uitiltgestures="true" map:uizoomcontrols="false" map:uizoomgestures="true"/> 34
mediante programa @Override public void onmapready(googlemap googlemap) { googlemap.getuisettings().settiltgesturesenabled(false); googlemap.getuisettings().setcompassenabled(true); googlemap.getuisettings().setzoomcontrolsenabled(true); if (!googlemap.getuisettings().isscrollgesturesenabled()) googlemap.getuisettings().setscrollgesturesenabled(true); } http://goo.gl/cnqiu7 35
Jungando con la vista private static final LatLng SYDNEY = new LatLng(-33.88,151.21); private static final LatLng MOUNTAIN_VIEW = new LatLng(37.4, -122.1); // Move the camera instantly to Sydney with a zoom of 15. map.movecamera(cameraupdatefactory.newlatlngzoom(sydney, 15)); // Zoom in, animating the camera. map.animatecamera(cameraupdatefactory.zoomin()); // Zoom out to zoom level 10, animating with a duration of 2 seconds. map.animatecamera(cameraupdatefactory.zoomto(10), 2000, null); // Construct a CameraPosition focusing on Mountain View and animate the camera to that position. CameraPosition cameraposition = new CameraPosition.Builder().target(MOUNTAIN_VIEW) // Sets the center of the map to Mountain View.zoom(17) // Sets the zoom.bearing(90) // Sets the orientation of the camera to east.tilt(30) // Sets the tilt of the camera to 30 degrees.build(); // Creates a CameraPosition from the builder map.animatecamera(cameraupdatefactory.newcameraposition(cameraposition)); https://developers.google.com/maps/documentation/android/views 36
Establecer el tipo de mapa mmap.setmaptype(googlemap.map_type_xxxxx) MAP_TYPE_NORMAL MAP_TYPE_HYBRID MAP_TYPE_TERRAIN 37
Ejercicio Mediante el uso del menú desplegable en la barra de actividades, seleccionar entre tres tipos de mapas. Cambiar la vista cuando el usuario haga click en una de las opciones mostradas 38
Añadir marcadores Identifican localizaciones: GoogleMap.setMarker(markerOptions) Son configurables Son interactivos: click, draggable @Override public void onmapready(googlemap map) { } map.addmarker(new MarkerOptions().position(new LatLng(0, 0)).title("Marker")); 39
Ejercicio Jugar con los marcadores. Visitar: http://goo.gl/dpi2s9 Crear uno o varios marcadores de alguna ciudad que os guste. Cambiar el icono por defecto y el texto descriptivo para que se sepa por qué la habéis elegido. 40
Gestor de eventos & callbacks OnCameraChangeListener OnInfoWindowClickListener OnMapClickListener OnMapLongClickListener OnMarkerClickListener OnMarkerDragListener 41
Ejemplo googlemap.setonmapclicklistener(new GoogleMap.OnMapClickListener() { @Override public void onmapclick(latlng latlng) { Toast.makeText(getApplicationContext(), "Evento en " + latlng.tostring(), Toast.LENGTH_LONG).show(); } }); 42
Modelo GroundOverlay: Imagen superpuesta a un mapa que permanece fija. LatLng: coordenadas latitud/longitud almacenadas en grados. Marker: Marcador en un punto fijo Polygon: Poligono definido en el mapa Polygon polygon = map.addpolygon(new PolygonOptions().add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5), new LatLng(0, 0)).strokeColor(Color.RED).fillColor(Color.BLUE)); 43
Modelo Polyline: puntos unidos por una linea Cameraposition: todas las variables de posición de la cámara/punto de vista Tile: Una losa, características de una polyline 44
Localización del usuario Muchas posibilidades: GPS Triangulación Celdas (GSM, UMTS) Wi-Fi Movimiento del usuario Problema de fiabilidad y precisión Determina el tipo de : 45
Eventos de localización en LocationManager locationmanager = (LocationManager) this.getsystemservice(context.location_service); LocationListener locationlistener = new LocationListener() { public void onlocationchanged(location location) { mmap.movecamera(cameraupdatefactory.newlatlng( new LatLng(location.getLatitude(),location.getLongitude()))); } public void onstatuschanged(string provider, int status, Bundle extras) {} public void onproviderenabled(string provider) {} public void onproviderdisabled(string provider) {} }; GPS_PROVIDER locationmanager.requestlocationupdates(locationmanager.gps_provider, 0, 0, locationlistener); 46
Cómo lo pruebo? ADM Control remoto del emulador Ficheros GPX para simular una ruta Ficheros KML describiendo sitios individuales marcados y que se le proporcionan de forma secuencial al dispositivo. 47
Gracias 48