Google map in flutter doesn't appear

Question

I'm trying to follow this tutorial "https://medium.com/flutter-io/google-maps-and-flutter-cfb330f9a245" to add google map in flutter. I updated android manifest with google map key and added a permission for accessing fine_location.I get white screen on my emulator with no map. i spent many hours trying to fix it but in vain . i also tried the sample usage with plugin "https://pub.dartlang.org/packages/google_maps_flutter#-readme-tab-" but nothing help in showing map . any help is appreciated thanks in advance

Answer 1

Well when you add it's API key in the AndroidManifest.xml file

• Add

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

in between </activity> and </application>.

• Run the command flutter clean in the terminal.
• Run it.

Answer 2

Probably you didn't enable the Google Map service and Map SDK for android and IOS in Google Cloud Console... Try this link https://console.cloud.google.com/google/maps-apis/overview

Answer 3

After creating an API you should enable Android SDK and IOS SDK for your project. After you did that, go to API restrictions and select these two. Please see the following images:

1. Enable SDK's:

2. Add them to the API restrictions

And you are done! All you need to do right now is to copy the API key and add it into your AndroidManifest file. Also keep in mind that you don't actually need to add a billing account for this to work. Hope this works for you!

Answer 4

• Open your google map in emulator.
• If that google map not show map, problem is in your emulator google map.
• You have to update or reinstall google map in your emulator.
• That's works for me.

Answer 5

After trying out all the above in Summary:

• Enabled Android and iOs SDK on Cloud Console
• Added Secret Key to Android Manifest
• Added Key to iOs Runner
• Adding Map on my App
• Running the command Flutter clean
  

The map was still showing grey.
My Solution
Uninstall the app from your device (Phone or Emulator) then compile afresh.
The new installation shows the map correctly

Answer 6

after a day of searching for solutions, I found that I had added the wrong api key. so double check your api key before build the apk;

I have added my android api key in ios.

Answer 7

Actually I didn't find any answer through my search for issues in above tutorial. I find another way for map and it works fine with my so I'll post it, as it may help others. you need to 1- add it in pubspec.yaml to get plugin . 2- add the key for android and Ios 3- add this code in main.

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 myMapController;
  final Set<Marker> _markers = new Set();
  static const LatLng _mainLocation = const LatLng(25.69893, 32.6421);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Maps With Marker'),
              backgroundColor: Colors.blue[900],
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: GoogleMap(
                    initialCameraPosition: CameraPosition(
                      target: _mainLocation,
                      zoom: 10.0,
                    ),
                    markers: this.myMarker(),
                    mapType: MapType.normal,
                    onMapCreated: (controller) {
                      setState(() {
                        myMapController = controller;
                      });
                    },
                  ),
                ),
              ],
            )));
  }

  Set<Marker> myMarker() {
    setState(() {
      _markers.add(Marker(
        // This marker id can be anything that uniquely identifies each marker.
        markerId: MarkerId(_mainLocation.toString()),
        position: _mainLocation,
        infoWindow: InfoWindow(
          title: 'Historical City',
          snippet: '5 Star Rating',
        ),
        icon: BitmapDescriptor.defaultMarker,
      ));
    });

    return _markers;
  }
}

Answer 8

go to google cloud console and switch your APIKey to enabled and it will work, I've faced the same issue and the app (which I installed on an android physical device but it did not work and appear just as a blank page with the logo of google at the left lower corner,

after that I realized that I should enable the APIKey not just generate it and including it inside my app and when I did that , the app worked fine and the maps appear and the problem fixed

Answer 9

in android, please add this library. it's work for me:

implementation 'com.google.android.gms:play-services-location:19.0.1'

in my ios device, my app works fine, but in my android device, google map can't display (when i clicked in map, i can get the exact lat + lon), you have to add that library for build.gradle (app).

Answer 10

Two possible issues when I ran into this issue.

Make sure you have enabled "Maps SDK for iOS" in your api console "https://console.cloud.google.com/google/maps-apis/......."

Answer 11

