Flutter Google Maps Setup

By

The following guide is designed to get you up and running with Google Maps in Flutter for iOS and Android, as well as device GPS tracking.

Also refer to the official Flutter Google Maps Plugin setup docs as needed.

Google Maps for Flutter

Get your Google Maps API Key

First, obtain an API key for Google Maps within the context of a Google Cloud Platform project.

where to get the Google maps API key on the gcp console

iOS Setup

file_type_config ios/Runner/AppDelegate.m
#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

Then define the following key-value pair in the Info.plist

file_type_config ios/Runner/Info.plist
<key>io.flutter.embedded_views_preview</key>
<value>YES</value>

Android Setup

file_type_config android/app/src/main/AndroidManifest.xml
<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR API KEY HERE"/>

Tracking GPS Location Data

Many map-based apps use the device location as part of the user experience. Your app must obtain permission from the user to access location services. There are several Flutter packages available for this task, but the setup below is tested with the location plugin.

iOS

Add the permission request details to the Info.plist

file_type_config ios/Runner/Info.plist
<key>NSLocationWhenInUseUsageDescription</key>
<value>So I can track you while you use the app</value>

<key>NSLocationAlwaysUsageDescription</key>
<value>So I can track you at all times</value>

Android Setup

Note. The permission below will give access to highly accurate GPS data. If you only need accuracy within a city block change the value to ACCESS_COARSE_LOCATION.

file_type_config android/app/src/main/AndroidManifest.xml
<manifest ...
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Q&A Chat