How to Integrate Google Maps in Flutter

In this blog, we will learn how to integrate Google Maps into Flutter. Flutter has become one of the most popular frameworks for building cross-platform mobile apps. One of the most common features in modern apps is location-based services — whether it’s showing nearby restaurants, tracking deliveries, or marking custom locations.

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:

dependencies:
google_maps_flutter: ^2.12.3

Then run flutter pub get

Configure for Android and IOS

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

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

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)
  }
}

More about the Google Maps Flutter package.

Display Google Map in Flutter

Now, let’s add a simple Google Map widget inside the stateful widget and display the Google Map in a Flutter app.

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

class GoogleMapScreen extends StatefulWidget {
  @override
  _GoogleMapScreenState createState() => _GoogleMapScreenState();
}

class _GoogleMapScreenState extends State<GoogleMapScreen> {
  GoogleMapController? mapController;

  final LatLng _center = const LatLng(27.7172, 85.3240); // Example: Kathmandu, Nepal

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Google Map in Flutter")),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 14.0,
        ),
      ),
    );
  }
}

Add Markers

To make the map more interactive, you can also add markers on the map:

Set<Marker> _markers = {};

@override
void initState() {
  super.initState();
  _markers.add(
    Marker(
      markerId: MarkerId("1"),
      position: LatLng(27.7172, 85.3240),
      infoWindow: InfoWindow(title: "Kathmandu", snippet: "Capital of Nepal"),
    ),
  );
}

Then pass it inside your GoogleMap widget:

GoogleMap(
  onMapCreated: _onMapCreated,
  initialCameraPosition: CameraPosition(
    target: _center,
    zoom: 14.0,
  ),
  markers: _markers,
)

Advanced Features

Once you’re comfortable with the basics, you can explore more:

• Polylines for routes
• Custom Map Styles
• User Location Tracking
• Clustered Markers for better performance

With these steps, integrating Google Maps into a Flutter app becomes straightforward and effective, empowering mobile apps with rich, interactive map capabilities. After this, you have to get the answer to how to integrate Google Maps into Flutter.

🔥 Pro Tip: Don’t forget to secure your API key by restricting access to it in the Google Cloud Console.