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
Code language: CSS (css)

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"/>
Code language: JavaScript (javascript)

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
Code language: PHP (php)

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, ), ), ), ); } }
Code language: JavaScript (javascript)

Output

How to Integrate Google Map in Flutter