Google Maps for Flutter
A Flutter plugin that provides aGoogle Maps widget.
| Android | iOS | Web | |
|---|---|---|---|
| Support | SDK 21+ | iOS 14+ | Same asFlutter's |
Important: Not all functionality is supported on all platforms.To check details, please read the README filesof the endorsed platform packages:
Getting Started
Get an API key atcloud.google.com/maps-platform/.
Enable Google Map SDK for each platform.
- Go toGoogle Developers Console.
- Choose the project that you want to enable Google Maps on.
- Select the navigation menu and then select "Google Maps".
- Select "APIs" under the Google Maps menu.
- To enable Google Maps for Android, select "Maps SDK for Android" in the "Additional APIs" section, then select "ENABLE".
- To enable Google Maps for iOS, select "Maps SDK for iOS" in the "Additional APIs" section, then select "ENABLE".
- To enable Google Maps for Web, enable the "Maps JavaScript API".
- Make sure the APIs you enabled are under the "Enabled APIs" section.
For more details, seeGetting started with Google 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"/>Read about Android-specific features and limitations in the
google_maps_flutter_androidREADME.
iOS
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];}@endOr in your Swift code, specify your API keyin the application delegate
ios/Runner/AppDelegate.swift:import UIKitimport Flutterimport 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) }}Read about iOS-specific features and limitations in the
google_maps_flutter_iosREADME.
Web
Add the following to the
<head>section ofweb/index.html:<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>Read about web-specific features and limitations in the
google_maps_flutter_webREADME.
All
You can now add aGoogleMap widget to your widget tree.
The map view can be controlled with theGoogleMapController that is passed totheGoogleMap'sonMapCreated callback.
TheGoogleMap widget should be used within a widget with a bounded size. Using itin an unbounded widget will cause the application to throw a Flutter exception.
Sample Usage
class MapSample extends StatefulWidget { const MapSample({super.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; await controller.animateCamera(CameraUpdate.newCameraPosition(_kLake)); }}See theexample directory for a complete sample app.