Putting you on the map: a step by step iOS intro to Google Maps

This blog aims to show a detailed step by step general view on how to setup Google Maps on an iOS app.

For this blog, the task will be to put a Google Maps marker at The Flatiron School so that everyone will know where I’m studying.

Step 1 — Install Cocoapods

Google Maps SDK is available as a Cocoapods pod. Some of you may look like this 🤔 when you hear the terms Cocoapods pod and SDK. Don’t worry, that’s fine. Not too long ago, I had the same look on my face. Let’s first go with the easy one — SDK. SDK means Software Developer Kit. Cocoapods is a tool that manages library dependencies for your Xcode projects. In other words, Cocoapods are tools that makes our lives easier to develop software.

If you don’t have Cocoapods installed yet, just go to the Terminal (press Command + Space and write Terminal). Once there, type:

sudo gem install cocoapods

Wait until the installation finishes and write “pod”. If you see this image, congratulations! You have Cocoapods installed.

If you have more questions about this, go to https://cocoapods.org/

Step 2 — Create a Podfile

First create a project in your Xcode. For the sake of this blog, we will create a single view project called “Google Maps”. Then, open the Terminal and go to the directory containing your project. Once there, type “pod init”. That will create a pod file called “Podfile”.

The next step is to edit that file to add the Google Maps dependencies. We will do this by opening the file with a text editor. I use Atom (https://atom.io/). If you don’t, I highly recommend that you to start using it. If you have Atom, just write “atom Podfile” in the terminal and the pod file will open in Atom for our edition.

Add “pod ‘GoogleMaps’“ in the file and save (control + S). Your file should look like this:

Finally, we are ready to install our Podfile in our project. To do that we just type “pod install” and we’re done! If you see this message, give yourself a pat on the back. You just installed Google Maps dependencies in your project.

Step 3 — Get an API key from Google

Before you give me the 🤔 look again, let me explain what an API is. API means Application Programming Interface and they are a set of definitions, protocols and tools to make our life easier in terms of developing software. When a company releases an API, they give you a key to use so they can track who is using their API and put conditions on how you will use it.

Now that we know what an API means and why we need a key, we can move forward and create our own Google Maps key. To do that, go to this website https://console.developers.google.com/flows/enableapi?apiid=maps_ios_backend&reusekey=true

Next, click on “create a project” if you don’t have one, or pick your project if you, like me, have already one created. Click continue.

Now click on “API key” and you should set a “Name”, select the Key restriction, in our case “iOS apps” and choose an identifier. To see which are the best practices on API key security go to this link: https://support.google.com/googleapi/answer/6310037?hl=en

Click continue and you should get your key 🔑.

Step 4 — Let’s code!

Now we are ready to code and put the map in our app. In case you didn’t realize, when you installed the pod file, the system generated a new .xcworkspace for your app. Open that file.

Now go to the AppDelegate.swift file (this is very important!! I’m going to say it again so you don’t spend 45 minutes figuring it out why the tutorial doesn’t work). Go to the AppDelegate.swift and once there write:

Import GoogleMaps
GMSServices.provideAPIKey(“YOUR_API_KEY”)

Again! This is a poor practice and a non-secure way of putting in your key. The intention of this blog is to show how to setup a Google Map quickly in an iOs app. How to secure our API key will be the subject of another blog.

Now let’s go to the ViewController.swift file.

We are going to focus in two things:

  1. Where is our map pointing
  2. Add markers to the map

To point our map we want to give our code some latitude and longitude. And, as I said, we want to point to our beloved Flatiron School. That is latitude 40.705252 and longitude -74.013906. Also we will add two markers, the school itself and the Charging Bull on latitude 40.705561 and longitude -74.013437.

Now let’s code!

import UIKit
import googleMaps
class YourViewController: UIViewController {
  override func loadView() {
    // Create a GMSCameraPosition that tells the map to display the
// coordinate latitude 40.705264 and longitude -74.013888 at zoom level 18.0.
    let camera = GMSCameraPosition.camera(withLatitude: 40.705264, longitude: -74.013888, zoom: 18.0)
let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
mapView.isMyLocationEnabled = true
view = mapView
    // Creates a marker for Flatiron School and another one for Charging Bull
    let flatiron = GMSMarker()
flatiron.position = CLLocationCoordinate2D(latitude: 40.705252, longitude: -74.013906)
flatiron.title = “Flatiron School”
flatiron.snippet = “This is the best school evaaaar”
flatiron.map = mapView
    let bull = GMSMarker()
bull.position = CLLocationCoordinate2D(latitude: 40.705561, longitude: -74.013437)
bull.title = “Charging Bull”
bull.snippet = “Touch my balls”
bull.map = mapView
}
}

Step 5 — Almost done

The last piece will be to URL schemes that our app intends to open and we do this by updating our Info.plist file. In there, we will set “LSApplicationQueriesSchemes” as a parent Array and put “googlechromes” and “comgooglemaps” as the kids. Once you finish, it should look like this:

Congratulations! You finished. Now go ahead and run your app. This is mine!

See you soon!