[ios | swift] 구글 place api로 장소 검색기능 구현하기

구글 place api를 사용하면, 네이버나 구글 같은 포털에서 보았던 장소 검색 기능을 구현할 수 있다.

우선, place api를 사용하기 위해 구글 클라우드에 프로젝트를 연동해서 place api를 활성화를 시켜주어야 한다.

https://developers.google.com/maps/documentation/places/ios-sdk/cloud-setup?hl=ko 

Setting up in the Google Cloud Console  |  Places SDK for iOS

위의 링크에 나와있는 대로, 먼저 google cloud에 결제 계정 연동 & place api 사용을 위한 키를 발급 받자.

그리고, 그 이후에 코드를 짜면 된다.

 

먼저, 검색 기능을 구현하기 위해서는 searchbar가 필요하다. searchbar를 먼저 구현해주자.

searchbar를 구현하기 전에 주의해야할 점은, iphone x 부터는 노치 디자인이 적용되었기 때문에 윗 공간에 safe area를 확보해서 적용을 해주어야 한다.

class MainViewController: UIViewController {
  let searchbar = UISearchBar()
  var safeArea: UIView!

  override func viewDidLoad() {
    super.viewDidLoad()
    searchbar.barTintColor = .clear
    searchbar.barStyle = .black
    searchbar.backgroundColor = .white
    searchbar.isTranslucent = true
    searchbar.setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
    searchbar.delegate = self
    searchbar.showsCancelButton = true
    searchbar.placeholder = "장소, 주소를 검색해보세요"
    view.addSubview(searchbar)

    searchbar.snp.makeConstraints {
      $0.top.equalToSuperview().offset(44)
      $0.left.equalToSuperview().offset(0)
      $0.right.equalToSuperview().offset(0)
    }

    self.safeArea = UIView().then {
      $0.backgroundColor = .white
    }

    view.addSubview(self.safeArea)
    self.safeArea.snp.makeConstraints {
      $0.top.equalToSuperview()
      $0.left.equalToSuperview()
      $0.right.equalToSuperview()
      $0.bottom.equalTo(searchbar.snp.top)
    }
  }
}

extension MainViewController: UISearchBarDelegate {
    
    func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {

    }
    
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        
    }
    
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {

    }
}

Searchbar를 사용하기 위해서는 UISearchBarDelegate를 상속받아야한다.

그리고 searchBarTextDidBeginEditing(), searchBarCancelButtonClicked(), searchBar() 함수를 정의해줄 것이다.

1. searchBarTextDidBeginEditing() : 서치바 터치 후, 검색창 입력을 시작했을 때 호출되는 함수

2. searchBarCancelButtonClicked() : 서치바 옆의 cancel 버튼을 터치하면 호출되는 함수

3. searchBar : 서치바에서 검색어가 편집될 때마다 호출되는 함수

 

이렇게 한 후, 실행하면 아래와 같은 화면이 만들어질 것이다.

이제, 여기에 google place api를 사용해서 장소 검색 기능을 만들어보자

장소 검색 기능은 테이블 형태로 표현이 되므로, tableview를 사용할 것이다.

private var tableView: UITableView!
private var tableDataSource: GMSAutocompleteTableDataSource!

이 두 변수를 viewDidLoad() 함수 전에 선언해주자.

그리고, viewDidLoad() 함수 안에 아래와 같은 코드를 추가해준다.

tableDataSource = GMSAutocompleteTableDataSource()
tableDataSource.delegate = self

tableView = UITableView(frame: CGRect(x: 0, y: 100, width: self.view.frame.size.width, height: self.view.frame.size.height - 44))
tableView.delegate = tableDataSource
tableView.dataSource = tableDataSource

그리고, api를 사용하기 위한 extension을 선언해주어야 한다.

extension MainViewController: GMSAutocompleteTableDataSourceDelegate {
    func didUpdateAutocompletePredictions(for tableDataSource: GMSAutocompleteTableDataSource) {
        // Turn the network activity indicator off.
        UIApplication.shared.isNetworkActivityIndicatorVisible = false
        // Reload table data.
        tableView.reloadData()
    }

    func didRequestAutocompletePredictions(for tableDataSource: GMSAutocompleteTableDataSource) {
        // Turn the network activity indicator on.
        UIApplication.shared.isNetworkActivityIndicatorVisible = true
        // Reload table data.
        tableView.reloadData()
    }

    func tableDataSource(_ tableDataSource: GMSAutocompleteTableDataSource, didAutocompleteWith place: GMSPlace) {
        // Do something with the selected place.
        print("Place: \(place)")
        print("Place name: \(place.name)")
        print("Place address: \(place.formattedAddress)")
        print("Place attributions: \(place.attributions)")

        for sub in self.view.subviews {
            if let subview = sub as? UITableView {
                sub.removeFromSuperview()
                break
            }
        }
        searchbar.endEditing(true)
        searchbar.text = ""
    }

    func tableDataSource(_ tableDataSource: GMSAutocompleteTableDataSource, didFailAutocompleteWithError error: Error) {
        // Handle the error.
        print("Error: \(error.localizedDescription)")
    }

    func tableDataSource(_ tableDataSource: GMSAutocompleteTableDataSource, didSelect prediction: GMSAutocompletePrediction) -> Bool {
        return true
    }
}

이 코드는 검색을 하기 전, 후, 하는 중에 어떻게 처리할 것인지 작성한 코드이다.

그리고, searchbar 관련 처리도 추가해주어야 한다.

extension MainViewController: UISearchBarDelegate {
    
    func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
        view.addSubview(tableView)
    }
    
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        for sub in self.view.subviews {
            if let subview = sub as? UITableView {
                sub.removeFromSuperview()
                break
            }
        }
        searchbar.endEditing(true)
        searchbar.text = ""
    }
    
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        // Update the GMSAutocompleteTableDataSource with the search text.
        tableDataSource.sourceTextHasChanged(searchText)
    }
}

이렇게 코드를 추가해주면, 아래와 같이 구현될 것이다.