Had the same issue on my debug phone. Turns out connecting it to the Internet helps ;) (didn't notice Wi-Fi was off)

Answer 12

I also had this issue with no google map displaying for Android. I had my API key in between the Activity tags.

The Meta-Data tag with your API Key needs to be a child of the Application tag. Put this right before the closing Application tag.

Don't forget to run Flutter clean before running your app again.

Answer 13

1. Make sure to add the apikey meta-data this code just after <application...

Example :

2. Edit your API Key, and add Android Map SDK and iOS Map SDK the API restrictions.

Answer 14

Do the Following simple steps : (This worked for me)

1. Delete the previous Key and Create a new API Key.
2. Paste the New API key in Android>app>source>main>AndroidManifesto.xml file where the previous API key was written.
3. Now before running go to terminal in Android studio and run "flutter clean".
4. Now Re run the app.(make it stop and then play).
5. Wait and you will see the maps.

Answer 15

I had a similar issue. This is how to solved it.

1. Make sure your Andriod Map API is enabled.

2. Make sure you have successfully installed the map dependencies

3. Make sure you have also updated the minimum SDK Version in android/app/build.gradle is set to 20 (as it time to writing this answer, this is the latest)

4. Make sure you have updated your payment method. In some instance, it will work without the payment method

5. (VERY IMPORTANT) Make sure you copy the right API key

6. when updating this:

   <manifest ... <application ...

leave ....andriod.geo.API_KEY" the way it is. don't add any API key there. you will experience a serious bug doing that.

only update andriod:valkue="jsghfkmbskjehskndkksbdkkldhkldjk"/>

7. Finally, run flutter clean on your terminal and update/upgrade your dependencies when it demands for it.

I hope this is helpful to someone. I experienced this bug for a long time and I know somebody will be going through the same thing. let me know if it works or otherwise.

Answer 16

What worked for me was adding the meta-data which is showed in the website of google map before try it.

Answer 17

This issue mostly happens due to wrong, inactive or restricted API key. You see grey map widget but no map view inside. Best way to identify the issue is replace the API key with fresh unrestricted API key and run

flutter clean 
flutter run

If it solves the issue then you have found the real root of the problem. If you've already restricted the API key, make sure the restriction allows:

1. Maps SDK for iOS API or Maps SDK for Android API
2. For Android: Your current debug or release SHA-1 signing-certificate fingerprint is added into the allowed list of SHA-1 values. For iOS: Correct Bundle ID is added into the API restriction in the Google API console Credentials page.

Answer 18

Try running app on any mobile instead of emulator. I was facing the same issue but it works for me when i tried running app in mobile. Else you should check in GCP console whether you have enabled maps SDK for IOS or not.

Answer 19

I was also suffering from this error or blank screen.So, the solution I got is to enable Maps SDK for Android or IOS.On Google Cloud Platform.After enabling the SDK your app will surely show the map within a minute.

Answer 20

Flutter 1.7.5+, Dart 2.8.5+

I had tried everything, but still wasnt working me on iOS, i had checked permissions,etc all were fine but apparently this issue was related to webview "io.flutter.embedded_views_preview". After setting this info.plist file, worked.

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

Answer 21

I followed the instructions on the flutter plugin page to start working with maps: https://codelabs.developers.google.com/codelabs/google-maps-in-flutter/#1

https://pub.dev/packages/google_maps_flutter#usage

The issue I was facing: (only applies to folks who have restricted the api key to accept requests from specific bundle identifiers in ios)

I had the issue where I had a blank grey-ish box appear instead of the map.

The issue turned out to be that I had restricted my api key to restrict requests: "accept requests from an iOS application with one of these bundle identifiers."

I had changed the bundle identifier. All I had to do was add the bundle identifier to the allowed identifier list. and maps re appeared.

you can find the ios bundle identifier by doing a global search in your application code for "PRODUCT_BUNDLE_IDENTIFIER =".

you can get to the api keys edit page by:

1. Searching for google maps in the search bar. (https://console.cloud.google.com/google/maps-apis)
2. click credentials tab on the left pane (this shows all your api keys)
3. Select the api key you want to edit
4. add your bundle identifier

Answer 22

make sure your key here is the same as the API key used in map display: or add this meta tag to your manifest file with the right API_KEY

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

Answer 23

I did every thing correct as per the documentation but still I was facing the same issue. The problem was my emulator was not supporting the play store. So what I did is uninstalled the old emulator and installed the latest who supports play store. It worked for me.

Answer 24

I had this issue and solved it because of the IP ADDRESS ALLOWANCE setting! If you've tried above solutions and have not worked like my case. Check if your IP address has been changed or using a different IP address. I forgot that I was outside and Google map haven't loaded for that reason.

Answer 25

If you have tried all the solutions above, and its not working, then do these two things

1. It might be that you did not wait just enough for the map to display. In my case, after trying all of the above, I had to run the app in a real device and then wait for some time (about 30 seconds) for the map interface to appear.
2. If you must run in emulator, then heck your internet connection if you are using emulator. Make sure that the Wi-Fi icon is turned on and then go to Wi-Fi settings and make sure the Androidwifi says "connected". If not, then follow this https://stackoverflow.com/a/52765004/6909825 answer to do some settings

Answer 26

You need double check that you enabled the android & ios sdk's from google developer console. Please be attention : You may have IOS or Android IP key. But in service side, you might forget the enable the API from google developer console.

Answer 27

I had the same issue I forgot to enable google maps sdk for android or ios Google Cloud Console

Answer 28

I had a case like this too on android it works on ios it doesn't work but displays only gray color and we found the solution go to https://console.cloud.google.com/ => API & Services => Libraries => maps SDK for IOS => and click enable

Answer 29

Didn't work for me coz i forgot to change API_KEY in AppDelegate and tried to run it on IOS platform.

Check if API_KEY is a valid key and the same in:

1. AppDelegate.swift file:

       GMSServices.provideAPIKey("API_KEY")
   

2. In the AndroidManifest.xml file:

       android:name="com.google.android.geo.API_KEY"
       android:value="API_KEY" 
   

3. In the all places you are using the service in the code, for example:

   GoogleMapsPlaces places = GoogleMapsPlaces(
   apiKey: "API_KEY",
   apiHeaders: await const GoogleApiHeaders().getHeaders());