Setting Up Google Maps API Key for a Flutter Project

Overview

Integrating Google Maps into your Flutter app requires obtaining an API key from Google Cloud and configuring it within your project. This guide will walk you through the steps to obtain a Google Maps API key and configure it for both Android and iOS platforms.

Prerequisites

• A Google Cloud account.
• Flutter is installed and set up on your machine.
• Your Flutter project is ready for Google Maps integration.

1. Obtain a Google Maps API Key

1. Go to Google Cloud Console

   • Open Google Cloud Console.

2. Create a New Project

   • Click on the project dropdown at the top of the page and select New Project.
   • Enter a project name and click Create.

3. Enable Google Maps APIs

   • Navigate to APIs & Services -> Library.
   • Search for Google Maps SDK for Android and Google Maps SDK for iOS.
   • Enable both APIs for your project.

4. Create API Credentials

   • Go to APIs & Services -> Credentials.
   • Click on Create Credentials and select API Key.
   • Copy the API key that appears. You will need it for configuration.

5. Restrict Your API Key (Recommended)

   • Click on the Edit icon next to your API key.
   • Under Key restrictions, select HTTP referrers for web applications or IP addresses for server applications.
   • Under API restrictions, select Restrict key and choose the APIs you enabled.
   • Save the changes.

2. Configure Google Maps API Key for Android

1. Open Android Project

   • Open your Flutter project in Android Studio and navigate to android directory.

2. Add the API Key to AndroidManifest.xml

   • Open android/app/src/main/AndroidManifest.xml.

   • Add the following meta-data tag within the application tag:

     <application>
     <!-- Other configurations -->
     <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="YOUR_API_KEY_HERE"/>
     </application>

   • Replace YOUR_API_KEY_HERE with your actual Google Maps API key.

3. Update build.gradle

   • Open android/app/build.gradle.
   • Ensure that the following dependencies are included:

     dependencies {
     implementation 'com.google.android.gms:play-services-maps:18.0.0'
     }

3. Configure Google Maps API Key for iOS

1. Open iOS Project

   • Navigate to the ios directory of your Flutter project and open Runner.xcworkspace in Xcode.

2. Add the API Key to AppDelegate.swift

   • Open ios/Runner/AppDelegate.swift.
   • Import GoogleMaps at the top:

     import GoogleMaps

   • Initialize the API key in the application(_:didFinishLaunchingWithOptions:) method:

     GMSServices.provideAPIKey("YOUR_API_KEY_HERE")

   • Replace YOUR_API_KEY_HERE with your actual Google Maps API key.

3. Update Podfile

   • Open ios/Podfile.

   • Ensure that you have the following line in your Podfile:

     pod 'GoogleMaps'

   • Run pod install in the ios directory to install the Google Maps SDK for iOS:

     cd ios
     pod install

4. Verify Google Maps Integration

1. Add Google Maps Widget

   • In your Flutter project, add a Google Maps widget to one of your screens to verify integration:

     import 'package:google_maps_flutter/google_maps_flutter.dart';
     
     class MyMapScreen extends StatefulWidget {
     @override
     _MyMapScreenState createState() => _MyMapScreenState();
     }
     
     class _MyMapScreenState extends State<MyMapScreen> {
     @override
     Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Google Maps'),
        ),
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 10,
          ),
        ),
      );
     }
     }

2. Run the App

   • Run your app on an emulator or physical device to check if the Google Maps widget displays correctly.

Summary

You have successfully obtained and configured a Google Maps API key for your Flutter project on both Android and iOS platforms. By following these steps, you have integrated Google Maps into your application, allowing you to utilize map features and services.

For more detailed information and advanced configurations, refer to the official Google Maps documentation and the Flutter Google Maps plugin.