Skip to content

Releases: rithik-dev/google_maps_widget

v2.0.0

Choose a tag to compare

@github-actions github-actions released this 09 Aug 16:02
  • BREAKING: Routes now come from the Google Routes API instead of the legacy Directions API, which Google no longer allows to be enabled on new Cloud projects. Enable the Routes API on your key. Because it reports distance and duration numerically rather than as localized text, totalDistanceCallback now receives an int of metres and totalTimeCallback a Duration, and DirectionsException is now RoutesApiException. Format the values for display yourself so they match your app's locale.
  • BREAKING: Raised the minimum SDK to Flutter 3.38.0 / Dart 3.10.0, required by google_maps_flutter 2.18.0. See the migration guide.
  • BREAKING: Raised the platform minimums that come with the newer google_maps_flutter: Android minSdk 24 and Gradle 8.7.0 or newer, iOS deployment target 14.0. The migration guide lists the exact versions to change.
  • FIX: Changing sourceLatLng or destinationLatLng and rebuilding now updates the markers and recalculates the route. Previously the coordinates were only read once, so the only way to move the route was the setSourceLatLng / setDestinationLatLng methods on the state.
  • FIX: Bug where updating the source or destination could leave the previous route drawn on the map, because the old and new polylines shared an id and only one of them survived.
  • FIX: Crash (setState() called after dispose()) when the widget was removed from the tree while a marker image or a route was still loading.
  • FIX: The map controller is no longer disposed twice, which could throw when the widget was disposed.
  • FIX: Hiding the driver marker by setting isVisible to false now removes it from the map instead of leaving the last one stranded.
  • FIX: Crash when the routing API returned whole-number coordinates.
  • FIX: A failing route request no longer throws an uncaught exception; the map still renders without the route.
  • Added onError, called with a RoutesApiException when a route cannot be fetched. A key without the Routes API enabled, or a project without billing, was previously indistinguishable from the map simply not working. Errors are also logged to the console in debug builds.
  • Added style and colorScheme for theming the map, which is how dark mode is applied. style takes a Google Maps style JSON and can be changed at any time, so the map follows an in-app light/dark toggle; deciding which style to show is left to you. colorScheme uses Google's built-in schemes but is only read when the map is created, so it cannot follow a runtime toggle.
  • Added the remaining GoogleMap passthrough parameters: clusterManagers, groundOverlays, heatmaps, markerType, fortyFiveDegreeImageryEnabled, fullscreenControlEnabled, mapTypeControlEnabled, streetViewControlEnabled, webCameraControlEnabled, webCameraControlPosition and webGestureHandling.
  • Route requests now time out instead of hanging indefinitely, and reuse a single client. Added routesConnectTimeout and routesReceiveTimeout to configure the limits, both defaulting to 15 seconds.
  • Updated dependencies: google_maps_flutter to 2.18.0, dio to 5.11.0, flutter_lints to 6.0.0.
  • Added a test suite covering route parsing and error handling.
  • Updated the example app to demonstrate dark mode, error handling, declarative source updates, and the route's total distance and time.
  • FIX: The example app's iOS target never called GMSServices.provideAPIKey, so the map could not render on iOS whatever key was set. The call lived in an AppDelegate.m that was not part of the Xcode project and imported a header that did not exist; it has been removed and the key is now provided from the AppDelegate.swift that actually builds.
  • The example app no longer needs the API key committed. Put it in a gitignored example/.env and run with --dart-define-from-file=.env, which covers the Dart code, the Android manifest and the iOS Info.plist from one entry, the last through a build phase that decodes DART_DEFINES. Checked-in VS Code launch configurations read the same file, so pressing F5 needs no setup. All three fall back to a PASTE_GOOGLE_MAPS_API_KEY_HERE placeholder.
  • The example README now covers the requirements, how to get a key, and how to build and run on each platform.
  • Documented where the API key is needed, and why an application restricted key cannot authorise the Routes API call.
  • Added a screenshot to the package listing, so pub.dev now shows a thumbnail in search results and a gallery on the package page.
  • README: dropped the popularity and code size badges, which had stopped being useful, added a downloads badge, and added links to the author's portfolio and other packages.
  • README: the screenshots are now served from this repository instead of GitHub's attachment CDN, which was outside the repo's control and could have gone stale.

google_maps_widget 2.0.0 on pub.dev

v1.0.8

Choose a tag to compare

@github-actions github-actions released this 28 Jul 11:27
  • Maintenance release; no user-facing changes.

google_maps_widget 1.0.8 on pub.dev

v1.0.7

Choose a tag to compare

@github-actions github-actions released this 27 Jul 23:26
  • Added GitHub Actions CI to automate version bumps, changelog updates, tagging and pub.dev publishing.

v1.0.6

Choose a tag to compare

@rithik-dev rithik-dev released this 25 Jan 21:40
  • FIX: Bug where assetMarkerSize in MarkerIconInfo does not apply if icon is passed.
  • Fix Dart static analysis warnings
  • Updated README.md
  • Updated example app
  • Updated dependencies

