How to Integrate Google Map in Flutter

In this tutorial, you will learn how to integrate Google Maps in Flutter. To integrate Google Maps in our app, we google_maps_flutter: ^2.0.6. So let’s get started.

Project Setup

Step 1 : Add google_maps_flutter dependency in your project.

dependencies:
  google_maps_flutter: ^2.0.3

Step 2: To use google maps in our app, we need google maps API.

• Get an API key visit https://console.cloud.google.com/.
• In Google Cloud Console, Choose the project that you want to enable Google Maps on.
• Click the navigation menu and then select “Google Maps Platform”.
• Select “APIs” under the Google Maps menu.
• To enable Google Maps for Android, select “Maps SDK for Android” in the “Additional APIs” section, then select “ENABLE”.
• To enable Google Maps for iOS, select “Maps SDK for iOS” in the “Additional APIs” section, then select “ENABLE”.
• Make sure the APIs you enabled are under the “Enabled APIs” section.

Android Configuration

Step 3: Set the minSdkVersion 

To use google maps in android, set the minSdkVersion 16 to 20 in android/app/build.gradle. Code is given below,

android {
    defaultConfig {
        minSdkVersion 20
    }
}

Step 4: Specify your API key in the application manifest.

Go to the android/app/src/main/AndroidManifest.xml file, then specify your API key. Sample Code is given below,

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

iOS Configuration

Step 5: Specify your API key in the application.

Go to the ios/Runner/AppDelegate.m file, specify your API key.

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Or in your swift code, 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 KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Implementation Code

The Simple example code is given below,

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late GoogleMapController mapController;

  final LatLng _center = const LatLng(45.521563, -122.677433);

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

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

Output