Google Maps iOS SDK Tutorial: Getting Started

In this tutorial, you’ll learn how to use the Google Maps iOS SDK to make an app that searches for nearby places to eat, drink or shop for groceries. By Ron Kliffer.

Leave a rating/review
Download materials
Save for later
Update note: Ron Kliffer updated this tutorial to Xcode 11, iOS 13, Swift 5 and Google Maps SDK 3.7.0. Ron also wrote the original.

Before 2012, Google Maps was the mapping engine for all iOS devices. That year, Apple made a dramatic change in iOS 6 by replacing Google Maps with an in-house mapping engine: MapKit.

A few months later, Google released its own standalone Google Maps app for iOS, along with the Google Maps iOS SDK for developers.

MapKit and the Google Maps iOS SDK each have their strengths and weaknesses. You’ll have to decide which one best fits your use case. If you decide to use the Google Maps SDK, this tutorial is for you!

In this tutorial, you’ll build an app called Feed Me, which gets the user’s current location and searches for nearby places to eat, drink or shop for groceries. In the process, you’ll learn how to use the Google Maps iOS SDK to:

  • Get the user’s location.
  • Show street addresses.
  • Present nearby search results.
  • Provide additional information for the places found.
Note:This tutorial uses CocoaPods to install the Google Maps SDK. To learn how to install and work with CocoaPods, read our CocoaPods Tutorial for Swift.

Getting Started

Use the Download Materials button at the top or bottom of this tutorial to download the project materials. This project already uses CocoaPods, so open Feed Me.xcworkspace.

Take a look around to get familiar with the project. Important things to notice are:

  • MapViewController.swift: The main view controller of this project and the only one you’ll modify in this tutorial.
  • GoogleDataProvider.swift: Wrapper class for making Google API calls. You’ll review the methods it contains later in the tutorial.
  • GooglePlace.swift: Model for place results returned from Google.
  • MarkerInfoView.swift: Subclass of UIView that displays details of places. It comes with a matching .xib file.

Before you start coding, build and run your app. You’ll see the following screen appear:

Starter project initial screen

Right now, all you’ll see is a blank screen with a pin in the middle. Next, press the action button on the right side of the navigation bar to see the TypesTableViewController screen:

Starter project type selection

That’s all there is to see in the app at the moment. It’s up to you to add some magic!

Creating the API Key

The first thing you’ll need is an API key for the Google Maps SDK and the Google API you’ll use. If you don’t already have a Google account, create one (they’re free!) and log in to the Google Developers Console.

Click Create to create a new project, name your project Feed Me and click Create:

Google developers console - create project

If your project doesn’t appear right away, refresh the page until it does. In the newly-created project, select Enable APIs and services:

Google developers console - enable APIs

Search for and enable these APIs:

  • Maps SDK for iOS
  • Places API

Select Credentials under APIs & Services in the left menu panel. Click Create Credentials, and then click API key to create the key:

Google developers console - generate API key

Before you can use the key, you’ll add the actual Google Maps iOS SDK. So keep the window open for the moment.

Adding the SDK

Open Podfile in the Pods project and add the following, right above end:

pod 'GoogleMaps', '~> 3.7.0'

Next, Open Terminal and navigate to the directory that contains your Feed Me project by using the cd command:

cd ~/Path/To/Folder/Containing/Feed Me

Enter the following command to install the Google Maps iOS SDK:

pod install

You should see output like the following:

Analyzing dependencies
Downloading dependencies
Installing GoogleMaps 3.7.0
Generating Pods project
Integrating client project

You now have GoogleMaps in your project. CocoaPods makes life a lot easier! :]

Open AppDelegate.swift and replace its contents with the following:

import UIKit
import GoogleMaps

let googleApiKey = "ENTER_KEY_HERE"

class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(
    _ application: UIApplication, 
    didFinishLaunchingWithOptions launchOptions: 
      [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    return true

There are two new elements here:

  1. A constant to hold your Google API key. Replace ENTER_KEY_HERE with the Google API key you created earlier.
  2. The instantiation of Google Maps services with your API Key using the GMSServices class method provideAPIKey().

Creating the Map View

Now that you have your API key in place you can log out and close the Google Developers Console window.

Adding a UIView

Start by opening Main.storyboard to bring up Interface Builder. Locate the MapViewController scene and drag a simple UIView from the Object Library to the approximate center of MapViewController‘s view. Use View ▸ Show Library to reveal the Object Library.

Change the view’s background color to light gray. Next, open the Document Outline using Editor ▸ Outline and re-order the view hierarchy so the object tree looks like this:

Document outline after adding the map UIView

To turn this simple UIView into a GMSMapView, select the view you just added and open the Identity inspector by selecting the third tab from the left in the Utilities toolbar. Change the view’s Class to GMSMapView, as shown in the screenshot below:

Change class to GMSMapView

Your MapViewController scene should now look like this:
Storyboard scene after adding the view

Adding the Constraints for the Map View

Next, you’ll add some constraints to make the map fill the entire screen.

Select Map View in the Document Outline then choose the middle button in the bottom-right corner of the Interface Builder window. This is the Pin button (also known as the “TIE fighter button”).

Ensure that Constrain to margins is unchecked — this ensures that the map will fill all the available space on the screen — and add 0 space constraints from the top, left, bottom and right of the superview.

Your Pin editor should look like this:

Pin editor for the map view's constraints

Click Add 4 Constraints to add the constraints to the map view.
Your MapViewController scene should look like the following, where the gray area represents the GMSMapView:

Storyboard scene after adding the constraints

Creating an Outlet for the Map View

Before you build and run the project, add an IBOutlet for the map view. To do that, bring up the Assistant Editor using the keyboard shortcut Command-Option-Control-Return.

Select the map view in Interface Builder, hold down the Control key and drag a line from the map view to MapViewController.swift. A pop-up will appear. Set the connection type to Outlet and Name to mapView. Keep the Type as GMSMapView and click Connect:

Adding the mapView outlet

This will create a GMSMapView property in MapViewController.swift and automatically connect it in Interface Builder. Finally, add the following to the top of the file, after import UIKit:

import GoogleMaps

Build and run; you’ll now see a map like this:

App screenshot after adding the map

You’re now using the Google Maps iOS SDK in your app. But you can do more than show a basic map, right? :] Your next step will be to customize the map for your user’s location.