flutter_google_maps
A Flutter plugin for integrating Google Maps in iOS, Android and Web applications. It is a wrapper of google_maps_flutter for Mobile and google_maps for Web.
Getting Started
-
Get an API key at https://cloud.google.com/maps-platform/.
-
Enable Google Map SDK for each platform.
- Go to Google 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".
- Make sure the APIs you enabled are under the "Enabled APIs" section.
-
You can also find detailed steps to get start with Google Maps Platform here.
Web
<body>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY">script>
<script src="main.dart.js" type="application/javascript">script>
body>
Android
Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml:
<manifest ...android : name= "com.google.android.geo.API_KEY" android : value= "YOUR KEY HERE"/>
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];
}
@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)
}
}
Opt-in to the embedded views preview by adding a boolean property to the app's Info.plist file with the key io.flutter.embedded_views_preview and the value YES.
Android/iOS Directions API
Add in your main.dart within main function GoogleMap.init('API_KEY'); before running the app.
void main() {
GoogleMap.init('API_KEY');
WidgetsFlutterBinding.ensureInitialized();
runApp(MyApp());
}
For more info about mobile map setup, view google_maps_flutter plugin.
Add GoogleMap Widget
import 'package:flutter/material.dart';
import 'package:flutter_google_maps/flutter_google_maps.dart';
...
GlobalKey<GoogleMapStateBase> _key = GlobalKey<GoogleMapStateBase>();
@override
Widget build(BuildContext context) => GoogleMap(
key: _key,
),
...
And now you're ready to go.
Examples
GoogleMap widget can be configured with:
| Property | Type | Description |
|---|---|---|
| initialPosition | GeoCoord | The initial position of the map's camera |
| initialZoom | double | The initial zoom of the map's camera |
| mapType | MapType | Type of map tiles to be rendered |
| minZoom | double | The preferred minimum zoom level or null, if unbounded from below |
| maxZoom | double | The preferred maximum zoom level or null, if unbounded from above |
| mapStyle | String | Sets the styling of the base map |
| mobilePreferences | MobileMapPreferences | Set of mobile map preferences |
| webPreferences | WebMapPreferences | Set of web map preferences |
| interactive | bool | Defines whether map is interactive or not |
| onTap | ValueChanged | Called every time a GoogleMap is tapped |
| onLongPress | ValueChanged | Called every time a GoogleMap is long pressed (for web when right mouse clicked) |
| markers | Set | Markers to be placed on the map |
MapType is one of following variants:
none-> do not display map tilesroadmap-> normal tiles (traffic and labels, subtle terrain information)satellite-> satellite imaging tiles (aerial photos)terrain-> terrain tiles (indicates type and height of terrain)hybrid-> hybrid tiles (satellite images with some labels/overlays)
MobileMapPreferences can be configured with:
| Property | Type | Description |
|---|---|---|
| compassEnabled | bool | True if the map should show a compass when rotated |
| mapToolbarEnabled | bool | True if the map should show a toolbar when you interact with the map. Android only |
| myLocationEnabled | bool | True if a "My Location" layer should be shown on the map |
| myLocationButtonEnabled | bool | Enables or disables the my-location button |
| indoorViewEnabled | bool | Enables or disables the indoor view from the map |
| trafficEnabled | bool | Enables or disables the traffic layer of the map |
| buildingsEnabled | bool | Enables or disables showing 3D buildings where available |
| padding | EdgeInsets | Padding to be set on mapdetails |
| rotateGesturesEnabled | bool | True if the map view should respond to rotate gestures |
| scrollGesturesEnabled | bool | True if the map view should respond to scroll gestures |
| zoomGesturesEnabled | bool | True if the map view should respond to zoom gestures |
| tiltGesturesEnabled | bool | True if the map view should respond to tilt gestures |
WebMapPreferences can be configured with:
| Property | Type | Description |
|---|---|---|
| streetViewControl | bool | Enables or disables streetViewControl |
| fullscreenControl | bool | Enables or disables fullscreenControl |
| mapTypeControl | bool | Enables or disables mapTypeControl |
| scrollwheel | bool | Enables or disables scrollwheel |
| panControl | bool | Enables or disables panControl |
| overviewMapControl | bool | Enables or disables overviewMapControl |
| rotateControl | bool | Enables or disables rotateControl |
| scaleControl | bool | Enables or disables scaleControl |
| zoomControl | bool | Enables or disables zoomControl |
| dragGestures | bool | Enables or disables flutter drag gestures |
To prepare for interacting with GoogleMap you will need to:
Create a key and assign it to the GoogleMap widget.
GoogleMap widget has 2 static methods, they are:
-
MapOperations of(GlobalKey key);
Gets [MapOperations] interface via provided
keyof [GoogleMapStateBase] state. -
void init(String apiKey);
Initializer of [GoogleMap].
RequiredifDirections APIwill be needed. For other cases, could be ignored.
To interact with GoogleMap you'll need to:
Use static of method
Here's list of interactions:
-
Move camera to the new bounds
void moveCameraBounds( GeoCoordBounds newBounds, { double padding = 0, bool animated = true, bool waitUntilReady = true, });
-
Move camera to the new coordinates
void moveCamera( GeoCoord latLng, { bool animated = true, bool waitUntilReady = true, double zoom, });
-
Zoom camera
void zoomCamera( double zoom, { bool animated = true, bool waitUntilReady = true, });
-
Get center coordinates of the map
FutureOr<GeoCoord> get center;
-
Change Map Style.
The style string can be generated using map style tool. Also, refer iOS and Android style reference for more information regarding the supported styles.
void changeMapStyle(String mapStyle);
-
Add marker to the map by given [position]
void addMarkerRaw( GeoCoord position, { String label, String icon, String info, ValueChanged<String> onTap, VOidCallback onInfoWindowTap, });
Please note: [icon] could be a path to an image asset or it could be an instance of ByteString.
-
Add marker to the map by given [marker] object
void addMarker(Marker marker);
-
Remove marker from the map by given [position]
void removeMarker(GeoCoord position);
-
Remove all markers from the map
void clearMarkers();
-
Add direction to the map by given [origin] and [destination] coordinates
void addDirection( dynamic origin, dynamic destination, { String startLabel, String startIcon, String startInfo, String endLabel, String endIcon, String endInfo, });
-
Remove direction from the map by given [origin] and [destination] coordinates
void removeDirection(dynamic origin, dynamic destination);
-
Remove all directions from the map
void clearDirections();
-
Add polygon to the map by given [id] and [points]
void addPolygon( String id, Iterable<GeoCoord> points, { ValueChanged<String> onTap, Color strokeColor = const Color(0x000000), double strokeOpacity = 0.8, double strokeWidth = 1, Color fillColor = const Color(0x000000), double fillOpacity = 0.35, });
-
Edit polygon on the map by given [id] and [points]
void editPolygon( String id, Iterable<GeoCoord> points, { ValueChanged<String> onTap, Color strokeColor = const Color(0x000000), double strokeOpacity = 0.8, double strokeWeight = 1, Color fillColor = const Color(0x000000), double fillOpacity = 0.35, });
-
Remove polygon from the map by given [id].
void removePolygon(String id);
-
Remove all polygones from the map.
void clearPolygons();
Feature requests and Bug reports
Feel free to post a feature requests or report a bug here.
TODO
- Add circles support
- Add polyline support
![[BUG 🐞] GoogleMap widget listen/respond to touches even if there is another widget/dialog on top of it](https://avatars.githubusercontent.com/u/27827640?v=4)
![[BREAKING CHANGE] update to null-safety](https://avatars.githubusercontent.com/u/48645716?v=4)
1 Mar 4, 2022
1 Jul 15, 2022
4.2k Jan 6, 2023
415 Dec 29, 2022
75 Oct 25, 2022
5 Nov 13, 2022
24 Jan 14, 2022
70 Aug 13, 2022
127 Oct 22, 2022
97 Dec 30, 2022
4 Jul 26, 2022
85 Nov 30, 2022
1 Mar 18, 2022
2 Apr 19, 2022
69 Jul 19, 2022
178 Dec 16, 2022
0 Nov 23, 2022
6 Oct 31, 2022
1 Mar 28, 2022