Google Maps en Flutter
Hola a todos, aquí de nuevo con una traducción más para la comunidad Flutter en español; esta vez con un artículo original de Aditya Syal y lo puedes encontrar aquí.
Google Maps, todos nosotros estamos bastante consientes del hecho de cuán cruciales son los Mapas en nuestras vidas, desde la ubicación de un lugar hasta la ubicación de tiendas cercanas, en el viaje diario, taxi, entregas de comida. La primero que hay que observar es ¿Cuán importante son los mapas? y lo segundo que hay que observar es que la mayoría de las aplicaciones en estos días tienen mapas, por lo que los Mapas en el desarrollo de aplicaciones se están volviendo una cosa seria de un día para el otro. Ahora cuando estés hablando sobre el desarrollo en Flutter, es un hecho que tal vez te encuentres en una situación donde quieras implementar mapas en Flutter y la primera pregunta luego de ese pensamiento es ¿CÓMO IMPLEMENTARLO? o ¿POR DÓNDE EMPEZAR?
En este artículo, se responderán tus preguntas como mapas en Flutter, ¿cómo usar mapas en Flutter?, implementar Google Maps en Flutter y te ayudaré desde configurarlo hasta crear un pequeño módulo usando Mapas en Flutter.
En este artículo, estarás usando el complemento de Google Maps para Flutter, el cual ha sido desarrollado por el equipo de Flutter.
¿Por dónde empezar?
Ahora, que estás aquí, tendrás curiosidad por una pregunta en particular, ¿Dónde deberías empezar? Probablemente es lo primero que te viene a la mente cuando empiezas con algo, ¿no es así? No te preocupes, te guiaré desde los requisitos previos hasta mostrar el mapa en su pantalla y luego pasar a otras cosas que puedes hacer usando este complemento. Así que, empecemos con la configuración de su proyecto la cuál se mantendrá como la base sobre la cual su mapa será mostrado.
El proceso de configuración incluye dos cosas, a saber:
Agregando el complemento
- Como sabes estarás usando el complemento de Google Maps, el cual puedes encontrar aquí. Este es el complemento oficial de Google Maps desarrollado por el equipo de Flutter.
- Agrega el complemento como una dependencia en el archivo pubspec.yaml, como se muestra abajo.
- Ahora, obtén los paquetes usando el comando flutter packages get .
Integrando la clave de API de Google Maps
El siguiente paso es el último paso antes de que puedas empezar codificar el mapa en Flutter y sin duda, el más importante, ya que este paso consiste en integrar su clave de API de Google Maps dentro de su proyecto para ambas plataformas tanto para Android como iOS.
Para Android
- Crear la clave de API de Google Maps aquí.
- Agregar la clave API en el archivo AndroidManifiest.xml
(android/app/src/main/AndroidManifiest.xml).
Para iOS
- Crear la clave de API de Google Maps aquí.
- Agregar la clave API en el archivo AndroidManifiest.xml
(iOS/runner/AppDelegate.m).
- Ahora, agregue una configuración al archivo Info.plist de la aplicación (iOS/runner/Info.plist).
Si has hecho todo lo que se dijo hasta ahora, entonces todo esta preparado, pero ahí podrían haber algunos problemas con respecto a la configuración de la clave API, los cuáles estaremos respondiendo para el final del artículo. Ahora, tu puedes empezar usando el widget GoogleMap en Flutter.
Usando el widget GoogleMap
Entonces ahora que has configurado el proyecto y supones que todo salio bien, puedes mostrar el mapa usando el widget GoogleMap en Flutter.
Este fragmento de código te ayudará a mostrar el mapa en tu aplicación, con tan sólo unas pocas líneas de código y obtienes el mapa básico mostrado en la pantalla, tu puedes desplazarlo, aumentar o disminuir el zoom, son los gestos básicos por defecto. Mira la foto de abajo para entender.
Puntos para entender el fragmento de arriba:
- initialCameraPosition: Esto da la posición de inicio del mapa cuando se abre por primera vez. Aquí diste la latitud y longitud de Egipto, usando el widget CameraPosition, el cual toma el LatLng en su propiedad target. La Cámara aquí describe la vista del usuario, es decir que posición en el mapa debería poder ver el usuario.
- GoogleMapController: es el controlador para una sola instancia de GoogleMap ejecutandose en la plataforma host. Este controlador es como cualquier otro controlador, ya sea TextEditingController, este administra varias funcionalidades tales como la posición de la cámara, el zoom, la animación, etc.
- onMapCreated: Este método es llamado cuando el mapa es creado y toma el GoogleMapController como su parámetro.
Constructor GoogleMap:
Ahora que puedes visualizar el mapa básico con la menor de sus funcionalidades, seguirás adelante para ver que funcionalidades tiene este widget con la claridad de que no será más que suficiente. Así que, empecemos por conocer las propiedades que el widget GoogleMap nos brinda, aquí está el constructor del widget GoogleMap:
Este constructor te dice los diversos parámetros que toma el widget, por lo que aquí puedes ver el listado de funciones que proporciona este widget utilizando el complemento. Ya le diste un breve resumen de las propiedades onMapCreated y el initialCameraPosition, por lo que te saltarás estas y le darás un breve resumen de las demás,
- gestureRecognizers: Esta propiedad te dice cuales gestos debe consumir el mapa. Es posible que otros reconocedores de gestos compitan con el mapa en eventos del puntero, por ejemplo si el mapa esta dentro de un ListView, el ListView va a querer manejar arrastres verticales. El mapa reclamará gestos reconocidos por alguno de los reconocedores en esta lista. Cuando este conjunto esta vació o nulo, el mapa sólo manejará eventos de puntero para gestos que no fueron reclamados por ningún otro reconocedor de gestos.
- compassEnabled: Esta propiedad te dice si el mapa debe mostrar una brújula cuando se gira. Por defecto, el valor se establece a verdadero.
- cameraTargetBounds: Esta propiedad te dice los límites para el objetivo de la cámara del mapa. Es usado con GoogleMapOptions para envolver un valor LatLngBounds. Este permite distinguir entre especificar un objetivo ilimitado y no especificar nada.
- mapType: Esta propiedad te dice sobre el tipo de tiles de mapa que se mostrarán.
Hay cinco tipos de tiles:
— ninguno: No muestra tiles de mapas.
— normal: Tiles normales con tráfico, etiquetas e información de terreno sutil.
— satélite: Imágenes de satélite(fotos aéreas).
—terreno: Tiles de terrenos(indica el tipo y altura del terreno)
— híbrido: Tiles híbridos(imágenes de satélite con algunas etiquetas/superposiciones). - minMaxZoomPreference: Esta propiedad te dice los límites preferidos para el nivel de zoom de la cámara del mapa. Es usado con GoogleMapOptions para ajustar el zoom mínimo y máximo.
- rotateGesturesEnabled, scrollGesturesEnabled, zoomGesturesEnabled, tiltGesturesEnabled: Estas cuatro propiedades son responsables de los gestos respectivos en el mapa como, girar, desplazar, zoom e inclinar.
- myLocationEnabled: Esta propiedad te dice si la capa “Mi ubicación” debe mostrarse en el mapa. Esta capa incluye un indicador de ubicación en la ubicación actual del dispositivo, así como un botón Mi ubicación.
Explorando el Widget GoogleMap:
Tienes mostrado el mapa básico y llegaste a saber que funcionalidad puede tener, explora algunas de las funcionalidades aquí:
Ubicación del dispositivo:
Empieza por mostrar la ubicación del usuario en el mapa. En las propiedades de arriba, te encontraste con una propiedad llamada myLocationEnabled, esta propiedad es la responsable de mostrar la ubicación del usuario en el mapa.
- Ajuste el valor de myLocationEnabled a verdadero.
2. Agregue permisos de ubicación en ambas plataformas nativas de su aplicación.
— En Android, agregue
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” /> or
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” /> a su archivo AndroidManifest.xml . ACCESS_COARSE_LOCATION devuelve una ubicación con una presición aproximadamente equivalente a una cuadra, mientras que ACCESS_FINE_LOCATION devuelve una ubicación tan precisa como sea posible, a pesar de que este consume más energía de batería.
— En iOS, agregue una clave “NSLocationWhereInUseUsageDescription” a su archivo Info.plist. Esto preguntará automáticamente al usuario los permisos cuando el mapa intente activar la capa “Mi ubicación”.
Entonces, por escrito unas pocas líneas de código para establecer permisos en las plataformas nativas y configurando la propiedad myLocationEnabled a verdadero, obtienes la ubicación actual del usuario.
Cambiando MapType:
Tu puedes cambiar el tipo de mapa mediante la propiedad mapType del widget GoogleMap y se puede establecer cualquier tipo, satélite, terreno, híbrido o normal.
Además creamos un tap para cambiar el mapType usando un floatingActionButton, como sabes GoogleMap es solamente como cualquier otro widget en Flutter, lo que significa que puedes usar el Mapa dentro de otros widgets, así que hemos colocado el widget GoogleMap dentro de un Stack y hemos agregado un floatingActionButton y le dimos la funcionalidad de cambiar el mapa entre el normal y satélite, siga el fragmento de código para conocer más,
Habilitar y deshabilitar gestos:
El widget GoogleMap tiene unas propiedades de gestos en él, a saber: rotateGesturesEnabled, scrollGesturesEnabled, zoomGesturesEnabled, tiltGesturesEnabled:
Moviendo la Cámara al rededor de:
- newLatLng(LatLng latLng): mueve la cámara a una ubicación geográfica específica.
- newLatLngBounds(LatLngBounds bounds, double padding): devuelve una actualización de cámara que transforma la cámara para que el cuadro delimitador geográfico especificado este centrado en la vista del mapa en el mayor nivel de zoom posible.
- newLatLngZoom(LatLng latLng, double zoom): mueve la cámara a la ubicación geográfica especificada con un nivel de zoom.
- scrollBy(double dx, double dy): devuelve una actualización de la cámara que mueve el objetivo de la cámara a la distancia de la pantalla especificada.
- zoomBy(double amount, [Offset focus]): devuelve una actualización de la cámara que modifica el nivel de zoom de la cámara por una cantidad especificada.
- zoomIn(), zoomOut(): mueve la cámara más cerca o más lejos desde la superficie de la Tierra.
- zoomTo(double zoom): devuelve una actualización de la cámara que establece el nivel de zoom de la cámara.
Estos son ciertas formas de mover la cámara con sus respectivas funcionalidades. Siéntase libre de usarlos como necesites. Aquí vas a usar newLatLng(LatLng latLng, double zoom) para mover la cámara a una ubicación especificada usando un cierto nivel de zoom.
Hemos creado un método _goToNewYork en el que se usa el método animateCamera para animar el movimiento de la cámara en función de la latitud y longitud de Nueva York con un zoom de 10. Luego hemos creado un drawer usando la propiedad drawer del Scaffold para mostrarlo. Permiteme mostrarte el fragmento de código,
Así que, puedes ver el movimiento animado de la cámara desde una ubicación a otra usando la latitud y la longitud. Creamos un grupo de otras ubicaciones y las colocamos en el drawer para que intentes moverte entre diferentes ubicaciones. El enlace de GitHub del módulo será proporcionado al final.
Establecer el marcador en el mapa:
Ahora que eres capaz de mover la cámara en función de latitud y la longitud específicas, tratarás de colocar el marcador sobre la ubicación en la que mueves la cámara. Vas a suponer que quieres moverte a Nueva York, entonces cuando la cámara se mueva a Nueva York podrás ver un marcador colocado en la ubicación determinada. Para lograr esto usarás la propiedad markers del widget GoogleMap que toma un conjunto de marcadores.
Ahora tu quieres que el marcador se establezca a medida que el usuario se desplaza a la ubicación especificada, por lo que creaste un marcador dentro del método _goToNewYork dentro del método setState().
El marcador marca una ubicación geográfica en el mapa. Aquí, el markerId es el único id de cada marcador y la propiedad posición toma el LatLng de la ubicación. Esto te da
Ahora, vas a agregar algo de información en el marcador, de modo que cuando este es pulsado la información es mostrada. Para esto usarás la propiedad infoWindow del widget Marker lo cuál te da un título, un fragmento, para dar el título del marcador y una descripción del marcador.
Ahora que has agregado el marcador en el mapa en la ubicación deseada usando la latitud y la longitud del lugar y también le diste al marcador algo de texto para que se muestre cuando es pulsado. Solo hemos mostrado la implementación de cómo hacerlo, saber que depende totalmente de usted, cómo usarlo y cómo implementarlo. Puedes encontrar el módulo completo en github.
Conclusión:
El widget GoogleMap es como cualquier otro widget en Flutter, eso significa que este widget puede ser colocado dentro de cualquier otro widget, tales como ListView, Stack, Columns, Row, Container, etc., incluso puedes transformarlo, recortarlo pero sabemos ¿por qué podría alguien recortarlo?, solamente te estamos diciendo que puedes realizar cualquier cosa en el mapa como un widget. Así que sé creativo, explora más e incluso déjanos saber de algo que encuentres.
Háganos saber cómo estuvo el artículo y desearíamos poder cubrir todo lo que contiene el artículo, cada característica; pero esto solo significaría escribir un libro y eso no es lo que tu , ni nosotros queremos. Intentamos explicar desde la raíz cómo instalarlo, hasta alguna característica básica, que podrías necesitar en un uso regular si estás usando un mapa.
Entonces, danos tu opinión.
Y lea más artículos de FlutterDevs.com
FlutterDevs ha estado trabajando en Flutter desde hace bastante tiempo. Puede conectarse con nosotros en Facebook y Twitter para cualquier consulta relacionada con Flutter.
Originalmente publicado en flutterdevs.com
Leer algunas de mis traducciones recientes de artículos sobre Flutter.
Si este artículo te ayudo en algo incluso en una o dos cosas, aplauda tantas veces como pueda para mostrar su apoyo. 👏
Soy Eduardo Coto. Técnico de computadoras y desarrollador autodidacta.
Puedes encontrarme en GitHub o seguirme en Twitter.
