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:
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.
c) Enter Product, Organization & Company names. Enter a class prefix and choose iPhone from the devices drop down menu.
d) Save your project to disk.
e) Unzip and open the Google Maps iOS SDK that you downloaded in Step 1.
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”.
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”).
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
This is what your Xcode environment should look like:
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”.
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.
b) Open “Main.Storyboard” and drag a UIView object from the Object Library. Now open the Identity Inspector and under Custom Class add “GMSMapView”.
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.
d) 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; |
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!
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.
Get the project files on Github.
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.
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.
I did that but it keeps saying that GMS is uknown
Thanks bro !
Helped me a lot
You’re welcome! Thank you.
Thanks so much.
I could finally run the app successfully.
It was of great help.
that was really helpful….Thanks
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;)
Hi Andy, the solution on the stack overflow website covers it pretty well. The pointer to
GMSMapView
must bestrong
for starters. If you are using the map in 3 different views, you will be better served by using a singleton instance ofGMSMapView
.Changes in iOS8 require you to set the
NSLocationAlwaysUsageDescription
orNSLocationWhenInUseUsageDescription
keys in the Info.plist file. Lastly, before updating the location,CLLocationManager
needs to callrequestWhenInUseAuthorization
orrequestAlwaysAuthorization
.Shall be updating the tutorial with the changes.
It was really helped…thanks allot
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 🙂
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 ??
Hi. 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.
Also check this post out:
http://stackoverflow.com/questions/27193946/crash-while-getting-my-location-on-googlemaps-on-iphone
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
CocoaPods is not installing
$ sudo gem install cocoapods
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!
you’re in point of fact a good webmaster. The web site loading velocity is
amazing. It kind of feels that you are doing any unique trick.
Moreover, The contents are masterwork. you have performed a great activity in this subject!