????Step 1: Create an Xcode ProjectTo start, open Xcode and create a new project.
Select ‘Create a new Xcode project’Choose ‘Single View App’ and hit nextAdd in a project name and hit nextOnce we’ve hit next, save the newly created project to the preferred destination on your computer.
Now we have our app up and running.
Step 2: Install Google PodsI normally install pods through my terminal, so let's see how this is done!Drag your Xcode main file in the terminal and type ‘pod init’This will create a new Podfile in our Xcode folder where we can add in any dependencies we want to use within our app.
Add in the following dependencies, save the file, and then type ‘pod install’ in terminal❗️Important❗Once the pods are installed, close out of the Xcode project and in your project file, you’ll see a white file named .
xcworkspace.
From now on, we will only be working with the workspace file, not the.
xcodeproj!Step 3: Get an API KeyGoogle Documentation for iOS MapsFollow these steps carefully to get the API key.
Step 4: Set Up the Map ViewNow we can begin setting up the map view:Go in the interface builder to our view controller.
Use the shortcut to open the objects library by holding these 3 keys:Shift + Command + L3.
Drag Map Kit View onto our view controller then we would want to addconstraints to all 4 sides: top, leading, bottom, and trailing.
After clicking ‘Add 4 Constraints’, the map view should cover almost the whole view controller.
4.
Time to connect our map view to the file ViewController.
swift through connecting them with an IBOutletWe will have an error Use of undeclared type ‘MKMapView’ and all we need to do to fix this is add ‘import MapKit’ at the top of our ViewController file, right under ‘import UIKit’.
Step 5: Embed the View Controller in a Navigation ControllerWe want to embed in a navigation controller so we can replace the space of the navigation bar to be our search bar!Select the Embed In button and select Navigation ControllerStep 6: Implement Google’s Search Controller ProgrammaticallyLet’s go back to ViewController.
swift file and finally start writing some code!!????????Right below where we import MapKit, add another import statement: import GooglePlacesGreat, now we have GooglePlaces so we can use GMSAutocompleteResultsViewController.
GMSAutocompleteResultsViewController provides an interface that displays locations in a table view and the results within the table view will update as the text changes in the search bar.
var resultsViewController: GMSAutocompleteResultsViewController?var searchController: UISearchController?The search bar is going to be set up in viewDidLoad().
Let’s go ahead and create a function called setupSearchBar() and call it in viewDidLoad().
Now we have the map with a search bar!Looking great so far!.However, we’re a couple more steps away from getting this search bar to display the results.
If you type something, the app will crash because we haven’t provided an API key yet.
Step 7: Initialize an API key in AppDelegateGo ahead and import GooglePlaces at the top of our AppDelegate file and within application didFinishLaunchingWithOptions method right before return true, add GMSPlacesClient.
provideAPIKey(“your_api_key_here”)The app should be working now with the results of places showing up on the search bar table view.
Seems to be working!.But how could this be a well-functioning app if we can’t select the location and display it on the map?Step 8: Add GMSAutocompleteResultsViewControllerDelegateGMSAutocompleteResultsViewControllerDelegate allows communication between the user’s interaction and the controller to the application.
This would be the interaction when a user selects one of the places of the results in the table view.
Let’s create an extension(below and outside of the class) of ViewController and conform to the protocol.
There are 2 protocol stubs that are required to conform to:didAutocompleteWithPlace which calls when a place has been selected from the available autocomplete predictions.
didFailAutocompleteWithError which calls when an error occurred when retrieving autocomplete predictions or place details.
Step 9: Confirm ResultsViewController as the DelegateresultsViewController?.
delegate = selfThis code can go in viewDidLoad(), or the setupSearchController method right after you initialize an instance of GMSAutocompleteViewController.
Step 10: Drop a Map Pin to a Location the User SelectedThis is our last step!!.We are so close to completing the entire project.
????????We will be getting users location and adding an annotation to the map.
We need this code so that resultsViewController will dismiss and display back to our map view.
We remove any current annotations that are on the map.
This will always allow only 1 pin to be on the map.
This creates the zooming in close to the map pin we’re going to add in.
Create an instance of MKPointAnnotation where we give the correct detail of the location based on the place the user selected.
And then we add this annotation to the map!As for the last thing to add in:You might want to handle this error some other way such as bringing up an alert controller to notify the user.
ConclusionThank you for checking out this blog post!.If you have any questions or comments, please feel free to reach out to me Don’t forget to give this article some claps if you found it helpful.
.