How to integrate google map in flutter application step by step guide

Integrating Google Maps into a Flutter application involves several steps. Below is a step-by-step guide to help you set up and use Google Maps in your Flutter app for both Android and iOS.

Prerequisites

• Flutter SDK installed
• An existing Flutter project or create a new one
• Android Studio / Xcode installed
• A Google Cloud Platform account (to get an API key)

Step-by-Step Guide

Step 1: Create a Flutter Project

If you haven’t already:

flutter create google_maps_demo
cd google_maps_demo

---

Step 2: Add Dependencies

Open your pubspec.yaml file and add:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.5.0 # (check for latest version)

Then run:

flutter pub get

Step 3: Get a Google Maps API Key

1. Go to Google Cloud Console
2. Create a new project (or use an existing one)
3. Enable Maps SDK for Android and/or Maps SDK for iOS
4. Go to APIs & Services > Credentials
5. Create an API key
6. Restrict the key to only Maps SDKs if needed (recommended)

---

Step 4: Configure Android

Open android/app/src/main/AndroidManifest.xml and add:

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

Also, ensure minSdkVersion is at least 20 in android/app/build.gradle:

defaultConfig {
    minSdkVersion 20
}

---

Step 5: Configure iOS

Open ios/Runner/AppDelegate.swift and ensure it uses Google Maps:

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")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Also, update ios/Podfile:

platform :ios, '12.0'

Then run:

cd ios
pod install
cd ..

---

Step 6: Use Google Map in Flutter Widget

Now edit your lib/main.dart:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Maps Demo',
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  late GoogleMapController mapController;

  final LatLng _center = const LatLng(37.7749, -122.4194); // San Francisco

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Demo'),
        backgroundColor: Colors.green[700],
      ),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    );
  }
}

---

Step 7: Run the App

Make sure you’re using a real device or emulator with Google Play Services.

flutter run

---

Optional Features You Can Add Later

• Markers
• Map types (satellite, terrain, etc.)
• User location
• Custom styling
• Directions API integration