A Flutter plugin that provides a
Google Maps
widget.
|
Android
|
iOS
|
Web
|
Support
|
SDK 20+
|
iOS 14+
|
Same as
Flutter's
|
To use this plugin, add
google_maps_flutter
as a
dependency in your pubspec.yaml file
.
For more details, see
Getting started with Google Maps Platform
.
Android
#
- Set the
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.
- 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"/>
Display Mode
The Android implementation supports multiple
platform view display modes
.
For details, see
the Android README
.
Cloud-based map styling
Cloud-based map styling works on Android only if
AndroidMapRenderer.latest
map renderer has been initialized.
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'll need to modify the
web/index.html
file of your Flutter Web application
to include the Google Maps JS SDK.
Check
the
google_maps_flutter_web
README
for the latest information on how to prepare your App to use Google Maps on the
web.
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.
The
GoogleMap
widget should be used within a widget with a bounded size. Using it
in an unbounded widget will cause the application to throw a Flutter exception.
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 the
example
directory for a complete sample app.