¿Cómo integrar Google Maps en aplicaciones Flutter?

Todos hemos visto que Google Maps es utilizado por muchas aplicaciones como Ola, Uber, Swiggy y otras. Debemos configurar un proyecto API con Google Maps Platform para poder integrar Google Maps en nuestra aplicación Flutter. En este artículo, veremos ¿Cómo integrar Google Maps en aplicaciones Flutter?

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para configurar Flutter Development en Android Studio, consulte Configuración de Android Studio para Flutter Development , y luego cree un nuevo proyecto en Android Studio, consulte  Creación de una aplicación simple en Flutter .

Paso 2: Generar clave API para usar Google Maps

Consulte el siguiente artículo sobre cómo generar una clave API para usar Google Maps . Después de desarrollar esa clave, tenemos que usarla dentro de nuestro proyecto para integrar Google Maps. 

Ahora, sigue los Pasos para Implementar Google Maps en la Aplicación Flutter

Paso 3: Agregar dependencia al archivo pubspec.yaml

dependencies:
    flutter: 
    google_maps_flutter: ^2.1.8

Ahora haga clic en pub.get para configurar.

Paso 4: Actualice el archivo build.gradle .

Navegue al archivo android>app>build.gradle y actualice el código en la línea de abajo. 

Cambiar la versión del SDK de compilación

android {
    compileSdkVersion 31

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

Cambiar la versión mínima del SDK

defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
    applicationId "com.example.google_maps"
    minSdkVersion 20
    targetSdkVersion 30
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

Paso 5: agregue la clave API al archivo de manifiesto de Android

Navegue hasta Android > aplicación > src > principal > archivo AndrodManifest.xml y agregue el siguiente código en la etiqueta del manifiesto. Asegúrese de agregar su clave API de Google Maps en el valor. 

<meta-data android:name="com.google.android.geo.API_KEY"
        android:value="Enter your API key here"/>

Paso 6: Trabajar con el archivo main.dart. 

Navegue hasta el archivo lib > main.dart y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // in the below line, we are specifying title of our app. 
      title: 'GFG',
      // in the below line, we are hiding our debug banner. 
      debugShowCheckedModeBanner: false,
      // in the below line, we are specifying theme. 
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // First Screen of our App
      home: const HomePage(),
    );
  }
}

Paso 7: Creación de un nuevo archivo Dart para la página de inicio. 

Navegue a lib> Haga clic con el botón derecho en él> Nuevo> Archivo Dart y asígnele el nombre HomePage.dart . Después de crear ese archivo, agregue el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
  
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
      
  // in the below line, we are initializing our controller for google maps. 
  Completer<GoogleMapController> _controller = Completer();
  
  // in the below line, we are specifying our camera position
  static final CameraPosition _kGoogle = const CameraPosition(
      target: LatLng(37.42796133580664, -122.885749655962),
    zoom: 14.4746,
  );
    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // in the below line, we are specifying our app bar.
      appBar: AppBar(
        // setting background color for app bar 
        backgroundColor: Color(0xFF0F9D58),
        // setting title for app bar. 
        title: Text("Google Maps"),
      ),
      body: Container(
        // in the below line, creating google maps. 
        child: GoogleMap(
          // in the below line, setting camera position 
            initialCameraPosition: _kGoogle,
          // in the below line, specifying map type. 
          mapType: MapType.normal,
          // in the below line, setting user location enabled.
          myLocationEnabled: true,
          // in the below line, setting compass enabled. 
          compassEnabled: true,
          // in the below line, specifying controller on map complete. 
          onMapCreated: (GoogleMapController controller){
              _controller.complete(controller);
          },
        ),
      )
    );
  }
}

Salida :