Flutter Google Maps won't Load

Question

I have been trying to get Flutter Google maps to load for a couple of weeks. google_maps_flutter.dart. I've tried just about everything I can think of. I am new to Flutter so I'm sure it's some rookie mistake but I can't figure it out. I have the package loaded and the dependency set in the yaml file. I have updated the API's, actually twice to make sure they are correct. Both the Android and iOS SDK are Enabled on the Google Cloud. I put in some 'print tests' and they go up to and beyond the GoogleMaps call but nothing happens. Not so much as a blip in the screen other than when I click the Route button. I'm including the code below hoping someone can correct it for me, please. It prints all three test prints but nothing happens with the Google Maps at all.

import 'dart:async';

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

const _url = 'https://store-x36sk.mybigcommerce.com/ice-cream-flavors/';
const _menuurl = 'https://store-x36sk.mybigcommerce.com/menu/';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Completer<GoogleMapController> _controller = Completer();

  static const LatLng _center =
      const LatLng(37.42796133580664, -122.085749655962);

  _launchURL() async {
    return await canLaunch(_url)
        ? await launch(_url)
        : throw 'Could not launch $_url';
  }

  _menulaunchURL() async {
    return await canLaunch(_menuurl)
        ? await launch(_menuurl)
        : throw 'Could not launch $_menuurl';
  }

  void _onMapCreated(GoogleMapController controller) {
    _controller.complete(controller);
  }

  _maplaunch() async {
    print('1st test');
    // return
    print('2nd test');
    // MaterialApp(
    // home: Scaffold(
    //   appBar: AppBar(
    //     title: Text('On Your Way to Lake City'),
    //     backgroundColor: Colors.purple.shade100,
    //   ),
    //   body:
    await GoogleMap(
      onMapCreated: _onMapCreated,
      // mapType: MapType.hybrid,
      initialCameraPosition: CameraPosition(
        target: _center,
        zoom: 11.0,
      ),

      // ),
      // ),
    );
    print('3rd test');
  }

  @override
  Widget build(BuildContext context) {
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  padding: const EdgeInsets.only(bottom: 2),
                  child: Text(
                    'Lake City Creamery & Coffee',
                    style: TextStyle(
                      color: Colors.purple,
                      fontWeight: FontWeight.bold,
                      fontSize: 20.0,
                    ),
                  ),
                ),
                Text(
                  '5465 St Rt 29, Celina, OH',
                  style: TextStyle(
                    color: Colors.purple,
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0,
                  ),
                ),
                //   FavoriteWidget(),
              ],
            ),
          ),
        ],
      ),
    );

    Color color = Theme.of(context).primaryColor;

    Widget buttonSection = Container(
      padding: const EdgeInsets.only(left: 5, top: 5, right: 5),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          MaterialButton(
            onPressed: _launchURL,
            child: _buildButtonColumn(Colors.purple, Icons.icecream, 'Flavors'),
            padding: EdgeInsets.all(16),
            shape: CircleBorder(),
            color: Colors.pink.shade50,
          ),
          MaterialButton(
            onPressed: _menulaunchURL,
            child: _buildButtonColumn(Colors.purple, Icons.restaurant, 'Menu'),
            padding: EdgeInsets.all(16),
            shape: CircleBorder(),
            color: Colors.pink.shade50,
          ),
          MaterialButton(
            onPressed: () {},
            // TO DO onPressed
            child: _buildButtonColumn(Colors.purple, Icons.share, 'Share'),
            padding: EdgeInsets.all(16),
            shape: CircleBorder(),
            color: Colors.pink.shade50,
          ),
          MaterialButton(
            onPressed: _maplaunch,
            child: _buildButtonColumn(Colors.purple, Icons.directions, 'Route'),
            padding: EdgeInsets.all(16),
            shape: CircleBorder(),
            color: Colors.pink.shade50,
          ),
        ],
      ),
    );

Answer 1

GoogleMap is a widget so you should put on the render function. In this case, you want to show the map when the user taps the button.

_maplaunch() async {
  Navigator.of(context).push(MaterialPageRoute(builder: (_) => RoutePage()));
}

And add a new Page

class RoutePage extends StatelessWidget {
  static const LatLng _center =
      const LatLng(37.42796133580664, -122.085749655962);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        // mapType: MapType.hybrid,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    );
  }
}

Answer 2

Welcome to Stackoverflow. You mentioned that you have done everything, except adding this to you AndroidManifest.xml file, also same thing for info.plist on iOS.

This is how it'll look for Android.

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