(iOS) Google Places Autocomplete API

Google Places SDK is one of the most powerful APIs which provides you with much information about places around the world. In this article, I’m going to show you how to use ‘Google Places Autocomplete API’ with UITextField.

Expected flow:
1. Tap the UITextField
2. The autocomplete controller comes up
3. Select a place name and go back to the original ViewController
4. The selected place name is displayed in the UITextField

You can check the sample code for this tutorial on my GitHub account.

1. Install ‘GooglePlaces’ pod

First, you need to install the API just like installing other APIs via Cocoapods. Add the line below to your Podfile and run the pod install command.

pod 'GooglePlaces'

2. Get the Google API key for your app

Next, go to Google API Console. Follow the instruction here and get the API key. Once you get the key, go to your AppDelegate.swift file and add the following code to authenticate your app. Before going to edit your source code, make sure to enable ‘ Places SDK for iOS’ from your Google API Dashboard.

Google API Dashboard — Just click on the ‘Disable’ label

// AppDelegate.swift
import GooglePlaces
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Set the Google Place API's autocomplete UI control 
  GMSPlacesClient.provideAPIKey("YourAPIKey")
return true
}

3. Create UI component for the GMSAutocompleteViewController

Go to your project folder and open ‘Main.storyboard’. Add UI component (in this case ‘UITextField’) whatever you like.

Add UITextField on the storyboard

4. Edit your source code

Now, it’s about time for implementing the function. In your ViewController.swift, add the following code. Then connect the ‘@IBOutelt’ and ‘@IBAction’ with the UITextField on your storyboard.

Make sure ‘@IBAction’ is called when ‘Editing Did Begin’. In order to connect the ‘@IBAction’ with the storyboard, right-click on the textField on your storyboard. Under the ‘Sent Events’ section, you should see ‘Editing Did Begin’. From the circle beside the ‘Editing Did Begin’, click and drag to the textField.

// ViewController.swift
import UIKit
import GooglePlaces
class ViewController: UIViewController {
  
  @IBOutlet weak var textField: UITextField!
override func viewDidLoad() {
    super.viewDidLoad()
  }
// Present the Autocomplete view controller when the textField is tapped.
  @IBAction func textFieldTapped(_ sender: Any) {
    textField.resignFirstResponder()
    let acController = GMSAutocompleteViewController()
    acController.delegate = self
    present(acController, animated: true, completion: nil)
  }
}
extension ViewController: GMSAutocompleteViewControllerDelegate {
  func viewController(_ viewController: GMSAutocompleteViewController, didAutocompleteWith place: GMSPlace) {
    // Get the place name from 'GMSAutocompleteViewController'
    // Then display the name in textField
    textField.text = place.name
// Dismiss the GMSAutocompleteViewController when something is selected
    dismiss(animated: true, completion: nil)
  }
func viewController(_ viewController: GMSAutocompleteViewController, didFailAutocompleteWithError error: Error) {
    // Handle the error
    print("Error: ", error.localizedDescription)
  }
func wasCancelled(_ viewController: GMSAutocompleteViewController) {
    // Dismiss when the user canceled the action
    dismiss(animated: true, completion: nil)
  }
}

Connect the ‘IBAction’ with ‘Editing Did Begin’ event

5. Customize the interface of GMSAutocompleteViewController

At this time, you should have the UITextView working with ‘Google Places API’. However, The UI of the GMSAutocompleteViewController still remains in the default style. You can customize the UI in your AppDelegate.swift. The following sample code is written in Swift 4. You can go to the official documentation for more information.

NOTE: This part is written in Objective-C in the official documentation. Even though you can use an online converter from Objective-C to Swift, the code still might give you some errors related to the new property called ‘NSAttributedString.Key’.

// AppDelegate.swift
import GooglePlaces
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Set the Google Place API's autocomplete UI control
  GMSPlacesClient.provideAPIKey(GOOGLE_PLACES_API_KEY)
// Customize the UI of GMSAutocompleteViewController
// Set some colors (colorLiteral is convenient)
  let barColor: UIColor =  _ColorLiteralType(red: 0.5843137503, green: 0.8235294223, blue: 0.4196078479, alpha: 1)
let backgroundColor: UIColor =  _ColorLiteralType(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
let textColor: UIColor =  _ColorLiteralType(red: 0.501960814, green: 0.501960814, blue: 0.501960814, alpha: 1)
// Navigation bar background.
  UINavigationBar.appearance().barTintColor = barColor
  UINavigationBar.appearance().tintColor = UIColor.white
// Color and font of typed text in the search bar.
  let searchBarTextAttributes = [NSAttributedString.Key.foregroundColor: textColor, NSAttributedString.Key.font: UIFont(name: "Helvetica Neue", size: 16)]
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).defaultTextAttributes = searchBarTextAttributes as [NSAttributedString.Key : Any]
// Color of the placeholder text in the search bar prior to text entry
  let placeholderAttributes = [NSAttributedString.Key.foregroundColor: backgroundColor, NSAttributedString.Key.font: UIFont(name: "Helvetica", size: 15)]
// Color of the default search text.
  let attributedPlaceholder = NSAttributedString(string: "Search", attributes: placeholderAttributes as [NSAttributedString.Key : Any])
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).attributedPlaceholder = attributedPlaceholder
return true
}

Tap the UITextField -> Select the place name -> Showing the place name in the UITextField

That was everything you need to implement Google Places Autocomplete API working with UITextField. Actually, it’s pretty easy!

Sample code is available here.

Reference:

• Google Place Autocomplete:
  https://developers.google.com/places/ios-sdk/autocomplete
• StackOverflow
  https://stackoverflow.com/questions/27604192/ios-how-to-segue-programmatically-using-swift
• Apoorv Mote
  https://blog.apoorvmote.com/segue-when-tapped-on-textfield-pass-data-through-navigation-back-button-ios-swift/