google_maps_place_picker

google_maps_place_picker provides ‘Picking Place’ using Google Maps widget.

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”.
– Make sure the APIs you enabled are under the “Enabled APIs” section
You can also find detailed steps to get started with Google Maps Platform here.

You may also explore our Flutter app development page.

Advantages of google_maps_place_picker

Well designed UI which will enhance your application designs.
Not required too much code and also easy to implement.
You can move your map as well to pick location.
Customize the theme and designs of the package.
Map switch button between Normal and Hybrid.

1. Setup For 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"/>

<manifest ...

<application ...

android:value="YOUR KEY HERE"/>

Note:- Make sure you are using androidX environment for your android project development.

2. Setup For 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

#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: [UIApplicationLaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

import UIKit

import Flutter

import GoogleMaps

@UIApplicationMain

@objc class AppDelegate: FlutterAppDelegate {

override func application(

_ application: UIApplication,

didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: 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>

<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 preview of the embedded view 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/>

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

Now let’s start with the flutter

Add the below-mentioned package in your pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter

  google_maps_place_picker: 1.0.1

dependencies:

flutter:

sdk: flutter

google_maps_place_picker: 1.0.1

Basic usage

You can use PlacePicker 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 ‘onPlacePicked’ with PickResult type. Alternatively, you can build your own way with ‘selectedPlaceWidgetBuilder’ and fetch result from it (See the instruction below).

Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PlacePicker(
          apiKey: "@YOUR API KEY HERE"
          onPlacePicked: (result) { 
            print(result.address); 
            Navigator.of(context).pop();
          },
          initialPosition: HomePage.kInitialPosition,
          useCurrentLocation: true,
        ),
      ),
    );

Navigator.push(

context,

MaterialPageRoute(

builder: (context) => PlacePicker(

apiKey: "@YOUR API KEY HERE"

onPlacePicked: (result) {

print(result.address);

Navigator.of(context).pop();

initialPosition: HomePage.kInitialPosition,

useCurrentLocation: true,

);

Customize Pin

By default, the Pin icon is provided with very simple picking animation when moving around.
However, you can also create your own pin widget using ‘pinBuilder’

PlacePicker(apiKey: "Your API KEY",
            ...
            pinBuilder: (context, state) {
                  if (state == PinState.Idle) {
                    return Icon(Icons.favorite_border);
                  } else {
                    return AnimatedIcon(.....);
                  }
                },
            ...                        
          ),
...

PlacePicker(apiKey: "Your API KEY",

...

pinBuilder: (context, state) {

if (state == PinState.Idle) {

return Icon(Icons.favorite_border);

} else {

return AnimatedIcon(.....);

}

...

Check this video for output

To know more about google_maps_place_picker please check this link

Hopefully, this blog will be helpful to you to understand the Google Maps Place Picker. If you have any queries, please write them in the comment section.

Vipul Chauhan 29 April 2023

. . .