The basics

The sample code and example app are good ways to learn the basics. One thing to keep in mind is that we have to write some initialization code inside main method in order to properly show the map.

Updating pubspec.yaml

You’ll need to add the dependency first.

google_maps_flutter:

git:

url: git://github.com/flutter/plugins

path: packages/google_maps_flutter

ref: 'ce3a913c3834'

Acquiring API key and adding meta data

Get an API key at https://cloud.google.com/maps-platform/.

Android

Add the API key in application manifest android/app/src/main/AndroidManifest.xml :

<manifest ...

<application ...

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

android:value="YOUR KEY HERE"/>

iOS

Specify your API key in application delgate ios/Runner/AppDelegate.m :

#include "AppDelegate.h"

#include "GeneratedPluginRegistrant.h"

#import "GoogleMaps/GoogleMaps.h"



@implementation AppDelegate



- (BOOL)application:(UIApplication *)application

didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

[GMSServices provideAPIKey:@"YOUR KEY HERE"];

[GeneratedPluginRegistrant registerWithRegistry:self];

return [super application:application didFinishLaunchingWithOptions:launchOptions];

}

@end

Using the widget

Here’s the complete sample code picked up shamelessly from original repo :D

I’ve modified this code a little bit in order to make the map cover the page body:

Note that I’ve used MediaQueryData and dart:ui to get the size of current window. I’m then using relevant size for map initialization like so:

final size = MediaQueryData.fromWindow(ui.window).size;

final GoogleMapOverlayController controller = GoogleMapOverlayController.fromSize(

width: size.width,

height: size.height - 72.0, //roughly subtracting appbar height

);

And that’s all you need to do in order to have a basic full-screen map running with in-built gestures (zooming and panning etc).

Hope you like this post, happy Fluttering!