Google Maps API for iOS provides a possibility of adding a map with all its useful functions to your project.
You can get a map (or a satellite photo) with scaling, rotating and moving possibilities using Google Maps SDK. You can also get a view of floor plans for lots of buildings. You can mark and name places on the map, set routes and calculate their lengths, choose territories and calculate their areas. And, of course, everything can be done by yourself!
Interested? Then this article is exactly what you need — we will guide you through Google Maps integration in iOS, simple and effective.
Integration with iOS app tutorial
Let’s create a new project and name it GoogleMapsAPIExample.
The easiest connection with API can be established by using CocoaPods. Let’s write in the podfile the following line:
pod ‘GoogleMaps’
And launch pod install.
First of all, for using Google Maps API you need to get a key. It can be done here. There is Main Menu on the left. We can find Credentials tab in it. Once we add all information, we see button Create. Your key will be generated and shown like this:
Then we add the following line to AppDelegat’s applicationDidFinishLaunching method :
[GMSServices provideAPIKey:yourAPIKey];
Now we can use all Google Maps API facilities. Let’s add map view. For example, it can be done from the storyboard. We need to add view and assign it GMSMapView class.
Now let’s compile and launch our project.
Hooray! Our map is fully functional, we can maximize and minimize it, move and rotate — you may even be able to see your home!
We should connect Google Maps to use our API from the code:
import GoogleMaps;
We can also change our map with help of following properties in order to satisfy exact needs:
self.mapView.mapType = kGMSTypeTerrain; // kGMSTypeSatellite; // kGMSTypeNormal; // kGMSTypeHybrid; [self.mapView setMinZoom:3.0 maxZoom:5.0]; self.mapView.trafficEnabled = YES; self.mapView.buildingsEnabled = NO; self.mapView.indoorEnabled = NO; self.mapView.settings.compassButton = YES; self.mapView.settings.myLocationButton = YES;
Additional facilities of Google Maps API integration with iOS app
1. Setting markers
Maps in apps are primary used for marking exact places or coordinates, known as geo tagging. So, for example, we would like to mark some points on the map with mouse-click. To add a marker to the map we need to create and name it:
GMSMarker *marker = [GMSMarker markerWithPosition:CLLocationCoordinate2DMake(0, 0)]; marker.title = @"New marker";
Field marker.map should be assigned GMSMapView, on which we will show the marker. For that we should take out IBOutlet from storyboard.
Add following line:
marker.map = self.mapView;
After launching we see the marker on the cross of the equator and prime meridian.
Now let’s try to do it by click on the map. It’s better to make a view controller delegate of GMSMapView for interactions follow-up between the client and a map. We need to click on the Main view Controller, then on the Map View: 
Next step is adding of GMSMapViewDelegate to supported protocols:
@interface ViewController ()
It has lots of useful methods, but for now we’ll need only mapView:didTapeAtCoordinate:
- (void)mapView:(GMSMapView *)mapView didTapAtCoordinate:(CLLocationCoordinate2D)coordinate {
GMSMarker *marker = [GMSMarker markerWithPosition:coordinate];
marker.title = @"New marker";
marker.map = self.mapView;
}
After that we add finished realization of the marker and here’s the result!
We can also change some properties of our markers, for example:
marker.tappable = YES; marker.draggable = YES; marker.appearAnimation = kGMSMarkerAnimationPop; marker.icon = [UIImage imageNamed:@"Custom icon"]; marker.rotation = 90;
To delete our marker just set nil in its field map:
marker.map = nil;
2. Creating path between two points
We also can use our map to show path between two or more points and calculate its length, for example.
Path can be made by using two classes — GMSPolyline or GMSPath (GMSMutablePath). Let’s create GMSPolyline and add it to our map.
@property (nonatomic, strong) GMSPolyline *polyline;
- (void)viewDidLoad {
self.polyline = [GMSPolyline polylineWithPath:[GMSPath path]];
self.polyline.map = self.mapView;
}
Now on the click we are adding one more point to our existing path:
- (void)mapView:(GMSMapView *)mapView didTapAtCoordinate:(CLLocationCoordinate2D)coordinate {
GMSMutablePath *path = [[GMSMutablePath alloc] initWithPath:self.polyline.path];
[path addCoordinate:coordinate];
self.polyline.path = path;
}
Polyline can be a little bit customized for your needs:
self.polyline.strokeColor = [UIColor greenColor]; self.polyline.strokeWidth = 2.0f; self.polyline.geodesic = YES;
Length of the pass can be calculated by function GMSGeometryLength(path), which returns it in meters. Also you can change style for different parts of polyline, create pattern of repeating colors, and lots of different things, but that’s a whole new material for the next time.
3. Creating polygons
We can also select not just a path, but a whole area on the map, like for radius search. This process is pretty similar with polylines creation.
Polygon creation:
self.polygon = [GMSPolygon polygonWithPath:[GMSPath path]]; self.polygon.map = self.mapView;
Add new point:
- (void)mapView:(GMSMapView *)mapView didTapAtCoordinate:(CLLocationCoordinate2D)coordinate {
GMSMutablePath *path = [[GMSMutablePath alloc] initWithPath:self.polygon.path];
[path addCoordinate:coordinate];
self.polygon.path = path;
}
We also can customize some properties of polygon:
self.polygon.fillColor = [UIColor magentaColor]; self.polygon.strokeColor = [UIColor blueColor]; self.polygon.strokeWidth = 2.0f; self.polygon.geodesic = YES;
For area calculation we can use GMSGeometryArea(path).
Read also:
4. Adding overlays to the map
We can add an overlay for exact polygone on the map. For example, let’s add an overlay with two markers in corners created by click.
@property (nonatomic, strong) GMSGroundOverlay *overlay;
@property (nonatomic, strong) GMSMarker *firstMarker;
@property (nonatomic, strong) GMSMarker *secondMarker;
- (void)mapView:(GMSMapView *)mapView didTapAtCoordinate:(CLLocationCoordinate2D)coordinate {
if (self.firstMarker) {
self.secondMarker = [GMSMarker markerWithPosition:coordinate];
self.secondMarker.map = self.mapView;
[self updateOverlay];
} else {
self.firstMarker = [GMSMarker markerWithPosition:coordinate];
self.firstMarker.map = self.mapView;
}
}
- (void)updateOverlay {
self.overlay = [GMSGroundOverlay groundOverlayWithBounds:[[GMSCoordinateBounds alloc] initWithCoordinate:self.firstMarker.position coordinate:self.secondMarker.position] icon:[UIImage imageNamed:@"test"]];
self.overlay.map = self.mapView;
}
Launching…
It works!
Now we are adding the third marker:
Oi! Looks like something gone wrong. Marker was supposed to disappear together with polygon, but it didn’t happen, what’s the problem?
The thing is, GMSMapView keeps all its elements by strong link, so when we lose them, they are not lost forever. We can do it just by setting map to nil by adding some code:
- (void)updateOverlay {
self.overlay.map = nil;
self.overlay = [GMSGroundOverlay groundOverlayWithBounds:[[GMSCoordinateBounds alloc] initWithCoordinate:self.firstMarker.position coordinate:self.secondMarker.position] icon:[UIImage imageNamed:@"test"]];
self.overlay.map = self.mapView;
}
- (void)mapView:(GMSMapView *)mapView didTapAtCoordinate:(CLLocationCoordinate2D)coordinate {
if (self.firstMarker) {
self.secondMarker.map = nil;
self.secondMarker = [GMSMarker markerWithPosition:coordinate];
self.secondMarker.map = self.mapView;
[self updateOverlay];
} else {
self.firstMarker = [GMSMarker markerWithPosition:coordinate];
self.firstMarker.map = self.mapView;
}
}
Yes, now it works like it should!
We can also add possibility of dragging markers, if we able property draggable and realize delegate method:
- (void)mapView:(GMSMapView *)mapView didDragMarker:(GMSMarker *)marker {
[self updateOverlay];
}
5. Finding user’s location
But after all, what is the most useful thing with a map if you got lost somewhere in unknown city? Of course, possibility to be located and shown where you are now and what’s close to you. It also can be done using our Google Maps API. For this we need to do the following:
1) Create CLLocationManager:
>@property (nonatomic, strong) CLLocationManager *locationManager;
2) Initialize manager and call the update:
self.locationManager = [[CLLocationManager alloc] init]; [self.locationManager requestWhenInUseAuthorization]; // for iOS 8.0 and higher // or [self.locationManager requestAlwaysAuthorization]; self.locationManager.delegate = self; // if you need to receive messages from manager self.locationManager.distanceFilter = kCLDistanceFilterNone; self.locationManager.desiredAccuracy = kCLLocationAccuracyHundredMeters; [self.locationManager startUpdatingLocation];
3) For iOS 8.0 and higher we need to write in the plist line NSLocationWhenInUseUsageDescription or NSLocationAlwaysUsageDescription according to type of work with manager, which will be shown as standard message about authorization for getting user’s location.
Conclusion
So now we know how to integrate Google Maps API into iOS app in general. But how much does it cost to integrate Google Maps API into app? Basic integration takes around an hour (key creating, connecting API with project). That’s the main thing, but also – the easiest. There always can be some integration tricks, which cannot be solved very fast. Following estimation of supposed time and cost depends only on specific task.
Any questions about Google Maps iOS integration? Write in the comments or contact us by the form bellow, we will be happy to help you!
[…] Case study: Text field animations for mobile apps […]
[…] Read also: Tutorial: Google Maps iOS integration […]