Google Place Picker
A Google Maps Place Picker for Flutter apps
A flutter package to simplify implementation of picking places from google maps and using the information in app.
- Easy Implementation
- Saves time on development
- Awesome Package
- Quick to deploy
Follow Me
Features
- Pick place on google map
- Search specific location or address
- Use the GPS and the current location
- Fully customizable
- Connectivity handling
- Permissions handling
Demo Preview
Getting Started
-
Get an API key at 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
inandroid/app/build.gradle
:
android {
defaultConfig {
minSdkVersion 20
}
}
This means that app will only be available for users that run Android SDK 20 or higher.
- Make sure you set the
compileSdkVersion
in your "android/app/build.gradle" file as per your preference. Mine is 31:android { compileSdkVersion 31 ... }
- 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"/>
- Add the following to your "gradle.properties" file:
android.useAndroidX=true android.enableJetifier=true
- Make sure you replace all the
android.
dependencies to their AndroidX counterparts (a full list can be found Android migration guide).
iOS
To set up, specify your API key in the application delegate ios/Runner/AppDelegate.m
:
Specify your API key in the application delegate ios/Runner/AppDelegate.swift
:
#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)
}
}
On iOS you'll need to add the following entries to your Info.plist file (located under ios/Runner) in order to access the device's location.
Simply open your Info.plist file and add the following:
<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app needs access to location when open and in the background.</string>
In addition, you need to add the Background Modes
capability to your XCode project (Project > Signing and Capabilties > "+ Capability" button) and select Location Updates
.g>This app needs access to location when open and in the background.
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
.
<key>io.flutter.embedded_views_preview</key>
<true/>
Usage
Basic usage
You can use GooglePlacePicker by pushing to a new page using Navigator, OR put as a child of any widget. When the user picks a place on the map, it will return result to 'getAddress' with CompleteAddress type.
import 'package:flutter/material.dart';
import 'package:google_place_picker/google_place_picker.dart';
// ...
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => GooglePlacePicker(
apiKey: "YOU GOOGLE MAPS API KEY",
getAddress: (CompleteAddress completeAddress) {
print('${completeAddress.completeAddress}');
/// Don't use Navigator.of(context).pop() it's built-in
},
),
),
);
Note
Searching for a place feature needs a paid google map api key. With free key map and picking a place feature will work correctly without any error. But searching for a place feature will not work.
Google Maps Pick Place Properties
Parameter | Type | Description |
---|---|---|
apiKey | String | Google Map Api Token |
mapLocale | MapLocale | map's language used in search and other widgets |
getAddress | Function(CompleteAddress)? | Method of Getting the address and position |
initialPosition | LatLng | Initial position of the map in case there's no location and GPS is off |
enableMyLocationButton | bool | Enable or disable the My Location button |
enableSearchButton | bool | Enable or disable the Search button |
loader | Widget | Widget to show while the map is loading |
doneButton | Widget? | Widget to show when the map is done loading and apply getResult method |
errorButton | Widget? | Widget to show when there's a corruption or there's no internet connection |
zoomFactor | double | Zoom factor of the map (default is 5.0) |
markerColor | MarkerColor | Marker color of the map (default is red) |
CompleteAddress Properties
Parameter | Type | Description |
---|---|---|
address | String? | Formatted address |
position | Position? | Position of the address |
This package supports all platforms listed below.
platforms: android: ios:
License
MIT
Sponsors
Libraries
- address_label
- description_text_widget
- fetched_address_model
- get_response_phrases_model
- locale
- map_screen
- map_view
- map_view_model
- on_camera_move
- permission_checker
- place_picker
- Google Place Picker enables developers implement a google maps interface where a user can search and select a particular location of choice and get the city name (Administrative area), coordinates and a complete formatted address
- response_phrases
- response_phrases_model
- search
- search_list
- search_text_field
- search_widget
- title_text_widget
- unit_function
- with_shadow_container