API Key not found when adding Google Maps to Flutter

Question

When trying to add google maps api to Flutter I get the following error in the logs:

/MethodChannel#flutter/platform_views(11205): java.lang.RuntimeException: API key not found.  Check that <meta-data android:name="com.google.android.geo.API_KEY" android:value="your API key"/> is in the <application> element of AndroidManifest.xml

My AndroidManifest.xml file looks like this:

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


<!-- The INTERNET permission is required for development. Specifically,
     flutter needs it to communicate with the running application
     to allow setting breakpoints, to provide hot reload, etc.
-->
<uses-permission android:name="android.permission.INTERNET"/>

<!-- io.flutter.app.FlutterApplication is an android.app.Application that
     calls FlutterMain.startInitialization(this); in its onCreate method.
     In most cases you can leave this as-is, but you if you want to provide
     additional functionality it is fine to subclass or reimplement
     FlutterApplication and put your custom class here. -->
<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="foody"
    android:icon="@mipmap/ic_launcher">
    <activity
        android:name=".MainActivity"
        android:launchMode="singleTop"
        android:theme="@style/LaunchTheme"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
        android:hardwareAccelerated="true"
        android:windowSoftInputMode="adjustResize">
        <!-- This keeps the window background of the activity showing
             until Flutter renders its first frame. It can be removed if
             there is no splash screen (such as the default splash screen
             defined in @style/LaunchTheme). -->
        <meta-data
            android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
            android:value="true" />

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

        <intent-filter>
            <action android:name="android.intent.action.MAIN"/>
            <category android:name="android.intent.category.LAUNCHER"/>
        </intent-filter>
    </activity>
</application>

and the file i am trying to display the map in looks like this:

import 'package:flutter/material.dart';
import 'reservation.dart';
import 'dart:async';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter/services.dart';
import 'feed.dart';

class info extends StatelessWidget {
  info([this.id]);

  int id;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => Reservation(id)),
          );
        },
        icon: Icon(Icons.calendar_today),
        label: Text('Book a Table'),
        backgroundColor: Colors.blueGrey,
      ),
      body: _buildBody(context),
    );
  }

  Widget _buildBody(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance
          .collection('restaurants')
          .where('id', isEqualTo: id)
          .snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) return LinearProgressIndicator();

        return _buildList(context, snapshot.data.documents);
      },
    );
  }

  Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
    return ListView(
      physics: BouncingScrollPhysics(),
      shrinkWrap: true,
      children: <Widget>[
        new Container(
          decoration: new BoxDecoration(boxShadow: [
            new BoxShadow(
              color: Colors.blueGrey,
              blurRadius: 20.0,
            )
          ]),
          child: new Image.network(snapshot[0].data['picURL']),
        ),
        Padding(
          padding: const EdgeInsets.all(7.0),
          child: Text(snapshot[0].data['name'],
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 36)),
        ),
        Padding(
          padding: const EdgeInsets.all(7.0),
          child: Text(snapshot[0].data['desc'],
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 36)),
        ),
        Container(
          height: MediaQuery
              .of(context)
              .size
              .height,
          width: MediaQuery
              .of(context)
              .size
              .width,
          child: GoogleMap(
            initialCameraPosition: CameraPosition(target: LatLng(37.4219999, -122.0862462)),
            onMapCreated: (GoogleMapController controller) {},
          ),
        ),
      ],
    );
  }
}

I tried regenerating the key and restarting my app and android studio multiple times however to no avail.

Thanks

Answer 1

You've currently got the meta-data element as part of the activity. The documentation says to make it a child of the application:

In AndroidManifest.xml, add the following element as a child of the <application> element, by inserting it just before the closing </application> tag

So I suggest you try moving it to just after </activity>.

Answer 2

If you place the <meta-data> tag in the wrong location at first, lets say in the <activity> tag.

1. You need to run "flutter clean" which cleans up the android and ios build directories.

2. Then ensure you create the <meta-data> tag right above the </application> tag.

You should be good to go. I ran into this issue and it worked for me. Found the answer on github issues.