Google Maps en Flutter

Este post es una traducción del post realizado por Deven Joshi, fue previamente consultado por el para utilizar su post y pasarlo a nuestro idoma, de tal manera que antes de iniciar quisiera agradecerle la oportunidad de realizar este trabajo.

Google publicó recientemente el plugin oficial de Google Maps para Flutter, añadiendo soporte oficial para Google Maps en Flutter.

Este artículo analizará cómo añadir Google Maps a un proyecto Flutter y las funciones y personalización disponibles. En el momento de escribir estas líneas, este plugin se encuentra todavía en la vista previa del desarrollador y es posible que se produzcan cambios drásticos en el futuro. Haré todo lo posible para actualizar el artículo cuando sea necesario.

Nota: Dado que Google Maps depende de un paquete externo y no está incorporado, no he añadido este artículo como parte de mi serie Deep Dive en los widgets. Sin embargo, este artículo seguirá un patrón similar.

Configurando nuestra aplicación

Antes de empezar, necesitamos configurar nuestras claves de API para que nuestra aplicación funcione con Google Maps. Las instrucciones generales se dan aquí en el paquete y sígalas para configurar su proyecto.

En pocas palabras:

• Cree una clave de API de Google Maps aquí.
• Agrega tu llave a manifest.xml de Android:

<application...
  <meta-data android:name="com.google.android.geo.API_KEY"
      android:value="YOUR API KEY"/>

• Agrega tu llave a iOS:

Agrega el importGoogleMaps al Runner -> AppDelegate.m y añada la clave de la API. Su archivo debería tener este aspecto:

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [GMSServices provideAPIKey:@"YOUR API KEY"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

• Agrega esto a Info.plist:

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

todo listo!

Agregar un mapa de Google Map a una pantalla

Para añadir un mapa de Google, utilice un widget de GoogleMap en su árbol de widgets. He aquí un ejemplo básico:

Column(
  children: <Widget>[
    Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: GoogleMap(
        onMapCreated: (GoogleMapController controller) {},
      ),
    ),
  ],
),

Con esto veríamos lo siguiente:

Implementación básica de Google Maps en Flutter

Esto es bastante bueno para unas pocas líneas de código. Pero la mayoría de las veces, no queremos que una aplicación tenga un mapa aleatorio. Así que, veamos ahora cómo personalizar, controlar el mapa, añadir marcadores, etc.

Cambiando opciones del Mapa

El parámetro de opciones nos permite establecer algunos ajustes por defecto como habilitar/deshabilitar gestos o establecer la posición por defecto de la cámara, etc.

Cambiar el tipo de mapa

Podemos definir el tipo de mapa utilizando el parámetro mapType en GoogleMapOptions.

Se puede ajustar a satélite, híbrido, normal o terreno.

GoogleMap(
  onMapCreated: (GoogleMapController controller) {},
  options: GoogleMapOptions(
    mapType: MapType.satellite,
  ),
),

Vista Satelital

Establecer la posición predeterminada de la cámara

Ajustando el parámetro cameraPosition se ajusta la posición predeterminada de la cámara a un objetivo. Lo veremos en detalle cuando veamos CameraPosition en la siguiente sección.

options: GoogleMapOptions(
  cameraPosition: CameraPosition(
    target: LatLng(37.4219999, -122.0862462),
  ),
),

Mostrar la ubicación del usuario

La ubicación del usuario se puede mostrar en el mapa configurando el parámetro myLocationEnabled en true. Para que esto funcione también debemos añadir los permisos necesarios en ambas plataformas.

En Android:

Añadir

<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />

o

<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />

al manifest.xml. También necesitamos pedir permiso explícitamente al usuario.

Para ello, se puede utilizar un paquete como permission_handler.

En iOS:

Añada una clave ’NSLocationWhenInUseUsageDescription’ a su archivo ’Info.plist’. Esto solicitará automáticamente al usuario permisos cuando el mapa intente activar la capa Mi ubicación.

La locación del usuario esta siendo mostrada.

Si todo va bien, este debería ser el resultado.

Habilitar/deshabilitar gestos

GoogleMapOptions nos da varias opciones para activar o desactivar tipos específicos de gestos como inclinación, zoom, etc.

options: GoogleMapOptions(
  cameraPosition: CameraPosition(
    target: LatLng(37.4219999, -122.0862462),
  ),
  rotateGesturesEnabled: false,
  scrollGesturesEnabled: false,
  tiltGesturesEnabled: false,
)

Este fragmento de código desactiva los tres gestos mencionados.

Mover la cámara de un lado a otro

Si te diste cuenta, el método onMapCreated en GoogleMap nos dio un GoogleMapController.

onMapCreated: (GoogleMapController controller) {},

Podemos usar este controlador para hacer cosas como fijar marcadores o mover la cámara.

Veamos un ejemplo de cómo mover la cámara a una ubicación específica, por ejemplo, la sede central de Google.

// Declarado fuera del metodo Build
GoogleMapController mapController;
Scaffold(
  body: Column(
    children: <Widget>[
      Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: GoogleMap(
            onMapCreated: (GoogleMapController controller) {
              mapController = controller;
            },
      ),
    ],
  ),
  floatingActionButton: FloatingActionButton(onPressed: () {
    mapController.animateCamera(
      CameraUpdate.newCameraPosition(
        CameraPosition(
            target: LatLng(37.4219999, -122.0862462), zoom: 20.0),
      ),
    );
  }),
);

Una variable se utiliza para almacenar una instancia de GoogleMapController, lo que nos permite animar la cámara.

