26

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

Improve this question
5
  • Kindly show your code, there must be some error you did while coding. Check your API key once again, do check that your emulator has internet connection. Commented Mar 30, 2019 at 18:08
  • I tried the same 2 days ago and still shows the white screen in google map, but its working fine for Java Script as it showing the map in browser whem i checked with the basic example. I did checked bith android and Ios apis are enabled. but still getting the same white screen instead the map Commented Apr 2, 2019 at 3:10
  • i am getting the same. @TuttaFM did u solve the problem? Commented Apr 2, 2019 at 3:11
  • @mmc , in this tutorial no, not even with the sample in read me file in plugin .I find another way for map and it work fine for me . I will post it here as temporary asnwer for others. Commented Apr 3, 2019 at 22:41
  • Not working for me. Sam white/grey screen. I have the position icon and if I use Fatimas code below I get a marker in the screen. I tried in both iOS and Android emulator and also on my iOS device. Same result. I tried with the documentation suggested code (pub.dev/packages/google_maps_flutter#-installing-tab-) and same result. Any suggestions on how to fix this? Commented May 31, 2019 at 7:56

30 Answers 30

Reset to default
38

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.
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I faced the same problem even when my APIs are enable i get a blank blue screen. flutter clean command really saved the day :D
saved my day perfect solution.
Dont forget to change/add your API_KEY in to AppDelegate.swift if you run on IOS simulator, otherwise it will not work: GMSServices.provideAPIKey("API_KEY")
30

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: Enable SDK's

  2. Add them to the API restrictions This how they should look like if they are enabled

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!

Improve this answer

3 Comments

Done, with extra flutter clean, saved my day
What happens when all the restrictions are removed and the api key can make any call?
This is what solved. I guess the problem is that when we restrict only to android app it causes conflicts. So, place none on restrictions and restringe to your sha-1 and you will be safe. Thanks
28

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

Improve this answer

2 Comments

I have removed all the restrictions for the api key. still this happens. what could it be?
then check the permissions for the android and ios. for android, you have to give access to the AndroidManifest.xml file and, for the ios, put the permissions into the Info.plist file
7

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

Improve this answer

Comments

6
  • 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.
Improve this answer

Comments

5

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.

Improve this answer

1 Comment

for ios , separate sdk is there, enable the api for ios
4

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.

Improve this answer

Comments

3

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;
  }
}
Improve this answer

4 Comments

I tried the above code (after following setup and installation instruction). But the map doesn't show. I get an grey screen with a marker in the middle of the screen. I've also tried example at pub.dev/packages/google_maps_flutter#-installing-tab- with the same result. No error in console.
@SGoldwin, can you tell me if your emulator support google play store or not ?
I am using Nexus 5X API 28 which has Google play support. I installed Pixel 2 API 28 with Google play support. Running on Pixel 2 I get an error message: "/GooglePlayServicesUtil( 4151): Google Play services out of date. Requires 13400000 but found 13280022". I then installed Pixel 2 API Q (latest version) but this time I couldn't run the app in the emulator. Message: "Error connecting to the service protocol: HttpException: Connection closed before full header was received". I google that and some says you should downgrade. Didn't try that.
@SGoldwin I have Nexus 5X API 28 too and it worked with me. actually I don't know much about emulators issue :(
3

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

Improve this answer

2 Comments

LOL!!! Sorry about the useless comment but I couldn't help to laugh. Certainly these kind of I-didn't-notice things happen more often than one would like...
Juuuuust happened to me too! Many thanks for mentioning this obvious requirement :D:D:D
3

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).

Improve this answer

2 Comments

Where do you add this?
@Johan android => app => build.gradle. Please add it in dependencies
2

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/......."

Improve this answer

Comments

2

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"/>

  1. 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.

Improve this answer

1 Comment

I tried every solutions but nothing works, the only think worked is leaving the android.geo.API_KEY empty thank u
2

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

Example :

enter image description here

  1. Edit your API Key, and add Android Map SDK and iOS Map SDK the API restrictions.
Improve this answer

Comments

2

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

Improve this answer

Comments

1

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.
Improve this answer

Comments

1

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

Improve this answer

Comments

1

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.
Improve this answer

Comments

1

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 enableenter image description here

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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/>
Improve this answer

Comments

0

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
Improve this answer

Comments

0

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"/>
Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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());
Improve this answer

Comments

0

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 on 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 check your internet connection if you are using an 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
Improve this answer

Comments

0

I have solved my problem by changing the display mode for Android versions 9 and lower.

import 'package:google_maps_flutter_android/google_maps_flutter_android.dart';
import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';

void main() {
  // Require Hybrid Composition mode on Android.
  final GoogleMapsFlutterPlatform mapsImplementation =
      GoogleMapsFlutterPlatform.instance;
  if (mapsImplementation is GoogleMapsFlutterAndroid) {
    // Force Hybrid Composition mode.
    mapsImplementation.useAndroidViewSurface = true;
  }
  // ···
}

https://pub.dev/packages/google_maps_flutter_android#display-mode

Improve this answer

Comments

0

I was facing this kind of a problem with the white GoogleMaps widget today, but my problem was using GoogleMaps inside SizedBox without width. So make sure to have GoogleMaps in an element with width and height!

SizedBox(
  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width,
  child: Stack(
    children: [
      GoogleMap(
        ...
      ),
      ...
    ],
  );
);
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.