Agrega un mapa con un marcador

Introducción

En este instructivo, se muestra cómo agregar un mapa de Google Maps a tu app creada con Flutter. El mapa incluye un marcador, también denominado pin, el cual indica una ubicación específica.

Obtén el código

Clona o descarga el repositorio de muestras de Flutter. El código de muestra se encuentra en el directorio google_maps.

Configura tu proyecto de desarrollo

Antes de continuar con este tema, asegúrate de haber completado los pasos descritos en la guía Configura un proyecto de Flutter.

1. Importa el paquete de Google Maps para Flutter

1. Abre tu archivo main.dart en tu IDE preferido.
2. Verifica que se haya agregado la siguiente sentencia de importación al archivo:

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Agrega Google Maps a tu app creada con Flutter

En el widget Scaffold, agrega un widget GoogleMap como cuerpo.

GoogleMap(
   initialCameraPosition: CameraPosition(
      target: _center,
      zoom: 11.0,
   ),
   markers: {
      const Marker(
         markerId: MarkerId('Sydney'),
         position: LatLng(-33.86, 151.20),
      )
   },
)

• La opción markerId etiqueta tu marcador.
• La opción position establece en qué parte de tu mapa aparece el marcador.

3. Compila y ejecuta tu app

Inicia la app creada con Flutter utilizando una de las siguientes opciones:

1. Desde tu IDE, haz clic en el botón Run.
2. Desde la línea de comandos, ejecuta flutter run.

Deberías ver un mapa con un marcador centrado en Sídney, en la costa este de Australia, similar a la imagen que se muestra en esta página.

Solución de problemas

• Si no ves un mapa, verifica si obtuviste una clave de API y la agregaste a la app.
• Si utilizaste el identificador de paquete de iOS para restringir la clave de API, edita la clave para agregar el identificador de paquete de la app: com.google.examples.map-with-marker.
• Asegúrate de tener una buena conexión de Wi-Fi o GPS.
• Utiliza las herramientas para desarrolladores de Flutter para ver los registros y depurar la app.
• Obtén más información sobre cómo ejecutar una app creada con Flutter.

4. Comprende el código

Puedes encontrar este código en GitHub.

1. Importa los paquetes necesarios y, luego, inicializa la app.

      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({super.key});
   
      @override
         State<MyApp> createState() => _MyAppState();
      }

2. Crea un mapa centrado en Sídney, Australia.

   class _MyAppState extends State<MyApp> {
      
      late GoogleMapController mapController;
      
      final LatLng _center = const LatLng(-33.86, 151.20);
      
      void _onMapCreated(GoogleMapController controller) {
         mapController = controller;
      }

3. Agrega los widgets necesarios para mostrar un mapa en una app.

   @override
   Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: const Text('Maps Sample App'),
             backgroundColor: Colors.green[700],
           ),
           body: GoogleMap(
               onMapCreated: _onMapCreated,
               initialCameraPosition: CameraPosition(
                 target: _center,
                 zoom: 11.0,
               ), // CameraPosition
           ), // GoogleMap
         ), // Scaffold
       ); // MaterialApp
     }
   }

4. Agrega los widgets de marcadores para poder incluir el widget en tu app.

      body: GoogleMap(
         onMapCreated: _onMapCreated,
         initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
         ),
         markers: {
            const Marker(
                  markerId: const MarkerId("Sydney"),
                  position: LatLng(-33.86, 151.20),
               ), // Marker
         }, // markers
      ), // GoogleMap
      ...

5. Agrega una ventana de información al marcador.

         const Marker(
               markerId: const MarkerId("Sydney"),
               position: LatLng(-33.86, 151.20),
               infoWindow: InfoWindow(
                  title: "Sydney",
                  snippet: "Capital of New South Wales",
               ), // InfoWindow
         ), //Marker
         ...

   De forma predeterminada, el paquete de Google Maps para Flutter muestra el contenido de la ventana de información cuando el usuario presiona un marcador. Si deseas utilizar el comportamiento predeterminado, no es necesario agregar un objeto de escucha de clics para el marcador.

¡Felicitaciones! Creaste una app con Flutter que muestra un mapa de Google Maps con un marcador que indica una ubicación determinada y proporciona datos adicionales en una ventana de información. También aprendiste a usar el paquete de Google Maps para Flutter.