22
33[ ![ pub package] ( https://img.shields.io/pub/v/google_maps_flutter.svg )] ( https://pub.dartlang.org/packages/google_maps_flutter )
44
5- A Flutter plugin to use [ Google Maps] ( https://developers.google.com/maps/ ) in
6- iOS and Android apps.
5+ A Flutter plugin to use [ Google Maps] ( https://developers.google.com/maps/ ) .
76
87## Caveat
98
@@ -12,24 +11,9 @@ This plugin provides an *unpublished preview* of the Flutter API for Google Maps
1211 code are still being consolidated and expanded. The intention is to grow
1312 current coverage into a complete offering. Issues and pull requests aimed to
1413 help us prioritize and speed up this effort are very welcome.
15- * The technique currently used for compositing GoogleMap views with Flutter
16- widgets is * inherently limited* and will be replaced by a fully compositional
17- [ Texture] ( https://docs.flutter.io/flutter/widgets/Texture-class.html ) -based
18- approach before we publish this plugin.
19-
20- In detail: the plugin currently relies on placing platform overlays on top of
21- a bitmap snapshotting widget for creating the illusion of in-line compositing
22- of GoogleMap views with Flutter widgets. This works only in very limited
23- situations where
24- * the widget is stationary
25- * the widget is drawn on top of all other widgets within bounds
26- * touch events within widget bounds can be safely ignored by Flutter
27-
28- The root problem with platform overlays is that they cannot be freely composed
29- with other widgets. Many workarounds can be devised to address this shortcoming
30- in particular situations, but the Flutter team does not intend to support such
31- work, as it would not move us forward towards our goal of a fully compositional
32- GoogleMaps widget.
14+ * Currently the plugin only supports Android as it embeds a platform view in the
15+ Flutter hierarchy which is currently only supported for Android ([ tracking
16+ issue] ( https://github.com/flutter/flutter/issues/19030 ) ).
3317
3418## Usage
3519
@@ -79,38 +63,32 @@ Supply your API key in the application delegate `ios/Runner/AppDelegate.m`:
7963
8064# ## Both
8165
82- You can now instantiate a `GoogleMapOverlayController` and use it to configure
83- a `GoogleMapOverlay` widget. Client code will have to change once the plugin
84- stops using platform overlays.
66+ You can now add a `GoogleMap` widget to your widget tree.
8567
86- Once added as an overlay, the map view can be controlled via the
87- ` GoogleMapController` that you obtain as the `mapController` property of
88- the overlay controller. Client code written against the `GoogleMapController`
89- interface will be unaffected by the change away from platform overlays.
68+ The map view can be controlled with the `GoogleMapController` that is passed to
69+ the `GoogleMap`'s `onMapCreated` callback.
9070
9171` ` ` dart
9272import 'package:flutter/material.dart';
9373import 'package:google_maps_flutter/google_maps_flutter.dart';
9474
9575void main() {
96- GoogleMapController.init();
97- final GoogleMapOverlayController controller =
98- GoogleMapOverlayController.fromSize(width: 300.0, height: 200.0);
99- final Widget mapWidget = GoogleMapOverlay(controller: controller);
10076 runApp(MaterialApp(
10177 home: new Scaffold(
10278 appBar: AppBar(title: const Text('Google Maps demo')),
103- body: MapsDemo(mapWidget, controller.mapController ),
79+ body: MapsDemo(),
10480 ),
105- navigatorObservers: <NavigatorObserver>[controller.overlayController],
10681 ));
10782}
10883
109- class MapsDemo extends StatelessWidget {
110- MapsDemo(this.mapWidget, this.controller);
84+ class MapsDemo extends StatefulWidget {
85+ @override
86+ State createState() => MapsDemoState();
87+ }
88+
89+ class MapsDemoState extends State<MapsDemo> {
11190
112- final Widget mapWidget;
113- final GoogleMapController controller;
91+ GoogleMapController mapController;
11492
11593 @override
11694 Widget build(BuildContext context) {
@@ -119,11 +97,19 @@ class MapsDemo extends StatelessWidget {
11997 child: Column(
12098 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
12199 children: <Widget>[
122- Center(child: mapWidget),
100+ Center(
101+ child: SizedBox(
102+ width: 300.0,
103+ height: 200.0,
104+ child: GoogleMap(
105+ onMapCreated: _onMapCreated,
106+ ),
107+ ),
108+ ),
123109 RaisedButton(
124110 child: const Text('Go to London'),
125- onPressed: () {
126- controller .animateCamera(CameraUpdate.newCameraPosition(
111+ onPressed: mapController == null ? null : () {
112+ mapController .animateCamera(CameraUpdate.newCameraPosition(
127113 const CameraPosition(
128114 bearing: 270.0,
129115 target: LatLng(51.5160895, -0.1294527),
@@ -137,6 +123,10 @@ class MapsDemo extends StatelessWidget {
137123 ),
138124 );
139125 }
126+
127+ void _onMapCreated(GoogleMapController controller) {
128+ setState(() { mapController = controller; });
129+ }
140130}
141131` ` `
142132
0 commit comments