Google Maps for Flutter

A Flutter plugin to use Google Maps in iOS and Android apps.

Caveat

This plugin provides an unpublished preview of the Flutter API for Google Maps:

• Dart APIs for controlling and interacting with a GoogleMap view from Flutter code are still being consolidated and expanded. The intention is to grow current coverage into a complete offering. Issues and pull requests aimed to help us prioritize and speed up this effort are very welcome.

• The technique currently used for compositing GoogleMap views with Flutter widgets is inherently limited and will be replaced by a fully compositional Texture-based approach before we publish this plugin.

  In detail: the plugin currently relies on placing platform overlays on top of a bitmap snapshotting widget for creating the illusion of in-line compositing of GoogleMap views with Flutter widgets. This works only in very limited situations where

  • the widget is stationary
  • the widget is drawn on top of all other widgets within bounds
  • touch events within widget bounds can be safely ignored by Flutter

  The root problem with platform overlays is that they cannot be freely composed with other widgets. Many workarounds can be devised to address this shortcoming in particular situations, but the Flutter team does not intend to support such work, as it would not move us forward towards our goal of a fully compositional GoogleMaps widget.

Usage

To use this plugin, add

 google_maps_flutter:
   git:
     url: git://github.com/flutter/plugins
     path: packages/google_maps_flutter

as a dependency in your pubspec.yaml file.

Getting Started

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

Android

Specify your API key in the 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

Supply your API key in the application delegate 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

Both

You can now instantiate a GoogleMapOverlayController and use it to configure a GoogleMapOverlay widget. Client code will have to change once the plugin stops using platform overlays.

Once added as an overlay, the map view can be controlled via the GoogleMapController that you obtain as the mapController property of the overlay controller. Client code written against the GoogleMapController interface will be unaffected by the change away from platform overlays.

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  GoogleMapController.init();
  final GoogleMapOverlayController controller =
      GoogleMapOverlayController.fromSize(width: 300.0, height: 200.0);
  final Widget mapWidget = GoogleMapOverlay(controller: controller);
  runApp(MaterialApp(
    home: new Scaffold(
      appBar: AppBar(title: const Text('Google Maps demo')),
      body: MapsDemo(mapWidget, controller.mapController),
    ),
    navigatorObservers: <NavigatorObserver>[controller.overlayController],
  ));
}

class MapsDemo extends StatelessWidget {
  MapsDemo(this.mapWidget, this.controller);

  final Widget mapWidget;
  final GoogleMapController controller;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(15.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Center(child: mapWidget),
          RaisedButton(
            child: const Text('Go to London'),
            onPressed: () {
              controller.animateCamera(CameraUpdate.newCameraPosition(
                const CameraPosition(
                  bearing: 270.0,
                  target: LatLng(51.5160895, -0.1294527),
                  tilt: 30.0,
                  zoom: 17.0,
                ),
              ));
            },
          ),
        ],
      ),
    );
  }
}

See the example directory for a complete sample app.