Usando Google Maps en tu Android App

Oscar Salguero
Oscar SalgueroSenior Software Engineer
Usando Google Maps
 en tu Android App

  @oscarsalguero
Agenda
•  Huella Digital y Certificado de Debug
•  API Key de Google Maps
•  Android App con Google Maps:
     •  Creando el proyecto correctamente
     •  Retoques al Android Manifest
     •  XML Layout con MapView
     •  Activity que hereda de MapActivity
     •  Custom Overlay para agregar Capas
     •  Detectando la ubicación del Usuario (Bonus!)
            Simulando una ubicación (Mock Location)
•  Enlaces de interés
•  Preguntas
                  @oscarsalguero
Huella Digital y Certificado para Debug
•  Es una firma digital que identifica a cada App en el Market o a tu
Eclipse IDE.
•  Es necesaria para que los mapas funcionen en el simulador y en
los dispositivos.
•  Sin ella, los mapas sencillamente no cargan.
•  Se genera con una herramienta llamada “keytool” ubicada en:
[folder-de-tu-android-sdk]/tools/
•  El comando es:
keytool -list -alias androiddebugkey –keystore
[USER_FOLDER]/.android/debug.keystore




                      @oscarsalguero
Huella Digital y Certificado para Debug




            @oscarsalguero
El API Key de Google Maps
•  Necesitas tener una cuenta de Google para obtener una.
•  La API Key será asociada a tu cuenta de Google.
•  Hay una unica API Key (llave) por cada App.
•  Si la “huella digital” (fingerprint MD5) de tu App cambia, deberás
obtener otra API Key con la nueva “huella digital”.
•  Es necesaria para que los mapas funcionen en el simulador y en
los dispositivos.
•  Sin ella, los mapas sencillamente no cargan.
•  Se genera obtiene aquí:
http://code.google.com/android/maps-api-signup.html
•  Aquí se usa el fingerprint MD5 que generamos en el paso anterior.




                      @oscarsalguero
El API Key de Google Maps




     @oscarsalguero
Creando el Proyecto Correctamente
1.  Haz click en el menu File -> New -> Android Project
2.  Escribe “GoogleMapsDemo” en el campo “Project name”.
3.  Deja el grupo de campos bajo “Contents” como esta por defecto.
4.  Como “Build Target” debes elegir una opción que incluya Google
    APIs, con un API Level mayour o igual que 7.
5.  En el grupo de campos llamado “Properties”, especifica el
    nombre de la App, un paquete, una Activity y un Min SDK con
    valor de “7”.


Tips:
•   No nombres tu Activity como “MapActivity”, porque tendrá conflicto de
    nombre con una Activity de la API de Google Maps.
•   No utilices API Levels menores que 7, porque perderas features de las
    APIs.


                       @oscarsalguero
Creando el Proyecto Correctamente




         @oscarsalguero
Creando el Proyecto Correctamente




         @oscarsalguero
Retoques al Android Manifest
1.  Hay que indicar que nuestra App usa la librería de Google Maps




2.  Nuestra App necesitara acceder a Internet para traer los mapas
    y para lograr nuestro “Bonus feature” de detectar la ubicación
    del usuario necesitaremos permisos para usar el aGPS.




                     @oscarsalguero
Retoques al Android Manifest
3. Nos desharemos de la barra de título para tener mas espacio en
   nuestro Mapa.




                    @oscarsalguero
XML Layout con MapView
•    En Android, la interface de Usuario (UI) la creamos en un XML.
•    Casi todos los componentes son Views, el de mapas (MapView)
     no es la excepción.
•    Nuestra App tiene un XML Layout con un MapView, el archivo
     main.xml:




                     @oscarsalguero
Activity que hereda de MapActivity
•    En Android, una Activity es la “pantalla”, la UI con la que el
     Usuario interactua, donde hace click, y donde visualiza la
     información.
