A Flutter plugin that provides a Google Maps widget.
Android | iOS | |
---|---|---|
Support | SDK 20+ | iOS 11+ |
To use this plugin, add google_maps_flutter
as a dependency in your pubspec.yaml file.
Get an API key at https://cloud.google.com/maps-platform/.
Enable Google Map SDK for each platform.
For more details, see Getting started with Google Maps Platform.
minSdkVersion
in android/app/build.gradle
:android { defaultConfig { minSdkVersion 20 } }
This means that app will only be available for users that run Android SDK 20 or higher.
android/app/src/main/AndroidManifest.xml
:<manifest ... <application ... <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR KEY HERE"/>
The Android implementation supports multiple platform view display modes. For details, see the Android README.
To set up, specify 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
Or in your swift code, specify your API key in the application delegate ios/Runner/AppDelegate.swift
:
import UIKit import Flutter import GoogleMaps @UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? ) -> Bool { GMSServices.provideAPIKey("YOUR KEY HERE") GeneratedPluginRegistrant.register(with: self) return super.application(application, didFinishLaunchingWithOptions: launchOptions) } }
You can now add a GoogleMap
widget to your widget tree.
The map view can be controlled with the GoogleMapController
that is passed to the GoogleMap
's onMapCreated
callback.
class MapSample extends StatefulWidget { const MapSample({Key? key}) : super(key: key); @override State<MapSample> createState() => MapSampleState(); } class MapSampleState extends State<MapSample> { final Completer<GoogleMapController> _controller = Completer<GoogleMapController>(); static const CameraPosition _kGooglePlex = CameraPosition( target: LatLng(37.42796133580664, -122.085749655962), zoom: 14.4746, ); static const CameraPosition _kLake = CameraPosition( bearing: 192.8334901395799, target: LatLng(37.43296265331129, -122.08832357078792), tilt: 59.440717697143555, zoom: 19.151926040649414); @override Widget build(BuildContext context) { return Scaffold( body: GoogleMap( mapType: MapType.hybrid, initialCameraPosition: _kGooglePlex, onMapCreated: (GoogleMapController controller) { _controller.complete(controller); }, ), floatingActionButton: FloatingActionButton.extended( onPressed: _goToTheLake, label: const Text('To the lake!'), icon: const Icon(Icons.directions_boat), ), ); } Future<void> _goToTheLake() async { final GoogleMapController controller = await _controller.future; controller.animateCamera(CameraUpdate.newCameraPosition(_kLake)); } }
See the example
directory for a complete sample app.