A continuación, tenemos un botón FloatingActionButton y con su onPressed configurado para animar la cámara a la latitud y longitud del HQ de Google.

Animando la camara a una LatLng definida

Veamos todas las otras cosas que podemos hacer con mover la cámara.

CameraUpdate.newCameraPosition()

Este método nos permite establecer la latitud y longitud, el zoom, el rumbo (la orientación del mapa en grados) y la inclinación (una inclinación mayor nos da una vista lateral/visión inclinada de los edificios). La orientación cambia la dirección en la que apunta la cámara y no la inclinación.

mapController.animateCamera(
  CameraUpdate.newCameraPosition(
    CameraPosition(
      target: latLng,
      tilt: 50.0,
      bearing: 45.0,
      zoom: 20.0,
    ),
  ),
);

CameraUpdate.newLatLatLngBounds()

Esto ajusta la cámara entre dos LatLngs.

Por ejemplo, tiene más sentido que una aplicación como Uber muestre suficiente del mapa para cubrirte a ti y al coche encargado de recogerte en lugar de mostrar un mapa de toda la ciudad.

mapController.animateCamera(
    CameraUpdate.newLatLngBounds(
      LatLngBounds(
        southwest: LatLng(48.8589507, 2.2770205),
        northeast: LatLng(50.8550625, 4.3053506),
      ),
      32.0,
    ),
);

La función toma la punta suroeste y la punta noreste para cubrir en el mapa.

El segundo parámetro es un padding, veamos qué hace.

Aquí el punto suroeste es la ciudad de París y el noreste es Bruselas. Vamos a poner el padding a 0.0 y probarlo.

Padding 0.0

Las ciudades son apenas visibles. Para evitar esto, le damos al mapa un relleno más alto para traer las ciudades en el mapa.

Padding 48.0

CameraUpdate.newLatLatLng()

Esta función simplemente ajusta la cámara a una nueva latitud y longitud manteniendo el mismo factor de zoom.

mapController.animateCamera(
  CameraUpdate.newLatLng(
    LatLng(
      37.4219999,
      -122.0862462,
    ),
  ),
);

El mapa se mueve de locación, pero mantiene el zoom.

CameraUpdate.newLatLatLngZoom()

Esto es similar a la última función pero también nos permite cambiar el factor de zoom de la cámara.

mapController.animateCamera(
  CameraUpdate.newLatLngZoom(
    LatLng(37.4219999, -122.0862462),
    10.0, // Zoom factor
  ),
);

CameraUpdate.scrollBy()

Simplemente desplaza el mapa en la dirección X y/o Y por una cierta cantidad.

mapController.animateCamera(
  CameraUpdate.scrollBy(50.0, 50.0),
);

El primer parámetro da desplazamiento en la dirección X mientras que el segundo da desplazamiento en la dirección Y.

CameraUpdate.zoomIn(), CameraUpdate.zoomOut()

Simplemente realiza un zoom adentro o hacia afuera.

mapController.animateCamera(
  CameraUpdate.zoomIn(),
);
mapController.animateCamera(
  CameraUpdate.zoomOut(),
);

CameraUpdate.zoomBy()

Zoom dependiendo de un valor otorgado

mapController.animateCamera(
  CameraUpdate.zoomBy(4.0),
);

CameraUpdate.zoomTo()

Zoom para el factor específico.

mapController.animateCamera(
  CameraUpdate.zoomTo(5.0),
);

Agregando marcadores al mapa

Podemos usar el mismo GoogleMapController que usamos anteriormente para añadir marcadores en el mapa también.

Un marcador en Googleplex

Es tan fácil como:

mapController.addMarker(
  MarkerOptions(
    position: LatLng(37.4219999, -122.0862462),
  ),
);

Agregando texto a los marcadores

Podemos agregar información a los marcadores utilizando los parámetros infoWindowText.

MarkerOptions(
    position: LatLng(37.4219999, -122.0862462),
    infoWindowText: InfoWindowText("Title", "Content"),
  ),

Agregando información al marcador

Podemos cambiar la imagen que se está utilizando para el marcador mediante el parámetro de icono. Usemos el icono Flutter como marcador.

En el parámetro icono podemos proporcionar un asset como este:

MarkerOptions(
  position: LatLng(37.4219999, -122.0862462),
  icon: BitmapDescriptor.fromAsset('images/flutter.png',),
),

Utilizando el logo de Flutter como marcador

Cambiar la apariencia del marcador predeterminado

También podemos cambiar el color usando el parámetro de icono:

MarkerOptions(
  position: LatLng(37.4219999, -122.0862462),
  icon:
      BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
),

También podemos establecer el alpha (que tan opaco es el icono):

MarkerOptions(
  position: LatLng(37.4219999, -122.0862462),
  alpha: 0.5,
),

Y finalmente, también podemos rotar el icono:

MarkerOptions(
  position: LatLng(37.4219999, -122.0862462),
  rotation: 45.0, // Rotation in degrees
),

Para finalizar los invito a ver los otros post de Deven Joshi, están en inglés pero como siempre les digo, el código es igual para todos!

Espero hallan disfrutado de este post y les ayude en sus trabajo/estudio de Flutter, si algo no esta bien les pido de favor me lo hagan saber y lo reviso.

Me despido dejando mi cuenta de Twitter por si quieren seguirme de cerca y ver noticias de Flutter en todos los idiomas que pueda!! 😅

Argel Bejarano (@ArkangelB) | Twitter

no dejen de aletear!