•    Para usar Google Maps, nuestra Activity tiene que heredar de
     MapActivity.




                     @oscarsalguero
Custom Overlay para agregar Capas
•    Un Custom Overlay sirve para agregar Layers (capas) con
     información al Mapa, pines o iconos que denotan lugares es lo
     común.
•    Debemos importar el paquete com.google.android.maps.*;
•    Y debemos hacer una clase que herede de ItemizedOverlay, en
     este caso he llamado a dicha clase “CustomOverlay”.
•    Podemos sobreescribir varios de los métodos de
     ItemizedOverlay para que los items en estas capas se
     comporten y vean como queremos, entre ellos:
            addOverlay
            createItem
            size
            onTap



                     @oscarsalguero
Custom Overlay para agregar Capas
•    Necesitaremos importar las librerias siquientes:




•    Heredar de ItemizedOverlay:




•    Debemos remitirnos al código fuente para ver los metodos a ser
     utilizados y los que serán modificados ( son los que tienen
     @Override).




                      @oscarsalguero
Detectando la ubicación del Usuario
•    Los dispositivos Android te dejarán saber la ubicación del
     usuario con su Latitud y Longitug si cuentan con un módulo
     aGPS, este usa un acceso directo a satélites GPS orbitando
     nuestro Planeta, o usa triangulación de señales celulares
     provenientes de torres o routers Wi-Fi a tu alrededor.
•    La latitud y longitud son generalmente un “float” con signo.
•    Accederemos a los Location Services usando el objeto
     LocationManager.




                     @oscarsalguero
Detectando la ubicación del Usuario
•    Podemos hacer algo cuando el Usuario se esta moviendo y su
     ubicación esta cambiando, usando un LocationListener.




                    @oscarsalguero
Simulando una ubicación
•    Usando ADT para Eclipse y su DDMS se puede probar una App
     que muestre la ubicación del Usuario indicando la Latitud y
     Longitud manualmente o en un archivo KML.




                     @oscarsalguero
¿Preguntas?



 @oscarsalguero
Enlaces de Interés
•  El código fuente de esta presentación esta en GitHub:
https://github.com/RacZo/GoogleMapsDemo
•  Obtaining a Maps API Key
http://code.google.com/intl/en/android/add-ons/google-apis/
mapkey.html
•  Signup for the Android Maps API
http://code.google.com/android/maps-api-signup.html
•  Google Map View
http://developer.android.com/resources/tutorials/views/hello-
mapview.html
•  Android Developers          http://developer.android.com




                    @oscarsalguero
¡Muchas gracias!


                               Twitter: @oscarsalguero
                         Sitio Web: www.oscarsalguero.com

This work is licensed under the Creative Commons Attribution 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/ or
send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
1 de 21

Más contenido relacionado

Similar a Usando Google Maps en tu Android App

Taller Android seedrocketTaller Android seedrocket
Taller Android seedrocketIsrael Camacho
857 vistas38 diapositivas
Desarrollo de Mobile Web AppsDesarrollo de Mobile Web Apps
Desarrollo de Mobile Web AppsAsier Marqués
1.3K vistas38 diapositivas
PhoneGap Basics v1.0PhoneGap Basics v1.0
PhoneGap Basics v1.0Jesús Fontecha
4.9K vistas26 diapositivas

Similar a Usando Google Maps en tu Android App(20)

