Google Maps integration in the Flutter App

Hello everyone!

I start a Google Maps series and in this first article at the series, I will talk about how we can integrate Google Maps to our Flutter projects and use it.

Let’s start it with login the Google Cloud Console account. Firstly, we need to a Google Cloud account in the Google Cloud Console. After creating an account, we see many APIs and SDKs about different features.

Select the Maps in the Category and create the Google Maps Platform account for enabling maps. The we should add a payment system. We have trial account to until activate the project, so it will be free.

We can enable maps with 2 ways: individual enable to platforms after the existing project, or when created a new project.

In the existing project can enable like as below with the Enable button.

In the new project, set the project name and select the location while creating a project in the console. Then it creates easy and quickly.

The window opens in the both of about the API Key:

So we have Google Maps API Key now for using it in the Flutter application. It can ask how we can API restriction for the protect the API Key. These options depending prefer but mostly API restriction is popular. We can select it later so skip these window.

We use the package as below for adding the maps.

google_maps_flutter | Flutter Package

Let’s continue with Android and set the Android minSdkVersion min 20 in the android/app/build.gradle

android {
    defaultConfig {
        minSdkVersion 20
    }
}

Add the API Key in the android/app/src/main/AndroidManifest.xml

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

Android settings done. For iOS we only add the below codes in the ios/Runner/AppDelegate.swift . iOS settings also done now.

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)
  }
}

We can open Google Maps in the Flutter application with the GoogleMap widget with needed coordinates. In this article, we talked about what we need to do to use Google Maps in the Flutter application. In the next articles, we will look at the customizations for maps and their details.

Thanks for reading!
Any comments or suggestions are welcome!

Check out my YouTube channel here and Twitter here.