sl_map_location_picker

Location picker for Flutter using the official google_maps_flutter plugin.

This package is a maintained, null safe fork of the original google_map_location_picker plugin created after Google deprecated the old Place Picker.

Features

Full screen map based location picker
Uses official google_maps_flutter
Supports current device location and permissions
Built in reverse geocoding of the selected point
Places autocomplete with optional country restrictions
Localization support for messages and dialogs
Flutter 3 and Dart 3 compatible, null safe

Installation

In your pubspec.yaml:

dependencies:
  google_maps_flutter: ^2.9.0
  sl_map_location_picker: ^4.0.0
  flutter_localizations:
    sdk: flutter

Run:

flutter pub get

Localization setup

For message localization inside the library, add the delegates to your MaterialApp:

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:sl_map_location_picker/generated/l10n.dart' as location_picker;

MaterialApp(
  localizationsDelegates: const [
    location_picker.S.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: const <Locale>[
    Locale('en', ''),
    Locale('ar', ''),
    // add more locales if you generate them
  ],
  home: const MyHomePage(),
);

Basic usage

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:sl_map_location_picker/sl_map_location_picker.dart';

Future<void> _openLocationPicker(BuildContext context) async {
  const apiKey = 'YOUR_GOOGLE_MAPS_API_KEY';

  final LocationResult? result = await showLocationPicker(
    context,
    apiKey,
    initialCenter: const LatLng(31.1975844, 29.9598339),
    myLocationButtonEnabled: true,
    layersButtonEnabled: true,
  );

  if (result != null) {
    debugPrint('Selected location: ${result.latLng}');
    debugPrint('Address: ${result.address}');
    debugPrint('PlaceId: ${result.placeId}');
  }
}

Getting started with Google Maps Platform

Get an API key at https://cloud.google.com/maps-platform/
In the Google Cloud Console, enable the following APIs: https://console.cloud.google.com/google/maps-apis/
- Maps SDK for Android
- Maps SDK for iOS
- Places API
- Geolocation API
- Geocoding API
Ensure billing is enabled for the project.

Android setup

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_API_KEY_HERE" />
  </application>
</manifest>

Recommended permissions and features in the same manifest:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-feature
    android:name="android.hardware.location.network"
    android:required="false" />
<uses-feature
    android:name="android.hardware.location.gps"
    android:required="false" />

The following permissions are automatically merged from the plugin manifest, you do not need to add them yourself:

android.permission.INTERNET
android.permission.ACCESS_NETWORK_STATE

iOS setup

AppDelegate Objective C

ios/Runner/AppDelegate.m:

#import "AppDelegate.h"
#import "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR_API_KEY_HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

AppDelegate Swift

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_API_KEY_HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Info.plist

Opt in to embedded views and declare the location usage description in ios/Runner/Info.plist:

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs your location to test the location feature of the map location picker plugin.</string>

<key>io.flutter.embedded_views_preview</key>
<true/>

Restricting autocomplete search to region

You can restrict autocomplete and results to specific countries by passing a list of country codes (ISO 3166-1 alpha 2) to the countries parameter of showLocationPicker.

Example that restricts search to United Arab Emirates and Nigeria:

final LocationResult? result = await showLocationPicker(
  context,
  'YOUR_API_KEY_HERE',
  initialCenter: const LatLng(31.1975844, 29.9598339),
  myLocationButtonEnabled: true,
  layersButtonEnabled: true,
  countries: const ['AE', 'NG'],
);

Country codes reference:

Wikipedia: List of ISO 3166 country codes
ISO Online Browsing Platform: https://www.iso.org/obp/ui/#search

Notes about permissions

Although not strictly required for the Maps SDK, the following permissions are recommended:

ACCESS_COARSE_LOCATION allows approximate location using WiFi or cell networks.
ACCESS_FINE_LOCATION allows precise location using GPS, WiFi and cell networks.

On Android 5.0 and above, you should also declare the corresponding hardware features when using these permissions, as shown in the Android section.

Credits

This plugin builds on the work of several packages:

Map rendering using Flutter official package google_maps_flutter
Location and permissions logic inspired by geolocator
Original search bar and UX inspired by locationpicker

Maintained and extended by Scrumlab Tecnologia for modern Flutter projects.