Google Maps SDK for iOS in Xcode Storyboard

 

Developing a location based application on iOS with Google Maps is super easy with the Google Maps SDK for iOS. So here’s the complete step-by-step way to add a google map to your iOS application using storyboards in Xcode 5.

This is what your app will look like in the end:

Google Maps in iPhone using Xcode Storyboards

Google Maps in iPhone using Xcode Storyboards

 

Download code from Github: https://github.com/svram/GoogleMapSDKiOS-Storyboards

1. Download the Google Maps SDK for iOS:

https://developers.google.com/maps/documentation/ios/start#getting_the_google_maps_sdk_for_ios

The current version is 1.8.1

 

2. Obtain an API key from the Google Developers console. Do the easy to follow instructions here:

https://developers.google.com/maps/documentation/ios/start#the_google_maps_api_key

 

3. Setup Xcode Environment to work with Google Maps SDK

a) Open Xcode and Create a new project.

b) Create a new ‘Single View Application’ template.

 

Create Single View Application in Xcode

Create Single View Application in Xcode

 

c) Enter Product, Organization & Company names. Enter a class prefix and choose iPhone from the devices drop down menu.

 

Add product name, company etc

Add product name, company etc

 

d) Save your project to disk.

e) Unzip and open the Google Maps iOS SDK that you downloaded in Step 1.

 

Google Maps SDK iOS folder on desktop

Google Maps SDK iOS folder on desktop

 

f) Add the “GoogleMaps.framework” bundle to the “Frameworks” Folder in Xcode by dragging it there. When prompted, select “Copy items into destination group’s folder”.

 

Drag the GoogleMaps.framework bundle to the Frameworks folder in Xcode

Drag the GoogleMaps.framework bundle to the Frameworks folder in Xcode

 

 

Select Copy items into destination group's folder

Select Copy items into destination group’s folder

 

g) Similarly, drag the “GoogleMaps.bundle” from the GoogleMaps.framework -> Resources folder  to the “Frameworks” folder in Xcode. When prompted DO NOT select “Copy items into destination group’s folder”.

f) Then, select your project from the Project Navigator and select your applications “Target” (not the “Project”).

 

Select applications Target in project navigator

Select applications Target in project navigator

 

g) Then go to the “Build Phases” tab and then open “Link Binary With Libraries”. Then click on the “+” button at the bottom left and add the following libraries to be compiled along with your app binaries:

  • AVFoundation.framework
  • CoreData.framework
  • CoreLocation.framework
  • CoreText.framework
  • GLKit.framework
  • ImageIO.framework
  • libc++.dylib
  • libicucore.dylib
  • libz.dylib
  • OpenGLES.framework
  • QuartzCore.framework
  • SystemConfiguration.framework

 

Go To Build Phases -> Link Binary With Libraries

Go To Build Phases -> Link Binary With Libraries

 

 

Add the frameworks

Add the frameworks

 

This is what your Xcode environment should look like:

 

XCode environment after adding the frameworks

XCode environment after adding the frameworks

 

 

 

h) Now choose your “Project” rather than a “Target” and open the “Build Settings” tab. Scroll down till you find the “Linking” section and under that find “Other Linker Flags”. Now open the section and click the “+” next to “Debug” and add “-ObjC” in the text field. If these settings are not visible, change the filter in the “Build Settings” to “All” instead of “Basic”.

 

Choose the "Project" in project navigator

Choose the “Project” in project navigator

 

 

Add the '-ObjC' flag in Other Linker Flags under Build Settings tab

Add the ‘-ObjC’ flag in Other Linker Flags under Build Settings tab

 

 

4. Begin Coding

a) Open your AppDelegate.m file and add the following import statement:

#import <GoogleMaps/GoogleMaps.h>;

Copy the API Key you created in Step 2 and enter the following code in the method

application: didFinishLaunchingWithOptions:
[GMSServices provideAPIKey:@"API_KEY"];

Replace API_KEY with your API key.

 

Add Google Maps API Key to the AppDelegate.m application:didFinishLaunchingWithOptions: method

Add Google Maps API Key to the AppDelegate.m application:didFinishLaunchingWithOptions: method

 

b) Open “Main.Storyboard” and drag a UIView object from the Object Library. Now open the Identity Inspector and under Custom Class add “GMSMapView”.

 

Drag a UIView from object library to the main storyboard

Drag a UIView from object library to the main storyboard

 

 

Assign Custom class 'GMSMapView' to the UIView object in the Identity Inspector

Assign Custom class ‘GMSMapView’ to the UIView object in the Identity Inspector

 

 

c) Control drag from the UIView (GMSMapView) object to your ViewController.h file to create an outlet with the name “mapView”. Don’t forget to add the GoogleMaps import statement in your ViewController.h file.

 

Create an outlet for the GMSMapView object in the ViewController.h file

Create an outlet for the GMSMapView object in the ViewController.h file

 

d) Make the ViewController conform to the “GMSMapViewDelegate” protocol.

 

Make the ViewController conform to the "GMSMapViewDelegate" protocol

