Flutter - Google map does not show

Question

I know this issue has been raised before but I can't get it to work... I'm trying to display a simple google map in my flutter application.

To do so, I followed several tutorials such as https://codelabs.developers.google.com/codelabs/google-maps-in-flutter/ or https://pub.dev/packages/google_maps_flutter

So my code is exactly the same. I'll show you nonetheless :

First off, I activated both Maps SDK for Android and Maps SDK for iOS. I can see they are enabled in my panel.

Then, I just add the api_key (that I'm sure it's activated because I can see it in the credentials tabs of the "Maps SDK for Android" from google plateform)

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.google_maps_in_flutter">
<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="google_maps_in_flutter"
    android:icon="@mipmap/ic_launcher">

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

    <activity
        android:name=".MainActivity"
        android:launchMode="singleTop"
        ...

And I did the exact same thing for iOS.

The dependency is added in the pubspec.yaml as follow :

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^0.5.11
  cupertino_icons: ^0.1.2

I also tried the last version of the google_map_flutter (0.5.21+15), does not change anything.

And that's it, the main.dart is exactly like the tutorial :

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,
          initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
          ),
        ),
      ),
    );
  }
}

Then I run my app and... no map displayed.

I can see the appbar but below that, just a blank area. I don't even have the google logo displayed as I've seen in some other issues.

I tried to run flutter clean before building my app back, but it does not change anything.

Moreover, it seems I can't see any logs regarding the app.

Any pointers would save my day. Thanks!

Have you restarted your app after adding this package? Also in what simulator you run your app? — no_fate, Dec 10 '19 at 15:45
Yes, I have restarted everything. So I was running the app directly on my device (honor 7 with android 6). Then I tried with the pixel 2 emulator and it's working. I don't get why it does not work on my device since the minSdkVersion is set to 16... — user3561383, Dec 10 '19 at 15:52
Jesus, I just had to upgrade my version of google play services... I'm so mad. Thanks a lot for your advice, really appreciate it ! — user3561383, Dec 10 '19 at 16:24

score 2 · Accepted Answer · answered Dec 10 '19 at 16:27

2

Thanks to @no_fate, I just had to upgrade my google play services' version.

If you're in my situation, run your app on the latest version of any device emulator to see if the problem is from your actual phone or with the app itself.

answered Dec 10 '19 at 16:27

user3561383

77
1
13

score 0 · Answer 2 · answered Apr 08 '20 at 08:39

0

in my situation, my key is the problem, my Map SDK for Android is inactive. when it's activated, the map showed

to activate go to google cloud platform -> Google Map -> Map SDK for Android

answered Apr 08 '20 at 08:39

Agus Wisnu

1

Flutter - Google map does not show

2 Answers2