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

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

    Courses


    Recent posts