Integrating Google Maps and Geolocation in Flutter

Introduction

Integrating maps and location services elevates many mobile applications, from delivery tracking to on-the-go social check-ins. In this tutorial, you’ll learn how to combine Flutter Google Maps with Geolocation to display an interactive map centered on the user’s current position. We’ll use the google_maps_flutter plugin alongside geolocator to fetch location permissions and update the camera in real time.

Setup and Configuration

Before diving into code, configure your Flutter project:

• Add dependencies in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.1
  geolocator

• Android Manifest (android/app/src/main/AndroidManifest.xml):

• Add ACCESS_FINE_LOCATION and ACCESS_COARSE_LOCATION permissions.

• Include your Maps API key inside the tag:

• iOS Info.plist:

• Define NSLocationWhenInUseUsageDescription.

• Add your Google Maps API key in AppDelegate.swift or via GoogleService-Info.plist.

Displaying the Map Widget

With setup complete, instantiate the map. Use a GoogleMap widget with an initial camera position:

import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController? mapController;
  final CameraPosition _initial = CameraPosition(
    target: LatLng(37.7749, -122.4194),
    zoom: 12,
  );

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      initialCameraPosition: _initial,
      onMapCreated: (controller) => mapController = controller,
      myLocationEnabled: false,
      myLocationButtonEnabled: false,
    );
  }
}

This snippet establishes a basic map view centered on San Francisco. Next, we’ll fetch the user’s real location, then animate the camera accordingly.

Retrieving the User’s Location

Using the Geolocator plugin, request permission and obtain current coordinates. Create a helper method:

import 'package:geolocator/geolocator.dart';

Future<Position> getCurrentLocation() async {
  LocationPermission permission = await Geolocator.checkPermission();
  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
  }
  return await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high);
}

Call getCurrentLocation() from initState() or in response to a button tap. Handle exceptions for denied or permanently denied permissions. Always test on a real device or an emulator/simulator with location spoofing.

Centering the Map on the User

With coordinates in hand, animate the GoogleMapController to the new camera target. In your state class:

void _goToUserLocation() async {
  try {
    Position pos = await getCurrentLocation();
    final newCamera = CameraPosition(
      target: LatLng(pos.latitude, pos.longitude),
      zoom: 15,
    );
    mapController?.animateCamera(CameraUpdate.newCameraPosition(newCamera));
    setState(() {
      markers = {
        Marker(
          markerId: MarkerId('user'),
          position: LatLng(pos.latitude, pos.longitude),
          infoWindow: InfoWindow(title: 'You are here'),
        )
      };
    });
  } catch (e) {
    // Handle permission denied or location services off
    print('Error fetching location: $e');
  }
}

Add a floating action button to trigger _goToUserLocation(). This updates both camera and marker to reflect the current user position.

Customizing Map Features

The Flutter Google Maps plugin supports a variety of customizations:

• Marker icons: Use BitmapDescriptor.fromAssetImage to replace the default pin.

• Map types: Set mapType: MapType.hybrid or MapType.satellite.

• Polylines and polygons: Draw routes or cover areas by adding Polyline and Polygon objects to respective sets.

• Gesture controls: Enable or disable zoom, tilt, rotate via zoomGesturesEnabled, tiltGesturesEnabled, etc.

Combine these features to build delivery trackers, ride‐hailing interfaces, or location‐based games.

Best Practices and Performance

• Batch location requests: Avoid high‐frequency updates unless needed for live tracking.

• Permission flows: Provide clear rationale before prompting.

• Map caching: Reduce flicker by supplying minMaxZoomPreference and compassEnabled.

• Memory: Dispose of GoogleMapController in dispose() to free resources.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

You’ve now integrated Google Maps and Geolocation in your Flutter app, dynamically centering the map on the user’s location and displaying a custom marker. Leveraging the google_maps_flutter plugin alongside geolocator unlocks a wide range of location-based experiences—from navigation to real-time tracking. Experiment further with polylines, polygons, and custom map styles to match your app’s design.