Genesis Vargas J

Desarrollando una app iOS y Android con Geolocalizacion (usando Google Maps) Parte 1

Comparte:

Hola amigos, han notado ¿como hay un BOOM de aplicaciones móviles que usan mapas?. Para entender ésta tendencia hay que recordar que la forma en que desarrollamos apps ha cambiado sustancialmente con el pasar de los años haciendo que hoy sea mucho más fácil y rápida (afortunadamente para nosotros), desde el IDE (hacer una app de mapas con Eclipse era un martirio, hoy con Android Studio escoges la plantilla de mapas y ya tienes tu app con un solo click) hasta los SDK's de mapas (hoy hay una variedad: google, here, mapzen, etc y todos son extremadamente sencillos de implementar y gratis*).

En éste post les enseñaré como hacer una aplicación de geolocalización y para el ejemplo de éste tutorial haremos una app que muestre un mapa (de Google) y nos localice poniendo un marcador en nuestra ubicación actual.

Lo primero que vamos a hacer es crear un proyecto en la consola de Google Developers, despúes de creado vamos a la sección de biblioteca y activamos el SDK de Google Maps para iOS y Android, finalmente vamos a la sección de credenciales y creamos una clave de API.

En éste punto ya podemos empezar a desarrollar la aplicación como tal, así que iniciaremos con IOS. Primero abrimos Xcode y creamos un nuevo proyecto al que llamaremos geolocalizacion (trabajaremos con Swift como lenguaje de programación), el siguiente paso será hacer click sobre el archivo info.plist (es como el archivo manifest de android) y agregar el permiso de ubicación NSLocationWhenInUseUsageDescription (Privacy - Location When In Use Usage Description) y lo creamos como esta por default y en el campo string le ponemos el mensaje del porqué estamos pidiendo permiso para utilizar la ubicación.

Ahora vamos a implementar el SDK de Google Maps en nuestro poyecto y para eso seguimos las instrucciones que nos da Google. Instalaremos el SDK a tráves de CocoaPods (si no lo tienes instalado ejecuta éste comando en tu terminal: sudo gem install cocoapods) y para eso creamos un archivo Podfile en nuestro poyecto y lo dejaremos asi:

Paso seguido abrimos una terminal, nos ubicaremos en la carpeta del proyecto con el comando cd e instalamos las API's con el comando: pod install, finalmente cerramos Xcode y volvemos a abrir el proyecto pero a tráves del archivo .xcworkspace, ya abierto de nuevo nuestro proyecto vamos a configurar nuestra clave de API que ya habíamos creado. Abrimos el archivo AppDelegate, añadimos el import Google Maps y agregamos éste código en la primera función antes del return: GMSServices.provideAPIKey("YOUR_API_KEY")

Ahora de nuevo volvemos a abrir el archivo info.plist y esta vez le agregaremos los equemas de la API, añadimos un nuevo item pero sera de tipo Array al que llamaremos: LSApplicationQueriesSchemes y le agregamos dos valores: 1) googlechromes 2) comgooglemaps.

Luego vamos a abrir el archivo Main.storyboard y vamos a seleccionar el View generado por Xcode, le damos click derecho y lo arrastramos al archivo ViewController, a ésta referencia la vamos a llamar mapView y la pondremos de tipo GMSMapView, él código de éste archvio deberá quedar así:


import UIKit
import GoogleMaps

class ViewController: UIViewController, CLLocationManagerDelegate {

    @IBOutlet var mapView: GMSMapView!
    var locationManager = CLLocationManager()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let camera = GMSCameraPosition.camera(withLatitude: 0, longitude: 0, zoom: 17)
        mapView = GMSMapView.map(withFrame: self.view.bounds, camera: camera)
        mapView.isMyLocationEnabled = true
        self.view.insertSubview(mapView, at: 0)
        locationManager.delegate = self
        locationManager.requestWhenInUseAuthorization()
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.startUpdatingLocation()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        let location = locations.last
        let camera = GMSCameraPosition.camera(withLatitude: (location?.coordinate.latitude)!, longitude: (location?.coordinate.longitude)!, zoom: 17)
        mapView.camera = camera
        let marker = GMSMarker()
        marker.position = camera.target
        marker.title = "Mi Ubicación"
        marker.map = mapView
        locationManager.stopUpdatingLocation()
    }
}

Nuestro ViewController implementa el protocolo CLLocationManagerDelegate y es delegado de LocationManager y para eso creamos una variable de tipo CLLocationManager para indicar quién es el delegado y de paso configurar la ubicación, en el metodo viewDidLoad hemos indicado que la variable mapView se iniciará en el centro del mundo (antes de geolocalizar) y utilizara todo el frame del View para luego insertar el mapView dentro del View generado por Xcode (es porque no hay un control de google maps que podamos arrastrar al view, si usamos los mapas de Apple solo basta con arrastrar el control MapKitView), finalmente le damos rienda suelta al LocationManager con toda la precisión del GPS para que capture la última ubicación y poder cambiar la posición de la cámara (del centro del mundo a la ubicación actual), agregamos un marcador en ésta ubicación y detenemos el LocationManager.

Y de ésta manera ya hemos desarrollado una app iOS en Swift de geolocalización usando Google Maps.

Bueno eso es todo espero que les sirva mucho para aprender y practicar, les dejo una carpeta comprimida para que descarguen el ejemplo.

Si te gustan mis tutoriales no dudes en seguirme en mis redes sociales para estar al tanto y suscribirte a mi canal de youtube.

Comentarios


genesis vargas

Soy Genesis Vargas Jiménez, autor de éste blog. Me gusta desarrollar software en todas las plataformas (web, móvil y desktop) y compartir conocimiento para ayudar a muchas personas.

Desde el 2015 soy MVP Microsoft en Visual Studio y tecnologías de desarrollo, reconocimiento que me enorgullece mucho.

MVP Genesis Vargas J

A PHP Error was encountered

Severity: Core Warning

Message: Module 'timezonedb' already loaded

Filename: Unknown

Line Number: 0

Backtrace: