mirror of https://github.com/Iconica-Development/flutter_google_track_and_trace.git synced 2025-05-18 20:53:46 +02:00

Google Maps widget for use in Beep

component

Find a file

Bart Ribbers d227042c22 chore: ready the package for deployment to the pub server Dart warns about leaking API keys. Although I'm ignoring it for now (it's too late anyway) it is right about it and we should change the keys and make sure it's not in git in the future		2024-10-21 10:31:33 +02:00
.github/workflows	feat(documentation): Create component-documentation.yml workflow file	2024-02-13 13:36:04 +01:00
example	chore: ready the package for deployment to the pub server	2024-10-21 10:31:33 +02:00
lib	chore: ready the package for deployment to the pub server	2024-10-21 10:31:33 +02:00
.gitignore	chore: add fvm configuration to gitignore	2024-10-21 10:31:33 +02:00
.metadata	working track&trace with example	2021-09-28 08:18:14 +02:00
analysis_options.yaml	fix(ci): resolve all linter issues	2023-09-12 11:08:55 +02:00
CHANGELOG.md	build: create release version 2.1.0	2024-05-14 22:04:54 +02:00
LICENSE	working track&trace with example	2021-09-28 08:18:14 +02:00
pubspec.yaml	chore: ready the package for deployment to the pub server	2024-10-21 10:31:33 +02:00
README.md	fix: Added web part that explains what to do to resolve the error.	2023-11-01 15:33:13 +01:00

README.md

Track and Trace with Google Maps For Flutter

A Flutter packages that provides a wrapper around a Google Maps widget.

Features

Show a Google Map with 2 markers on it
Calculate a Route between the two markers
Update the route and route information with a set time interval
Retrieve the travel distance and time
Use custom styling for the map, markers and line
Automatically center the view between the two markers
Make all Google Maps settings available through the GoogleTrackTraceMap

Getting started

Because this package uses Google Maps for the Map and the route calculation you need to follow the Flutter Google Maps guide:

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.

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

iOS

This plugin requires iOS 9.0 or higher. 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)
  }
}

WEB

Add the following code in the 'head' of 'web/index.html':

<head>

  <!-- // Other stuff -->

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>

Usage

class TrackTraceDemo extends StatefulWidget {
  const TrackTraceDemo({Key? key}) : super(key: key);

  @override
  State<TrackTraceDemo> createState() => _TrackTraceDemoState();
}

class _TrackTraceDemoState extends State<TrackTraceDemo> {
  TrackTraceController? controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: (controller == null || controller!.route == null)
              ? const Text('TrackTrace example')
              : Text(controller!.route!.duration.toString() +
                  ' seconds, distance: ' +
                  (controller!.route!.distance / 1000).toString() +
                  ' km')),
      body: GoogleTrackTraceMap(
        startPosition: const Marker(
          markerId: MarkerId('Start location'),
          position: LatLng(52.356057, 4.897540),
        ),
        destinationPosition: const Marker(
            markerId: MarkerId('Destination location'),
            position: LatLng(52.364709, 4.877157)),
        googleAPIKey: '', // put your own API key here
        travelMode: TravelMode.bicycling,
        routeUpdateInterval: 60,
        timerPrecision: TimePrecision.everySecond,
        zoomGesturesEnabled: true,
        line: const Polyline(
          polylineId: PolylineId('test route'),
          color: Colors.purple,
          width: 7,
        ),
        onMapCreated: (ctr) => {
          controller = ctr,
          ctr.addListener(() {
            setState(() {});
          }),
        },
      ),
    );
  }
}

See the example directory for a complete sample app.