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 SetupStep 1 : Add google_maps_flutter dependency in your project.Step 2: To use google maps in our app, we need google maps API. Android ConfigurationStep 3: Set the minSdkVersion Step 4: Specify your API key in the application manifest.iOS ConfigurationStep 5: Specify your API key in the application.Implementation CodeOutput
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
