A Flutter plugin that provides a Google Maps widget.
Android | iOS | Web | |
---|---|---|---|
Support | SDK 20+ | iOS 11+ | Same as Flutter's |
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.
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.
Run this command:
With Flutter:
$ flutter pub add google_maps_flutter
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get
):
dependencies:
google_maps_flutter: ^2.5.0
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:google_maps_flutter/google_maps_flutter.dart';
example/lib/main.dart
// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter_android/google_maps_flutter_android.dart';
import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';
import 'animate_camera.dart';
import 'lite_mode.dart';
import 'map_click.dart';
import 'map_coordinates.dart';
import 'map_map_id.dart';
import 'map_ui.dart';
import 'marker_icons.dart';
import 'move_camera.dart';
import 'padding.dart';
import 'page.dart';
import 'place_circle.dart';
import 'place_marker.dart';
import 'place_polygon.dart';
import 'place_polyline.dart';
import 'scrolling_map.dart';
import 'snapshot.dart';
import 'tile_overlay.dart';
final List<GoogleMapExampleAppPage> _allPages = <GoogleMapExampleAppPage>[
const MapUiPage(),
const MapCoordinatesPage(),
const MapClickPage(),
const AnimateCameraPage(),
const MoveCameraPage(),
const PlaceMarkerPage(),
const MarkerIconsPage(),
const ScrollingMapPage(),
const PlacePolylinePage(),
const PlacePolygonPage(),
const PlaceCirclePage(),
const PaddingPage(),
const SnapshotPage(),
const LiteModePage(),
const TileOverlayPage(),
const MapIdPage(),
];
/// MapsDemo is the Main Application.
class MapsDemo extends StatelessWidget {
/// Default Constructor
const MapsDemo({super.key});
void _pushPage(BuildContext context, GoogleMapExampleAppPage page) {
Navigator.of(context).push(MaterialPageRoute<void>(
builder: (_) => Scaffold(
appBar: AppBar(title: Text(page.title)),
body: page,
)));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('GoogleMaps examples')),
body: ListView.builder(
itemCount: _allPages.length,
itemBuilder: (_, int index) => ListTile(
leading: _allPages[index].leading,
title: Text(_allPages[index].title),
onTap: () => _pushPage(context, _allPages[index]),
),
),
);
}
}
void main() {
final GoogleMapsFlutterPlatform mapsImplementation =
GoogleMapsFlutterPlatform.instance;
if (mapsImplementation is GoogleMapsFlutterAndroid) {
mapsImplementation.useAndroidViewSurface = true;
initializeMapRenderer();
}
runApp(const MaterialApp(home: MapsDemo()));
}
Completer<AndroidMapRenderer?>? _initializedRendererCompleter;
/// Initializes map renderer to the `latest` renderer type for Android platform.
///
/// The renderer must be requested before creating GoogleMap instances,
/// as the renderer can be initialized only once per application context.
Future<AndroidMapRenderer?> initializeMapRenderer() async {
if (_initializedRendererCompleter != null) {
return _initializedRendererCompleter!.future;
}
final Completer<AndroidMapRenderer?> completer =
Completer<AndroidMapRenderer?>();
_initializedRendererCompleter = completer;
WidgetsFlutterBinding.ensureInitialized();
final GoogleMapsFlutterPlatform mapsImplementation =
GoogleMapsFlutterPlatform.instance;
if (mapsImplementation is GoogleMapsFlutterAndroid) {
unawaited(mapsImplementation
.initializeWithRenderer(AndroidMapRenderer.latest)
.then((AndroidMapRenderer initializedRenderer) =>
completer.complete(initializedRenderer)));
} else {
completer.complete(null);
}
return completer.future;
}
Author: flutter
Source: https://github.com/flutter/packages/tree/main/packages/google_maps_flutter/google_maps_flutter
License: BSD-3-Clause license