Adicionar um mapa com marcador

Introdução

Neste tutorial, mostramos como adicionar um mapa do Google ao seu app Flutter, incluindo um marcador (também chamado de alfinete), para indicar um local específico.

Como conseguir o código

Clone ou faça o download do repositório de exemplos do Flutter. O exemplo de código pode ser encontrado no diretório google_maps.

Configurar seu projeto de desenvolvimento

Conclua as etapas destacadas no guia Configurar um projeto do Flutter antes de continuar com este assunto.

1. Importar o pacote do Google Maps para Flutter

1. Abra o arquivo main.dart no seu ambiente de desenvolvimento integrado preferido.
2. Verifique se a seguinte instrução de importação foi adicionada ao arquivo:

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Adicionar o Google Maps ao seu app Flutter

No widget Scaffold, adicione um widget GoogleMap como o corpo.

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

• A opção markerId rotula seu marcador.
• A opção position define onde o marcador será exibido no mapa.

3. Compilar e executar seu app

Inicie o app Flutter usando uma das seguintes opções:

1. Pelo IDE, clique no botão Run
2. Na linha de comando, execute flutter run.

Será mostrado um mapa com um marcador centralizado em Sydney, na costa leste da Austrália, semelhante à imagem desta página.

Solução de problemas

• Se o mapa não aparecer, confirme se você recebeu uma chave de API e a incluiu no app.
• Se você usou o identificador do pacote iOS para restringir a chave de API, edite a chave para adicionar o identificador do pacote no app: com.google.examples.map-with-marker.
• Verifique se você tem uma boa conexão Wi-Fi ou GPS.
• Use o Flutter DevTools para conferir os registros e depurar o app.
• Você pode saber mais sobre Como executar um app Flutter.

4. Sobre o código

Este código pode ser encontrado no GitHub.

1. Importe os pacotes necessários e inicialize o 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. Crie um mapa centralizado em Sydney, Austrália.

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

3. Adicione os widgets necessários para exibir um mapa em um 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. Adicione os widgets de marcadores para incluir o widget no seu 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. Adicione uma janela de informações ao 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
         ...

   Por padrão, o pacote do Google Maps para Flutter mostra o conteúdo da janela de informações quando o usuário toca em um marcador. Não é preciso adicionar um listener de clique para o marcador se o comportamento padrão atende às suas expectativas.

Parabéns! Você criou um app do Flutter que mostra um mapa do Google com um marcador indicando um local específico e fornecendo dados adicionais em uma janela de informações. Você também aprendeu como usar o pacote do Google Maps para o Flutter.