Implementar Google Maps en una aplicación Flutter
Antes de poder integrar un mapa en tu aplicación Flutter, es necesario realizar algunos pasos previos.
Agregar el paquete Google Maps
Añade el paquete google_maps_flutter a tu proyecto Flutter ejecutando el siguiente comando en la terminal:
flutter pub add google_maps_flutterAsegúrate también de que tu proyecto tenga una versión mínima de minSdkVersion de al menos 21 (yo personalmente usé 23) modificando el archivo android/app/build.gradle:
defaultConfig {
minSdkVersion 23
}Activar el servicio Google Maps y crear una clave API
El segundo paso consiste en activar el servicio Google Maps para tu proyecto Flutter y generar una clave API para permitir el acceso.
- Accede a la consola de Google Cloud y selecciona tu proyecto (debe estar registrado en Firebase).
- En la barra de búsqueda, escribe «Google Maps Platform» y activa el servicio.
- Ve a la sección «Claves y credenciales» y haz clic en «+ Crear credenciales».
- Copia la clave generada para utilizarla más adelante.
- Para mayor seguridad, edita la clave y restringe su uso solo a los servicios necesarios (Google Maps y Places API).
Integrar el servicio en Android
1. Para permitir que Google Maps funcione en Android, añade el siguiente plugin en android/build.gradle:
buildscript {
dependencies {
//...
classpath 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1'
}
}2. En android/app/build.gradle, agrega la configuración para la clave API:
// Colocar entre la sección plugin{} y la sección android{}
def secretsPropertiesFile = rootProject.file("secrets.properties")
def secretsProperties = new Properties()
if (secretsPropertiesFile.exists()) {
secretsPropertiesFile.withReader("UTF-8") { reader ->
secretsProperties.load(reader)
}
}
android {
defaultConfig {
//...
manifestPlaceholders["MAPS_API_KEY"] = project.hasProperty('MAPS_API_KEY') ? MAPS_API_KEY : "DEFAULT_API_KEY"
}
}3. Finalmente, agrega tu clave API en AndroidManifest.xml:
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="${MAPS_API_KEY}" />Integrar el servicio en iOS
Para integrar Google Maps en iOS, sigue estos pasos:
1. Agrega la importación de Google Maps en ios/Runner/AppDelegate.swift:
import GoogleMaps2. En el mismo archivo, añade esta línea:
GMSServices.provideAPIKey("YOUR-API-KEY")3. Finalmente, agrega los permisos de localización en ios/Runner/Info.plist:
<key>NSLocationWhenInUseUsageDescription</key>
<string>La aplicación necesita permiso de ubicación</string>Google Maps ya está listo para funcionar en iOS.
Agregar un mapa en una aplicación Flutter
Aquí tienes un ejemplo de código que muestra un mapa centrado en una ubicación específica:
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// Controlador para interactuar con el mapa
late GoogleMapController mapController;
// Coordenadas del centro del mapa (latitud, longitud)
final LatLng _center = const LatLng(45.521563, -122.677433);
// Función llamada cuando se crea el mapa para inicializar el controlador
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Aplicación de Ejemplo de Mapas'),
backgroundColor: Colors.green[700],
),
body: GoogleMap(
// Callback llamado cuando se crea el mapa
onMapCreated: _onMapCreated,
// Posición inicial de la cámara
initialCameraPosition: CameraPosition(
target: _center, // Centro del mapa
zoom: 11.0, // Nivel de zoom inicial
),
),
),
);
}
}Cómo personalizar el mapa
Ahora que el mapa está integrado, aquí tienes algunas formas de modificarlo.
Cambiar el estilo del mapa
Puedes usar mapType para cambiar la apariencia del mapa:
GoogleMap(
mapType: MapType.satellite, // Normal, Satellite, Terrain, Hybrid
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
)Los diferentes tipos de mapas disponibles en Google Maps Flutter son:
MapType.normal: Mapa predeterminado con carreteras, edificios y puntos de interés.MapType.satellite: Vista satelital sin superposición de carreteras.MapType.terrain: Muestra el relieve del terreno, útil en zonas montañosas.MapType.hybrid: Vista satelital con carreteras y puntos de interés superpuestos.
Agregar marcadores
Puedes agregar marcadores en el mapa para indicar ubicaciones específicas:
Set<Marker> _markers = {};
@override
void initState() {
super.initState();
_markers.add(
Marker(
markerId: MarkerId("id-1"),
position: _center,
infoWindow: InfoWindow(title: "Portland", snippet: "Ciudad en Oregón"),
),
);
}
GoogleMap(
markers: _markers,
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
)Modificar la animación del zoom
La propiedad CameraUpdate permite cambiar dinámicamente la posición y el zoom del mapa.
FloatingActionButton(
onPressed: () {
mapController.animateCamera(
CameraUpdate.zoomIn(),
);
},
child: Icon(Icons.zoom_in),
)Opciones disponibles:
CameraUpdate.zoomIn(): Acercar zoom.CameraUpdate.zoomOut(): Alejar zoom.CameraUpdate.newLatLng(LatLng(latitude, longitude)): Mover la cámara a una nueva ubicación.CameraUpdate.newLatLngZoom(LatLng(latitude, longitude), zoom): Cambiar posición y nivel de zoom.CameraUpdate.newLatLngBounds(LatLngBounds(southwest: LatLng(lat1, lng1), northeast: LatLng(lat2, lng2)), padding): Ajustar la vista para incluir todos los puntos en el área definida.CameraUpdate.scrollBy(x, y): Desplazar el mapa en píxeles.
Activar la ubicación del usuario
Para mostrar la ubicación del usuario, usa myLocationEnabled:
GoogleMap(
myLocationEnabled: true,
myLocationButtonEnabled: true,
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
)Esto requiere permisos adicionales en AndroidManifest.xml y Info.plist.
En Android, agrega estas líneas:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>En iOS, agrega este bloque en Info.plist:
<key>NSLocationWhenInUseUsageDescription</key>
<string>Necesitamos tu ubicación para mostrar tu posición en el mapa.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>Necesitamos tu ubicación para mostrar tu posición en el mapa.</string>
