Integrating Google Maps SDK into your iOS app is easy thanks to Cocoapods. Lets create a simple app to showcase this with your current location and some markers of Pokemon that might be lurking around the area if you were to play Pokemon Go!

Setting up the project

First of all create a new single view application in XCode. Then you need to close the app as we need to use Cocoapods (Not sure what this is – check out our tutorial here) to integrate the Google Maps SDK with our project.

Navigate to the project directory in terminal, and use pod init to create your podfile. Replace the contents with the following:

# https://developers.google.com/maps/documentation/ios-sdk/start
use_frameworks!

source 'https://github.com/CocoaPods/Specs.git'
target '<YOURPROJECTNAME>' do
  pod 'GoogleMaps'
  pod 'GooglePlaces'
end

Note: replace <YOURPROJECTNAME> with your project name. Once done back in terminal run pod install to integrate the Google Maps SDK with your project. When this is done open up the yourproject.xcworkspace file and lets add Google Maps to your app!

Get an API key

Before you are able you use Google Maps in your app you need to get an API key here. Use the standard Google Maps SDK for iOS, and create an app. Once you have done this you will get an API key that looks something like :

AIzaSyBdVl-cTICSwYKrZ95SuvNw7dbMuDt1KG0

This will be used as authentication from your app to access Google Maps. DO not share this with anyone else, otherwise they can use up your free API calls, although the limit is high, with a high traffic app this can be reached easily.

Integrating Google Maps

Now onto integrating Google Maps. Head over to the AppDelegate.swift file and in didFinishLaunchingWithOptions add the following line which authenticates your app from your API key. Replace YOURAPIKEYHERE with the API key you just got from google

GMSServices.provideAPIKey("YOURAPIKEYHERE")

Then below import UIKit add:

import GoogleMaps

Now go over to ViewController.swift, also below import UIKit add:

import GoogleMaps

Then in viewDidLoad() add the following code:

        // Create a GMSCameraPosition that tells the map to display the
        // coordinate -33.86,151.20 at zoom level 6.
        let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 13.0)
        let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
        mapView.isMyLocationEnabled = true
        view = mapView
        
        // Creates a marker in the center of the map.
        let marker = GMSMarker()
        marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
        marker.title = "Sydney"
        marker.snippet = "Australia"
        marker.map = mapView

Now run your app and you will have a Google Maps as follows with a marker. You can change the location of the map with the latitude and longitude coordinates.

Adding Custom Markers

Lets add a custom marker to our app, we are going to add Squirtle!. Save the image below and add it to the Assets.xcassets folder in your app.

In viewDidLoad add the following to create a custom marker:

        // Add a Custom marker
        let markerSquirt = GMSMarker()
        markerSquirt.position = CLLocationCoordinate2D(latitude: -33.88, longitude: 151.20)
        markerSquirt.title = "Squirtle"
        markerSquirt.snippet = "Squirtle lives here"
        markerSquirt.map = mapView
        markerSquirt.icon = UIImage(named: "007 Squirtle")

Now when you run the app we have a wild Squirtle in our app!

Getting your location

To get the user’s location we need to access the GPS of the device, then move the map to that location, to do this requires a bit of modification of the code we have written so far as follows:

• First of all add the CLLocationManagerDelegate to our View Controller

class ViewController: UIViewController, CLLocationManagerDelegate {

• Under this and above viewDidLoad add the following varibles:

    var locationManager = CLLocationManager()
    lazy var mapView = GMSMapView()

• In viewDidLoad change the following line from:

var mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

to

mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

• Add the following to viewDidLoad to start getting the user’s location

        // User Location
        locationManager.delegate = self
        locationManager.requestWhenInUseAuthorization()
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.startUpdatingLocation()

• Finally add in this function which is called once we have the users location. This will update the map to their location

    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        let userLocation = locations.last
        let center = CLLocationCoordinate2D(latitude: userLocation!.coordinate.latitude, longitude: userLocation!.coordinate.longitude)

        let camera = GMSCameraPosition.camera(withLatitude: userLocation!.coordinate.latitude,
                                                          longitude: userLocation!.coordinate.longitude, zoom: 13.0)
        mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
        mapView.isMyLocationEnabled = true
        self.view = mapView

        locationManager.stopUpdatingLocation()
    }

• Finally in the Info.plist add the Privacy – Location When In Use Usage Description. This is needed to ask permission to access the user’s GPS location. We used the description “We are Russian Hackers” – obviously you wouldn’t use this in a live app!

Now finally run your app, after a second your map will move to your location with the blue dot on it!

Just a quick tip, the white box around the blue dot will only happen when testing in the simulator. On an actual device you will only see the blue dot with no white box around it.