(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

pod 'GooglePlaces'

2. Get the Google API key for your app

Google API Dashboard — Just click on the ‘Disable’ label
// AppDelegate.swiftimport GooglePlacesfunc 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

Add UITextField on the storyboard

4. Edit your source code

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.swiftimport 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

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.swiftimport GooglePlacesfunc 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 = attributedPlaceholderreturn 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:

I'm a Software Engineer based in Vancouver. Personal Interests: Books, Philosophy, Piano, Movies, Music, Studio Ghibli.