Show the direction of travel in iOS Google Maps

Kudos to undraw.co

Taxi or travel apps always need to show the direction of travel on the map. In this quick tutorial, I will show you how to set up, show, and test the directional marker on the maps.

Completed tutorial on Github here.

So, at first, we need these keys in info.plist file. These settings will allow us to use user location detection from our app.

<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Your location is required for taxi correct work</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>Your location is required for taxi correct work</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Your location is required for taxi correct work</string>

Second, we need to import the CoreLocation framework in our controller and create CLLocationManager. After that, we need to set up this manager like below.

As a location delegate, our ViewController needs to conform to CLLocationManagerDelegate.

As we can see, here we have a point variable — it is the latitude and longitude of our device. Also, we have location.course property. This is a course of location in degrees to true North. The range of this property is 0.0 –359.9 degrees, 0 being true North. (It can return -1 if the device is motionless).

Right now our app receives device location and direction. And with this data, we can build a custom marker on any map for showing users direction.

Testing

it was unclear how to test it without real travel. But Apple did this for us, and Xcode has built-in travel simulation. You just need to run Simulator and choose Features -> Location -> Freeway Drive.

Google Maps Part

Installation guide you can find here in the official documentation. You need to get Google API Key here. After that — you can set this key in the AppDelegate class. (Make sure to replace “YOUR_API_KEY” on your real Google API Key.

And as you can see, we just need to create our custom marker and turn it on angle provided by CoreLocation. But before that, we need to transform angle from degrees to radians. We don’t need to redraw marker, we just need to change the position of it. And that it.

Result

Join Me!

LinkedIn Twitter Original Blog Github

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store