A straight forward, step-by-step guide to integrating Google Maps

Sarin Swift
May 25 · 6 min read

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.

Select ‘Create a new Xcode project’
Choose ‘Single View App’ and hit next
Add in a project name and hit next

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!

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 Key

Google Documentation for iOS Maps

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:

  1. Go in the interface builder to our view controller.
  2. Use the shortcut to open the objects library by holding these 3 keys:
    Shift + Command + L

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!

Select the Embed In button and select Navigation Controller

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:
import GooglePlaces

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().

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 AppDelegate

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

  1. We need this code so that resultsViewController will dismiss and display back to our map view.
  2. 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.
  3. 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.


Conclusion

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.

Better Programming

Advice for programmers.

Sarin Swift

Written by

iOS development💡 & Product design

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade