Easy Google Maps Setup Tutorial— Swift 5
A straight forward, step-by-step guide to integrating Google Maps
In today's piece, I will be showing you how to easily integrate Google maps into your app, as well as showing results of searched places through the API.
Before we begin the tutorial, I want to take a moment to compare and contrast the use of Google Maps and native MapKit.
Both are pretty similar in location searching and viewings. MapKit is native to Swift and so you wouldn’t need to install third-party dependencies. It also has a styling that’s more aligned with iOS patterns. Also, Google’s API costs money if you’re trying to make many fetch requests. Despite this, I’ll be implementing Google maps for this tutorial but if I were to use it in a bigger project, I would probably choose to use MapKit.
I hope this tutorial serves as purposeful to you in your projects and let’s jump right in! 😃
Step 1: Create an Xcode Project
To start, open Xcode and create a new project.
Once 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 Pods
I normally install pods through my terminal, so let's see how this is done!
This will create a new Podfile in our Xcode folder where we can add in any dependencies we want to use within our app.
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
Step 3: Get an API Key
Follow these steps carefully to get the API key.
Step 4: Set Up the Map View
Now 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:
3. Drag Map Kit View onto our view controller then we would want to add
constraints 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 IBOutlet
We 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 Controller
We want to embed in a navigation controller so we can replace the space of the navigation bar to be our search bar!
Step 6: Implement Google’s Search Controller Programmatically
Let’s go back to ViewController.swift file and finally start writing some code!!🎉🎉
Right below where we import MapKit, add another import statement:
Great, 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().
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 AppDelegate
Go ahead and
import GooglePlaces at the top of our AppDelegate file and within application didFinishLaunchingWithOptions method right before return true, add
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 GMSAutocompleteResultsViewControllerDelegate
GMSAutocompleteResultsViewControllerDelegate 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 Delegate
resultsViewController?.delegate = self
This 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 Selected
This 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.
Thank 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.