📍 How to Integrate Google Maps in a Flutter App and Show Current Location

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

If you're building a Flutter app and want to show Google Maps with the user's current location, you're in the right place.
 In this blog…

If you're building a Flutter app and want to show Google Maps with the user's current location, you're in the right place.
In this blog, we'll integrate Google Maps in Flutter and display the real-time current location step by step.

This guide is beginner-friendly and commonly used in apps like delivery, ride booking, tracking, and navigation apps.

🚀 What We Will Build

• Show Google Map inside a Flutter app
• Ask for location permission
• Fetch user's current GPS location
• Display a marker on the current location
• Move the camera to the user's position

🛠 Prerequisites

Before starting, make sure:

• Flutter SDK is installed
• Android Studio / Xcode is set up
• You have a Google account

1️⃣ Create Google Maps API Key

Step 1: Open Google Cloud Console

👉 https://console.cloud.google.com/

1. Create a new project
2. Enable APIs:

• Maps SDK for Android
• Maps SDK for iOS

3. Go to Credentials → Create API Key

4. Copy the API key (important!)

⚠️ Note: Enable billing in Google Cloud, otherwise maps may not load.

2️⃣ Add Required Dependencies

Open pubspec.yaml and add:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.5.0
  geolocator: ^10.1.0

Run:

flutter pub get

3️⃣ Android Configuration

🔹 Add API Key

Open:

android/app/src/main/AndroidManifest.xml

Inside <application> tag:

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

🔹 Add Location Permissions

Add outside <application>:

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

🔹 Update min SDK Version

In:

android/app/build.gradle
minSdkVersion 21

4️⃣ iOS Configuration

🔹 Add API Key

Open:

ios/Runner/AppDelegate.swift

Add:

import GoogleMaps
GMSServices.provideAPIKey("YOUR_GOOGLE_MAPS_API_KEY")

🔹 Location Permission

Open:

ios/Runner/Info.plist

Add:

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs location access to show your current position on map</string>

5️⃣ Flutter Code — Google Map with Current Location

Below is a complete working Flutter example 👇

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:geolocator/geolocator.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MapScreen(),
    );
  }
}
class MapScreen extends StatefulWidget {
  const MapScreen({super.key});
  @override
  State<MapScreen> createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
  final Completer<GoogleMapController> _controller = Completer();
  LatLng _currentPosition = const LatLng(28.6139, 77.2090); // Default location
  bool _loading = true;
  @override
  void initState() {
    super.initState();
    _getCurrentLocation();
  }
  Future<void> _getCurrentLocation() async {
    LocationPermission permission;
    permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
    }
    Position position = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high,
    );
    setState(() {
      _currentPosition = LatLng(position.latitude, position.longitude);
      _loading = false;
    });
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(
      CameraUpdate.newLatLngZoom(_currentPosition, 15),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Google Maps in Flutter")),
      body: _loading
          ? const Center(child: CircularProgressIndicator())
          : GoogleMap(
              myLocationEnabled: true,
              initialCameraPosition: CameraPosition(
                target: _currentPosition,
                zoom: 14,
              ),
              onMapCreated: (controller) {
                _controller.complete(controller);
              },
              markers: {
                Marker(
                  markerId: const MarkerId("currentLocation"),
                  position: _currentPosition,
                  infoWindow: const InfoWindow(
                    title: "You are here",
                  ),
                ),
              },
            ),
    );
  }
}

6️⃣ How This Works (Simple Explanation)

• Geolocator → gets GPS location
• GoogleMap → displays the map
• Marker → shows current position
• CameraUpdate → moves map camera to the user

7️⃣ Common Issues & Fixes

❌ Map not loading

✔ API key incorrect
✔ Billing not enabled

❌ Location permission denied

✔ Enable GPS
✔ Allow permission manually

❌ App crashes on Android

✔ minSdkVersion must be 21

8️⃣ Use Cases

This setup is commonly used in:

• Food delivery apps
• Ride-sharing apps
• Tracking apps
• Navigation apps
• Attendance & field work apps

🎯 Conclusion

Integrating Google Maps in Flutter is easy once the setup is correct.
With just a few steps, you can show real-time user location and build powerful location-based features.

If you're a Flutter developer, this is a must-have skill 💙