How to Use google_maps_flutter in Flutter: Simple Guide

To use google_maps_flutter, add it to your pubspec.yaml, import it, and use the GoogleMap widget in your Flutter app. Configure the map with initial camera position and markers to display locations.

Syntax

The main widget is GoogleMap. You must provide an initialCameraPosition to set the starting map view. You can add markers to show points on the map. Use onMapCreated callback to get the map controller for further control.

dart

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  ),
  markers: Set<Marker>.of(markers),
  onMapCreated: (GoogleMapController controller) {
    _controller = controller;
  },
)

Output

A Google map widget centered at the given coordinates with markers if provided.

Example

This example shows a simple Flutter app with a Google Map centered on a location and a marker. It demonstrates adding the plugin, setting permissions, and displaying the map.

dart

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  late GoogleMapController _controller;

  final LatLng _center = const LatLng(37.42796133580664, -122.085749655962);

  final Set<Marker> _markers = {
    Marker(
      markerId: MarkerId('center'),
      position: LatLng(37.42796133580664, -122.085749655962),
      infoWindow: InfoWindow(title: 'Center Location'),
    ),
  };

  void _onMapCreated(GoogleMapController controller) {
    _controller = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Google Maps Flutter Example')),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 14.0,
        ),
        markers: _markers,
      ),
    );
  }
}

Output

A Flutter app showing a Google Map centered on coordinates (37.42796133580664, -122.085749655962) with a marker labeled 'Center Location'.

Common Pitfalls

• Not adding the google_maps_flutter dependency in pubspec.yaml.
• Forgetting to add API keys in AndroidManifest.xml and Info.plist for Android and iOS respectively.
• Not requesting location permissions if you want to show user location.
• Using Set<Marker> incorrectly or not updating markers in setState.
• Not initializing the map controller before using it.

dart

/* Wrong: Missing API key setup and markers not updated */
GoogleMap(
  initialCameraPosition: CameraPosition(target: LatLng(0, 0), zoom: 10),
  markers: {}, // empty markers set
)

/* Right: Add API keys in platform files and update markers in setState */

Quick Reference

Here are key points to remember when using google_maps_flutter:

• Add google_maps_flutter in pubspec.yaml.
• Get API keys from Google Cloud Console and add to Android and iOS config files.
• Use GoogleMap widget with initialCameraPosition.
• Manage markers with a Set<Marker>.
• Use onMapCreated to get controller for map actions.

Key Takeaways

Add google_maps_flutter to pubspec.yaml and import it in your Dart code.

Provide initialCameraPosition and markers to the GoogleMap widget to display the map and points.

Add your Google Maps API keys in AndroidManifest.xml and Info.plist for Android and iOS.

Use onMapCreated callback to get the map controller for further map manipulation.

Always update markers inside setState to refresh the map UI.