Generate Google Map Api Key | Android | iOS | Integrate in Flutter & React Native

You will learn how to generate API keys for google map in flutter. You will how to create a new project in https://console.cloud.google.com/ and generate keys for iOS and android Apps. Then you will learn how to use the API Keys for the app and show the map in flutter app.

Before we go ahead we need to go there and register our app

https://console.cloud.google.com/

Adding Google Maps to Flutter app (Android)

First, open your Flutter project and navigate to the file at this location: android/app/src/main/AndroidManifest.xml. We need to add the API key here. what we got from google cloud service.

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

After adding this now manifest file looks like this

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.pinkesh.google_maps_flutter">

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <application
        android:label="google_maps_flutter"
        android:icon="@mipmap/ic_launcher">

       <!-- TODO: Add your API key here -->
       <meta-data android:name="com.google.android.geo.API_KEY"
           android:value="YOUR KEY HERE"/>

        <activity>...</activity>
    </application>
</manifest>

Remember though, that package name is quite important. otherwise you will not see any maps. You will see blank screen.

Android user should make sure that, in your android/app/build.gradle file minSdkVersion is 20

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.bslmeiyu.new_test"
        minSdkVersion 20
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

Adding Google Maps to Flutter (iOS)

You can open your flutter project either in androd studio or vs code. After that you need to go to ios/Runner folder. and then find AppDelegate.swift file and add the below code there.

import UIKit
import Flutter
import GoogleMaps
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GeneratedPluginRegistrant.register(with: self)
GMSServices.provideAPIKey("YOUR-KEY")
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}

Here you need to change the key. Put your API key for ios here. You got that code from the google cloud service console.

And then open info.plist file and add the key and string below

    <key>NSLocationWhenInUseUsageDescription</key>
    <string>The app needs location permission</string>
    <key>io.flutter.embedded_views_preview</key>
    <true/>

And then put the code in your main.dart file

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @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: const Text('Maps Sample App'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
          ),
        ),
      ),
    );
  }
}