Flutter – Google map does not show

Issue

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.

enter image description here

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!

Solution

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 By – user3561383

Answer Checked By – David Goodson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *