Show the direction of travel on the map in the iOS App. Google Maps.

Show the direction of travel on the map in the iOS App. Google Maps.

Taxi or travel apps always need to show the direction of travel on the map. In these quick tutorials, 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

My Social Media

LinkedIn Twitter Original Blog Github