search

marchdev-tk / 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.
BSD 3-Clause "New" or "Revised" License
87 stars 57 forks source link
dart dart2 dartlang flutter flutter-package flutter-plugin google-maps map mobile web

readme

flutter_google_maps

Build Pub GitHub GitHub stars

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

Web

<body>
  <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
  <script src="https://github.com/marchdev-tk/flutter_google_maps/raw/master/main.dart.js" type="application/javascript"></script>
</body>

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"/>

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:

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:

To interact with GoogleMap you'll need to:

Use static of method

Here's list of interactions:

Feature requests and Bug reports

Feel free to post a feature requests or report a bug here.

TODO