Make the ViewController conform to the “GMSMapViewDelegate” protocol

 

e) Finally, add the following code to your ViewController.m file in the viewDidLoad: method

 

//Controls whether the My Location dot and accuracy circle is enabled.
 
self.mapView.myLocationEnabled = YES;
 
//Controls the type of map tiles that should be displayed.
 
self.mapView.mapType = kGMSTypeNormal;
 
//Shows the compass button on the map
 
self.mapView.settings.compassButton = YES;
 
//Shows the my location button on the map
 
self.mapView.settings.myLocationButton = YES;
 
//Sets the view controller to be the GMSMapView delegate
 
self.mapView.delegate = self;
viewDidLoad: method in ViewController.m

viewDidLoad: method in ViewController.m

 

f) Now run the app in the simulator. Choose a location from the Debug -> Location menu option. Click on the my location button the app to move to your current location. And done!

 

iOS Simulator choose location from Debug -> Location

iOS Simulator choose location from Debug -> Location

 

 

Successfully added a google map to Xcode storyboard

Successfully added a google map to Xcode storyboard

 

 

g) Almost done. Finally some cosmetic changes. Go to your main storyboard and click on the view controller. Now go to the menu add a navigation controller by choosing “Editor -> Embed In -> Navigation Controller”.

This will add a navigator controller to your main storyboard.

Next give the navigation bar a title by adding the following code in your ViewController.m file:

self.title = @"Google Maps in iOS";

Feel free to add any other UIView objects. I have added a dummy button and a UITextView object.

Embed a Navigation Controller

Embed a Navigation Controller

 

Get the project files on Github.

16 Responses to Google Maps SDK for iOS in Xcode Storyboard

  1. Atif September 3, 2014 at 8:42 pm #

    Hi I followed this step by step.
    But i keep receiveing : “unkown class GMSMapView in Interface Builder File” error.
    Any pointers, tried a lot but can’t get it to work.

    • Vikram Bahl September 4, 2014 at 8:21 am #

      Ok. Make sure that the you have specified ‘-ObjC’ for ‘Debug’ in the Project->Build Settings->Linking->Other Linker Flags.

      But before you do this, download the project from Github and run it to see if it is working:

      https://github.com/svram/GoogleMapSDKiOS-Storyboards

      Comment if it doesn’t work.

      • ANDRES November 3, 2014 at 10:07 pm #

        I did that but it keeps saying that GMS is uknown

  2. Swapnil Godambe October 6, 2014 at 7:39 am #

    Thanks bro !
    Helped me a lot

  3. heba October 31, 2014 at 11:52 am #

    Thanks so much.
    I could finally run the app successfully.
    It was of great help.

  4. waseem November 19, 2014 at 12:33 pm #

    that was really helpful….Thanks

  5. Andy November 28, 2014 at 6:09 pm #

    Hi Vikram

    You posted a great article. Absolutely awesome. I did all steps , but I have a strange crash.
    I have added GMSMapView in 3 views of my app.
    And I have crash. Can you please help me a little by take a look here ?
    http://stackoverflow.com/questions/27193946/crash-while-getting-my-location-on-googlemaps-on-iphone

    Thank you so much;)

    • Vikram Bahl December 3, 2014 at 2:51 am #

      Hi Andy, the solution on the stack overflow website covers it pretty well. The pointer to GMSMapView must be strong for starters. If you are using the map in 3 different views, you will be better served by using a singleton instance of GMSMapView.

      Changes in iOS8 require you to set the NSLocationAlwaysUsageDescription or NSLocationWhenInUseUsageDescription keys in the Info.plist file. Lastly, before updating the location, CLLocationManager needs to call requestWhenInUseAuthorization or requestAlwaysAuthorization.

      Shall be updating the tutorial with the changes.

  6. SRI RAMANA December 9, 2014 at 7:30 am #

    It was really helped…thanks allot

  7. Olla January 14, 2015 at 12:06 pm #

    Thank you very much. I have been trying to add the google SDK for a few hours and I have been getting exceptions but this step by step tutorial helped find out the issues I was doing wrong.
    Thanks again 🙂

  8. sojoud April 17, 2015 at 8:32 pm #

    hello , i did the same steps above , but am using google maps sdk 5.1 version , every things are going ok even the type of maps , doesn’t appear the map just current location with off-white color , i mean the road and cites doesn’t appear , could u help me ??

  9. Jayesh June 11, 2015 at 7:01 am #

    SIr,
    I followed all the steps and i got the Map view in my view but map is not displaying here.
    But when i click on google link which is on my simulator i takes me to the new screen and there displays map.
    Please guide me

  10. Neha June 28, 2016 at 12:11 pm #

    CocoaPods is not installing

    $ sudo gem install cocoapods

  11. test May 12, 2017 at 12:07 am #

    You actually make it seem really easy with your presentation but I find this matter to be really one thing that
    I think I’d never understand. It sort of feels too complex and extremely large for me.

    I’m having a look ahead on your subsequent publish, I
    will try to get the cling of it!

Leave a Reply

Max level reaching...

%d bloggers like this: