Introduction

Integrating google maps into a Flutter app enhances user experience by visualizing data on an interactive map and leveraging location services for real-time positioning. In this intermediate tutorial, you’ll learn how to combine the google_maps_flutter plugin with Geolocator to display a map, request location permissions, and center the map on the user’s current position. We assume you have a basic Flutter setup and familiarity with asynchronous code.

Setting Up Dependencies and API Key

Begin by adding two packages to your pubspec.yaml:

• google_maps_flutter: the official Maps SDK for Flutter

• geolocator: simplifies access to device GPS and permissions

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.2.0
  geolocator

Next, obtain an Android and iOS API key from Google Cloud Console:

• Enable “Maps SDK for Android” and “Maps SDK for iOS.”

• Restrict the key by package name and SHA-1 (Android) and bundle ID (iOS).

Add your key to AndroidManifest.xml under :

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_ANDROID_API_KEY"/>

And in iOS’s Info.plist:

<key>io.flutter.embedded_views_preview</key><true/>
<key>GMSApiKey</key><string>YOUR_IOS_API_KEY</string>

Displaying the Google Map

Create a stateful widget to host GoogleMap. Define an initial camera position and a map controller.

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

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  GoogleMapController? _controller;
  static const _initialPosition = CameraPosition(
    target: LatLng(37.7749, -122.4194), // San Francisco
    zoom: 12,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: _initialPosition,
        onMapCreated: (controller) => _controller = controller,
        myLocationEnabled: false,
        myLocationButtonEnabled: false,
      ),
    );
  }
}

This code displays a bare map using the Maps SDK and lets you later animate the camera to the user’s location.

Requesting Location Permissions

Before accessing GPS, request runtime permission via Geolocator. Handle denied or restricted states gracefully.

import 'package:geolocator/geolocator.dart';

Future<Position> _determinePosition() async {
  LocationPermission permission = await Geolocator.checkPermission();
  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
    if (permission == LocationPermission.denied) {
      throw Exception('Location permission denied');
    }
  }
  if (permission == LocationPermission.deniedForever) {
    throw Exception('Location permission permanently denied');
  }
  return await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high);
}

Call _determinePosition() when the widget initializes or when the user taps a “go to my location” button.

Centering Map on User Location

Once you have a Position object, animate the camera to the user’s coordinates.

void _goToUserLocation() async {
  try {
    final pos = await _determinePosition();
    _controller?.animateCamera(
      CameraUpdate.newCameraPosition(
        CameraPosition(
          target: LatLng(pos.latitude, pos.longitude),
          zoom: 15,
        ),
      ),
    );
  } catch (e) {
    ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text(e.toString())));
  }
}

Add a FloatingActionButton to invoke this method:

floatingActionButton: FloatingActionButton(
  child: Icon(Icons.my_location),
  onPressed: _goToUserLocation,
),

This gives users quick access to their current spot on the map.

Adding Markers and Interactivity

Markers help pinpoint points of interest. Maintain a Set in state:

Set<Marker> _markers = {};

void _addMarker(LatLng pos) {
  final marker = Marker(
    markerId: MarkerId(pos.toString()),
    position: pos,
    infoWindow: InfoWindow(title: 'Pinned Location'),
  );
  setState(() => _markers.add(marker));
}

Enable onTap on the map widget:

GoogleMap(
  initialCameraPosition: _initialPosition,
  markers: _markers,
  onMapCreated: (c) => _controller = c,
  onTap: _addMarker,
),

Each tap adds a new marker, demonstrating basic map interactivity.

Handling Platform Differences

iOS requires an additional key in Info.plist for location usage:

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app requires access to your location.</string>

Android 12+ mandates AndroidManifest.xml permissions:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

Test both platforms to ensure consistent behavior in permission dialogs and Maps SDK rendering.

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

By following these steps, you’ve integrated google maps_flutter and geolocator into a Flutter project, displayed a map, handled permissions, fetched the user’s location, animated the camera, and added interactive markers. This foundation lets you build advanced features such as route drawing, clustering, or geofencing.