Integration Google Maps in your iOS App

More and more apps are now utilizing location-based functionalities across different business natures. From fitness, home improvement, to delivery, among others, integrating maps into your apps prove to be beneficial, and might even leverage your apps usage rate. This post is catered to explain the process of integrating Google Maps SDK for your iOS applications, and be able to use its myriad of capabilities.

Getting Started

To start, clone the Google Maps Sample project from this link. After cloning the project, open the .xcworkspace file then run. Ideally, it should build and run the app without any errors.

On start of the app, you would be presented with Geofencing and Places selections, each catering to a specific functionality of Google Maps.

Geofencing renders a circle region to the map, and detects user entering/exiting a monitored region, while Places features a display of likely places to map as markers, provides custom marker information window, and fetches selected place information (images, name, rating, address, contact details, etc.).

Google Maps: The Basics

Our project utilizes Google Maps SDK for iOS, installed via Cocoapods since it is the easiest way of integrating it. Configuration of the actual map view is done on the MSMapViewController’s viewDidLoad method. Aside from its required configuration, a style is also configured to our map view. On our case, we are using the Night style map view, located in the night.json file, under Resources.


Google Maps sample project

Geofencing

Geofencing is when the app notifies its users when their device(s) enters or leaves set geographical regions set up in the app. It can be utilized by different businesses. An example of which is when a tourist destination app notifies its users of the many landmarks within their current area.

In our application, however, a set of coordinates is already set up so all we need to do is to configure the simulator to plot these coordinates. These coordinates are set in a .gpx file, in our case, in TestLocations.gpx. Using this file, the simulator will then plot each of the coordinates to the map per second, serving as the device’s current location.


TestLocations.gpx file

To test the Geofencing feature, we would need to set up our project as follows:

  • In Xcode, edit your current scheme and enable Allow Location Simulation.

Scheme setup for location testing
  • Run the app, and click the Geofencing button. Initially the feature will not be triggered. For that we would need to use the TestLocations.gpx file we specified earlier. In the bottom toolbar, you should see the Location button enabled. Click on that, and you should see a list of various locations that the simulator can simulate. Among those locations is the .gpx file we have. Select that and the simulator should start updating its coordinates accordingly.


Enabling the TestLocations.gpx file for testing



Geofencing in action

As you can see in image above, triggering the TestLocations will point you current locations to the coordinates specified in the file. The region is specified in the leftmost section of the app as a shaded circle region.

To check that the current coordinate has entered/left the region, logs are printed in the console of Xcode.

Under The Hood

For the Geofencing feature, we are utilizing Apple’s CoreLocation kit, more particularly, the CLLocationManager instance. The flow of integrating Geofencing is as such:

  • Request authorization for enabling Location to device
    • MSMapViewController’s viewDidLoad method
  • Retrieve current location
    • MSMapViewController’s didUpdateLocations method
  • Create shape in map to indicate region
    • MSMapViewController’s didUpdateLocations method
    • MSMapUtils’s addGeofenceShape method
  • Register and monitor region
    • MSMapViewController’s didUpdateLocations method
    • MSMapViewController’s startMonitoringRegion method

For checking if the device has entered/left the region being monitored, the didEnterRegion and didExitRegion methods are available for us to invoke any app logic as desired.

Places

For the Places section of the app, basically, we’ll just list the likely places near the device’s current location. Project-wise, not much setup is needed before running the app. Just run the app and select the Places selection.


Places in action

As you can see, the likely places are rendered in the map as markers. Tapping a marker will then display a custom marker info window (see Marker Info Window on how to implement you own custom marker info window). Selecting the more button of the info window will then redirect the app to the Place Details page, wherein more details are presented to the user

Likely Places

Loading all the likely places with respect to the current location is done thru the use of GMSPlacesClient.


Custom info window view

  • The likely places is loaded using the currentPlace method. It will then return a list which contains an object with a place (GMSPlace) attribute.
  • A marker is then added to the map corresponding to the place.

Marker Info Window

The info window shown in the Places map when selecting a marker is custom-made, thus allowing us more freedom on how we could interact with our markers. To be able to implement your own, you would need to follow these steps:

  • Initialize your custom UIView


Custom info window view

  • Implement the following GMSMapViewDelegate methods


GMSMapViewDelegate methods

  • In didTapMarker:
    • We remove the infoView before we add the current one to invalidate the previous selected window.
    • An offset is subtracted to the current infoView center. This is only applicable if your current controller is embedded in a navigation controller.
  • In markerInfoWindow:
    • We return an empty UIView() to invalidate the default view returned by the delegate method.
  • In didChangePosition:
    • The offset of the current info window is adjusted based on the movement of the map.
  • In didTapAtCoordinate:
    • Removes the current info window.

Marker Icon

Having a custom marker icon is as easy as setting a UIIMage to the GMSMarker’s icon attribute.


GMSMarker setup with custom marker icon

Place Details

When we select a marker and press its more button, we store the selected marker to a class variable for us to be able to get its corresponding GMSPlace object. This object is then passed to our MSPlaceViewController to further display its details.


GMSMarker setup with custom marker icon

In the MSPlaceViewController, we then populate its details to the view, and also load its first image.


Populate selected place's details

Conclusion

More Google Maps-related functionalities are yet to be explored, but we have covered the basics, and the more frequently used ones. Hope that you have learned something new, and you could always refer to the codebase to experiment or study the flow of the project.

Resources:

Core Location Geofencing tutorial
Custom Info Window for Google Maps
Getting Started on Maps SDK for iOS
Quick Map Styling - Google Maps

Main Photo by Antonio Grosz on Unsplash

Blog Posts by Jason Jon Carreos