How to Integrate Google Maps in Flutter

Flutter has become a popular framework for developing cross-platform mobile applications, and location-based features are now an essential part of many modern apps. Whether you’re displaying nearby restaurants, tracking deliveries, or marking specific locations on a map, Google Maps provides a powerful and flexible solution for adding these features to your Flutter project.

To achieve this in Flutter, we use the Google Maps Flutter plugin. In this article, I’ll walk you through the entire process of integrating Google Maps in a Flutter app, step by step.

Get a Google Maps API Key

• Go to the Google Cloud Console.
• Create a new project (or select an existing one).
• Navigate to APIs & Services > Library.
• Search for Maps SDK for Android and Maps SDK for iOS, and enable them.
• Go to APIs & Services > Credentials.
• Click Create Credentials > API Key.
• Copy the generated API Key — we’ll need it soon.

Add Dependency In Flutter Project

In your pubspec.yaml, add the official plugin of the latest version:
Then run flutter pub get

dependencies:
google_maps_flutter: ^2.12.3

Configure for Android and IOS

For Android,
Open android/app/src/main/AndroidManifest.xml and add your API key inside the <application> tag:

For iOS, open ios/Runner/AppDelegate.swift .
Import the GoogleMaps and specify your API key in the application delegate ios/Runner/AppDelegate.swift

import UIKit
import Flutter
import GoogleMaps
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR_API_KEY_HERE")
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

For any dart file if you have to give key value then do this instead
pass the key when you run the app:

flutter run --dart-define=MAPS_KEY=AIzaSy...your_key_here

In Android Studio, put --dart-define=MAPS_KEY=... in Run > Edit Configurations > Additional run args. In VS Code, add it to args in launch.json.

Get Shahreen Husne Rabbani’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

If you paste the key into the file, don’t upload that file to GitHub.

The map itself (native files, not Dart)

The map tiles will not appear unless the key is also in the Android and iOS files. The Dart constant does not reach them.

• Android: android/app/src/main/AndroidManifest.xml, in the <meta-data android:name="com.google.android.geo.API_KEY" .../> line.
• iOS: ios/Runner/AppDelegate.swift, in GMSServices.provideAPIKey("...").