v1.0.5+1

Choose a tag to compare

@rithik-dev rithik-dev released this 25 Oct 13:30
  • Updated README.md

v1.0.5

Choose a tag to compare

@rithik-dev rithik-dev released this 25 Oct 13:22
67fac6c
  • BREAKING: MarkerIconInfo inputs are now non-nullable
  • BREAKING: Added properties onTapMarker, onTapInfoWindow, infoWindowTitle and isVisible to MarkerIconInfo, and removed corresponding params for source, destination, driver from GoogleMapsWidget
  • Changed internal implementation of the widget
  • Added layoutDirection property
  • Added onPolylineUpdate callback
  • Exposed state class to allow updating source/destination lat lng, or interacting with google maps con directly
  • Updated a dependency to the latest release
  • Updated example app
  • Updated README.md

v1.0.4

Choose a tag to compare

@rithik-dev rithik-dev released this 15 Jun 10:35
  • Added updatePolylinesOnDriverLocUpdate to update directions based on current driver location
  • Updated dependencies
  • Updated example app
  • Updated README.md

v1.0.3

Choose a tag to compare

@rithik-dev rithik-dev released this 14 Jun 07:29
181979c
  • Added rotation and anchor to MarkerIconInfo
  • Updated README.md

v1.0.2

Choose a tag to compare

@rithik-dev rithik-dev released this 07 Jun 10:12
  • Updated dependencies
  • Updated linter warnings

v1.0.1

Choose a tag to compare

@rithik-dev rithik-dev released this 26 Jan 11:36

GoogleMapsWidget For Flutter

pub package
likes
popularity
pub points

A widget for flutter developers to easily integrate google maps in their apps. It can be used to make polylines from a source to a destination, and also handle a driver's realtime location (if any) on the map.

Features

  • Make polylines (route) between two locations by providing the latitude and longitude for both the locations.
  • The route is customizable in terms of color and width.
  • The plugin also offers realtime location tracking for a driver(if any) and shows a marker on the map which updates everytimes the driver's location changes.
  • All the markers are customizable.
  • onTap callbacks are implemented for all the markers and their info windows to easily handle user interaction.
  • Almost all the parameters defined in google_maps_flutter for the GoogleMap widget can be passed as arguments to the widget.

Screenshots

      

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".
    • To enable Directions API, select "Directions API" 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

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)
  }
}

Web

Modify web/index.html

Get an API Key for Google Maps JavaScript API. Get started here.
Modify the <head> tag of your web/index.html to load the Google Maps JavaScript API, like so:

<head>

  <!-- // Other stuff -->

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

Usage

To use this plugin, add google_maps_widget as a dependency in your pubspec.yaml file.

  dependencies:
    flutter:
      sdk: flutter
    google_maps_widget:

First and foremost, import the widget.

import 'package:google_maps_widget/google_maps_widget.dart';

You can now add a GoogleMapsWidget widget to your widget tree and pass all the required parameters to get started.
This widget will create a route between the source and the destination LatLng's provided.

GoogleMapsWidget(
    apiKey: "YOUR KEY HERE",
    sourceLatLng: LatLng(40.484000837597925, -3.369978368282318),
    destinationLatLng: LatLng(40.48017307700204, -3.3618026599287987),
),

Sample Usage

import 'package:flutter/material.dart';
import 'package:google_maps_widget/google_maps_widget.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: GoogleMapsWidget(
            apiKey: "YOUR KEY HERE",
            sourceLatLng: LatLng(40.484000837597925, -3.369978368282318),
            destinationLatLng: LatLng(40.48017307700204, -3.3618026599287987),

            ///////////////////////////////////////////////////////
            //////////////    OPTIONAL PARAMETERS    //////////////
            ///////////////////////////////////////////////////////

            routeWidth: 2,
            sourceMarkerIconInfo: MarkerIconInfo(
              assetPath: "assets/images/house-marker-icon.png",
            ),
            destinationMarkerIconInfo: MarkerIconInfo(
              assetPath: "assets/images/restaurant-marker-icon.png",
            ),
            driverMarkerIconInfo: MarkerIconInfo(
              assetPath: "assets/images/driver-marker-icon.png",
              assetMarkerSize: Size.square(125),
            ),
            // mock stream
            driverCoordinatesStream: Stream.periodic(
              Duration(milliseconds: 500),
              (i) => LatLng(
                40.47747872288886 + i / 10000,
                -3.368043154478073 - i / 10000,
              ),
            ),
            sourceName: "This is source name",
            driverName: "Alex",
            onTapDriverMarker: (currentLocation) {
              print("Driver is currently at $currentLocation");
            },
            totalTimeCallback: (time) => print(time),
            totalDistanceCallback: (distance) => print(distance),

            /// and a lot more...
          ),
        ),
      ),
    );
  }
}

See the example directory for a complete sample app.

Created & Maintained By Rithik Bhandari