Cómo implementar Windows de información de marcador de mapa dinámico y personalizado para Google Maps iOS

fuente de la imagen: https://codyhouse.co/gem/custom-google-map/

Este artículo tiene más de un año y algunos códigos pueden estar desactualizados.

Si planea implementar una vista de mapa en su aplicación iOS, es probable que se esté inclinando hacia el uso de Google Maps, a diferencia de Apple Maps, y no lo culpo. Las aplicaciones de mapeo tienen dos usos comunes: proporcionar direcciones e indicar ubicaciones específicas en todo el mapa. Si su aplicación incluirá este último, los marcadores de mapa son la herramienta de acceso para facilitarlo. Las ventanas de información son las vistas que se presentan cuando un usuario toca un marcador, y como se trata de Swift, existe una gran cantidad de funcionalidades e información potenciales que se pueden presentar en estas vistas. Si bien la guía del SDK proporcionada por Google entra en gran detalle en cada componente de mapa individual admitido, no dejan en claro cómo armar todo. Ahora, como aprendí mientras trabajaba en mi primera aplicación centrada en mapas, no solo no hay tutoriales o guías obvios proporcionados por Google, sino que tampoco hay guías completas y pulidas disponibles en línea.

Supuestos

Google Maps ya debería estar implementado y funcionando en su aplicación. Si necesita ayuda para implementar Google Maps en sí, hay muchas guías fáciles de seguir disponibles en toda la web, y por Google mismo aquí: https://developers.google.com/maps/documentation/ios-sdk/start

Si planea implementar ventanas de información dinámica, su aplicación también debe estar respaldada por una base de datos; en mi caso, usaré Firebase. Las entradas de la base de datos almacenarán las coordenadas de todos sus marcadores, así como algunos datos relacionados con ellos.

En esta guía, crearé un archivo XIB personalizado para sus marcadores, mostraré los datos del marcador en sus UILabels y manejaré los eventos de pulsación de botón realizados en el marcador. Esto se hará usando Swift 3.

1. Crear la vista de marcador personalizado

El primer paso es crear un nuevo archivo de vista, al que llamé MapMarkerWindowView.xib. La vista del archivo XIB debe redimensionarse a su tamaño de ventana de información preferida, y debe contener todos los elementos de la interfaz de usuario que desee, como UILabels, UIButtons, UISwitches y cualquier otra cosa que desee incluir. No olvides bloquear todos estos elementos en su lugar usando restricciones. En este ejemplo, tengo tres etiquetas y un botón.

2. Hacer el archivo de clase asociada

A continuación, cree un nuevo archivo Swift que contendrá la clase para controlar su archivo de vista, el mío se llama MapMarkerWindow.swift. Esta clase debe extender UIView y tener referencias de IBOutlet a sus elementos de IU. Si incluye elementos en su vista que requieren controladores de eventos, como UIButtons, haga referencia a estos en su clase con IBActions. Para que su clase MapViewController sepa que estos eventos se han activado, deberá crear un protocolo delegado junto con métodos de manejo de eventos en su MapMarkerWindow.swift e implementarlo en su clase MapViewController. Además, cree un método de clase pública para crear una instancia del archivo XIB que creó anteriormente. Esto se requerirá más adelante al asignar la ventana de información personalizada a los marcadores.

3. Cargando los datos del marcador de su base de datos

Al pasar a la clase que administra su vista de Google Maps, deberá recopilar un diccionario de datos relacionados con cada marcador que desee colocar en su mapa; esto debe incluir coordenadas para la ubicación del marcador. Como se mencionó anteriormente, estoy almacenando mis datos de marcador en Firebase. Recupere los datos de su marcador de la manera que lo necesite y asegúrese de que los valores de latitud y longitud estén disponibles. En mi caso, cargaré todos los datos para cada marcador individual y los almacenaré en un diccionario que llamo spot. Una vez que tenga los datos, estará listo para crear el marcador del mapa; lo haremos en el hilo principal para descargar los cálculos del hilo de la interfaz de usuario. En este punto, puede usar una imagen como una imagen de marcador personalizada y colorearla como desee. Asigne la propiedad de posición del marcador a los valores de coordenadas que cargó anteriormente y no olvide asignar la propiedad userData del marcador al diccionario de puntos que contiene todos los datos del marcador. Este paso es importante ya que cualquier dato que desee mostrar en la ventana de información deberá formar parte de este diccionario de datos de usuario asociado al marcador. Debe llamar a este método desde viewDidLoad.

4. Implemente los métodos GMSMapViewDelegate

Haga que su MapViewController se extienda desde el protocolo GMSMapViewDelegate. Esto requerirá que implemente algunos métodos, pero primero cree dos propiedades de clase:

private var infoWindow = MapMarkerWindow ()
fileprivate var locationMarker: GMSMarker? = GMSMarker ()

A continuación, cree una función para devolver una instancia de la clase de vista personalizada que creó

En viewDidLoad, asegúrese de asignar self.infoWindow = loadNiB ().

Ahora, implementaremos algunos métodos GMSMapViewDelegate. El método principal, que le permitirá mostrar todos los datos de su mapa en la ventana de información, es el método de marcador didTap. Usando el parámetro marcador pasado, podemos acceder a todos los datos de esos marcadores a través de marker.userData. Establezca su propiedad de clase self.locationMarker para que sea este marcador; esto es para que luego podamos manejar mover la ventana de información de manera apropiada si el mapa se mueve. También queremos restablecer la propiedad de la clase self.infoWindow para que sea loadNiB () nuevamente. En este punto, podemos hacer cualquier configuración de elementos de la IU en la ventana de información, como agregar un radio de esquina o reducir la opacidad. También establecemos el texto de las etiquetas de nuestra ventana de información aquí utilizando los datos proporcionados en marker.userData. También queremos colocar el punto central de la vista de la ventana de información para que sea igual al punto central del marcador aquí. Se requerirá un desplazamiento negativo del valor Y para colocar la ventana de información sobre el marcador.

Los otros dos métodos delegados del protocolo GMSMapViewDelegate que implementaremos son la posición didChange y la coordenada didTapAt. Si la vista del mapa se movió mientras una ventana de información está abierta, queremos que la ventana de información se reposicione correctamente para permanecer en la parte superior del marcador del que proviene. Además, si un usuario toca en otra parte del mapa, rechazaremos la presentación de la ventana de información.

En este punto, si ejecutamos nuestra aplicación, la ventana de información debería presentarse con sus datos apropiados.

5. Manejar desencadenantes de eventos desde la ventana de información

Si queremos ejecutar un poco de código desde MapViewController cuando se toca un botón en la ventana de información, simplemente implementamos el protocolo MapMarkerDelegate en esa clase. Esto nos obligará a llamar al método didTapInfoWindow que definimos en ese protocolo. Desde aquí, tenemos acceso completo a los datos de esos marcadores. Esto puede ser útil si queremos impulsar un nuevo controlador de vista que requiera la información de puntos.

¡Eso es! Esto debería juntar todas las partes de trabajo necesarias para obtener una ventana de información personalizada para sus marcadores de mapas.