Taller Android seedrocketTaller Android seedrocket
Taller Android seedrocket
Israel Camacho857 vistas
Desarrollo de Mobile Web AppsDesarrollo de Mobile Web Apps
Desarrollo de Mobile Web Apps
Asier Marqués1.3K vistas
SIBW - TAC - Trabajo - Daniel Díaz SalasSIBW - TAC - Trabajo - Daniel Díaz Salas
SIBW - TAC - Trabajo - Daniel Díaz Salas
Daniel Díaz Salas462 vistas
PhoneGap Basics v1.0PhoneGap Basics v1.0
PhoneGap Basics v1.0
Jesús Fontecha4.9K vistas
CTParking documentacion aplicacion CTParking documentacion aplicacion
CTParking documentacion aplicacion
christian marcelo torres torres126 vistas
MobileCONGalicia Introducción a AndroidMobileCONGalicia Introducción a Android
MobileCONGalicia Introducción a Android
Alberto Ruibal2.3K vistas
Mobile Day - Lecciones de vueloMobile Day - Lecciones de vuelo
Mobile Day - Lecciones de vuelo
Software Guru514 vistas
Mi primera app con GAE y GWTMi primera app con GAE y GWT
Mi primera app con GAE y GWT
GDG Lima320 vistas
Power pointPower point
Power point
seijas14230 vistas
Api geolocationApi geolocation
Api geolocation
Edgar Fuentes683 vistas
Gps con googlemapsGps con googlemaps
Gps con googlemaps
Julio Chamba293 vistas
Introducción al desarrollo de Google MappletsIntroducción al desarrollo de Google Mapplets
Introducción al desarrollo de Google Mapplets
Jorge Iván Meza Martínez807 vistas
Las appsLas apps
Las apps
Nirvana19456 vistas
Taller de desarrollo de aplicaciones móviles con la tecnología del SIG Corpor...Taller de desarrollo de aplicaciones móviles con la tecnología del SIG Corpor...
Taller de desarrollo de aplicaciones móviles con la tecnología del SIG Corpor...
Proyecto SIG Corporativo de la Junta de Andalucía555 vistas

Último(20)

Usando Google Maps en tu Android App

  • 1. Usando Google Maps en tu Android App @oscarsalguero
  • 2. Agenda •  Huella Digital y Certificado de Debug •  API Key de Google Maps •  Android App con Google Maps: •  Creando el proyecto correctamente •  Retoques al Android Manifest •  XML Layout con MapView •  Activity que hereda de MapActivity •  Custom Overlay para agregar Capas •  Detectando la ubicación del Usuario (Bonus!)   Simulando una ubicación (Mock Location) •  Enlaces de interés •  Preguntas @oscarsalguero
  • 3. Huella Digital y Certificado para Debug •  Es una firma digital que identifica a cada App en el Market o a tu Eclipse IDE. •  Es necesaria para que los mapas funcionen en el simulador y en los dispositivos. •  Sin ella, los mapas sencillamente no cargan. •  Se genera con una herramienta llamada “keytool” ubicada en: [folder-de-tu-android-sdk]/tools/ •  El comando es: keytool -list -alias androiddebugkey –keystore [USER_FOLDER]/.android/debug.keystore @oscarsalguero
  • 4. Huella Digital y Certificado para Debug @oscarsalguero
  • 5. El API Key de Google Maps •  Necesitas tener una cuenta de Google para obtener una. •  La API Key será asociada a tu cuenta de Google. •  Hay una unica API Key (llave) por cada App. •  Si la “huella digital” (fingerprint MD5) de tu App cambia, deberás obtener otra API Key con la nueva “huella digital”. •  Es necesaria para que los mapas funcionen en el simulador y en los dispositivos. •  Sin ella, los mapas sencillamente no cargan. •  Se genera obtiene aquí: http://code.google.com/android/maps-api-signup.html •  Aquí se usa el fingerprint MD5 que generamos en el paso anterior. @oscarsalguero
  • 6. El API Key de Google Maps @oscarsalguero
  • 7. Creando el Proyecto Correctamente 1.  Haz click en el menu File -> New -> Android Project 2.  Escribe “GoogleMapsDemo” en el campo “Project name”. 3.  Deja el grupo de campos bajo “Contents” como esta por defecto. 4.  Como “Build Target” debes elegir una opción que incluya Google APIs, con un API Level mayour o igual que 7. 5.  En el grupo de campos llamado “Properties”, especifica el nombre de la App, un paquete, una Activity y un Min SDK con valor de “7”. Tips: •  No nombres tu Activity como “MapActivity”, porque tendrá conflicto de nombre con una Activity de la API de Google Maps. •  No utilices API Levels menores que 7, porque perderas features de las APIs. @oscarsalguero
  • 8. Creando el Proyecto Correctamente @oscarsalguero
  • 9. Creando el Proyecto Correctamente @oscarsalguero
  • 10. Retoques al Android Manifest 1.  Hay que indicar que nuestra App usa la librería de Google Maps 2.  Nuestra App necesitara acceder a Internet para traer los mapas y para lograr nuestro “Bonus feature” de detectar la ubicación del usuario necesitaremos permisos para usar el aGPS. @oscarsalguero
  • 11. Retoques al Android Manifest 3. Nos desharemos de la barra de título para tener mas espacio en nuestro Mapa. @oscarsalguero
  • 12. XML Layout con MapView •  En Android, la interface de Usuario (UI) la creamos en un XML. •  Casi todos los componentes son Views, el de mapas (MapView) no es la excepción. •  Nuestra App tiene un XML Layout con un MapView, el archivo main.xml: @oscarsalguero
  • 13. Activity que hereda de MapActivity •  En Android, una Activity es la “pantalla”, la UI con la que el Usuario interactua, donde hace click, y donde visualiza la información. •  Para usar Google Maps, nuestra Activity tiene que heredar de MapActivity. @oscarsalguero
  • 14. Custom Overlay para agregar Capas •  Un Custom Overlay sirve para agregar Layers (capas) con información al Mapa, pines o iconos que denotan lugares es lo común. •  Debemos importar el paquete com.google.android.maps.*; •  Y debemos hacer una clase que herede de ItemizedOverlay, en este caso he llamado a dicha clase “CustomOverlay”. •  Podemos sobreescribir varios de los métodos de ItemizedOverlay para que los items en estas capas se comporten y vean como queremos, entre ellos:   addOverlay   createItem   size   onTap @oscarsalguero
  • 15. Custom Overlay para agregar Capas •  Necesitaremos importar las librerias siquientes: •  Heredar de ItemizedOverlay: •  Debemos remitirnos al código fuente para ver los metodos a ser utilizados y los que serán modificados ( son los que tienen @Override). @oscarsalguero
  • 16. Detectando la ubicación del Usuario •  Los dispositivos Android te dejarán saber la ubicación del usuario con su Latitud y Longitug si cuentan con un módulo aGPS, este usa un acceso directo a satélites GPS orbitando nuestro Planeta, o usa triangulación de señales celulares provenientes de torres o routers Wi-Fi a tu alrededor. •  La latitud y longitud son generalmente un “float” con signo. •  Accederemos a los Location Services usando el objeto LocationManager. @oscarsalguero
  • 17. Detectando la ubicación del Usuario •  Podemos hacer algo cuando el Usuario se esta moviendo y su ubicación esta cambiando, usando un LocationListener. @oscarsalguero
  • 18. Simulando una ubicación •  Usando ADT para Eclipse y su DDMS se puede probar una App que muestre la ubicación del Usuario indicando la Latitud y Longitud manualmente o en un archivo KML. @oscarsalguero
  • 20. Enlaces de Interés •  El código fuente de esta presentación esta en GitHub: https://github.com/RacZo/GoogleMapsDemo •  Obtaining a Maps API Key http://code.google.com/intl/en/android/add-ons/google-apis/ mapkey.html •  Signup for the Android Maps API http://code.google.com/android/maps-api-signup.html •  Google Map View http://developer.android.com/resources/tutorials/views/hello- mapview.html •  Android Developers http://developer.android.com @oscarsalguero
  • 21. ¡Muchas gracias! Twitter: @oscarsalguero Sitio Web: www.oscarsalguero.com This work is licensed under the Creative Commons Attribution 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.