How to integrate with google maps in flutter?

Question

I started to develop with flutter and I want to use google_maps_flutter package.

I was going through medium post in order to add map to my app (https://medium.com/flutter-io/google-maps-and-flutter-cfb330f9a245).

I added this code in AppDelegate.m

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"******"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

and this to Info.plist

<key>io.flutter.embedded_views_preview</key>
<true/>

and this is the widget code:

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

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

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

class _MyAppState extends State<MyApp> {
  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: Text('Maps Sample App'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
          onMapCreated: _onMapCreated,
          options: GoogleMapOptions(
            cameraPosition: CameraPosition(
              target: _center,
              zoom: 11.0,
            ),
          ),
        ),
      ),
    );
  }
}

As the example in the post, but unfortunately I get a screen with the google maps widget but not showing a map. like this: https://i.sstatic.net/noEdq.jpg (I can't upload an image because low reputation, sorry :( ).

Is there a problem with the sdk? or there is something to change in the code?

Thank you for your help!!

Answer 1

I faced the same issue and spent some time figuring it out.

Please note it is not advisable to unrestrict your API key and should be a temporary solution.

First of all, you cannot use the Google Maps APIs if you have not enabled billing in your Google Cloud Platform account.

I fixed this issue by making sure my API Key was not restricted. I deleted my previous API key and created a new API key but this time I did not restrict the API key.

The map loaded correctly afterwards.

If you intend to use the geolocation services, it might help to add to your ios/Runner/Info.plist file the code below

<key>NSLocationWhenInUseUsageDescription</key>
<string>Reason for requesting location permission</string>

If you do not know how to create the API keys follow this link Get API Key.

This is how my API key configuration looks like

And this is how my maps page in my app looks like