MichelRobico MichelRobico - 1 year ago 184
Swift Question

Replace blue dot in GMSMapView by an arrow - Swift

I use the Google SDK for an application iOS8 (Swift).
I want to replace the blue dot (my location) in a GMSMapView by an arrow witch rotate according to the orientation of the smartphone.
How can I do that?


I managed to see my arrow but I have three problems :

enter image description here

1 : The arrow is cut and I do not find as enlarge the area

2 : The position of the arrow is not exactly on my location I solve this problem by delete "0,5" :

CGContextTranslateCTM(context, size.width, size.height)

3 : The direction of the arrow is symmetrical to the original I solve this problem by adding "-" before "degrees" :

CGContextRotateCTM(context, CGFloat(DegreesToRadians(Double(-degrees))))

How to solve these problems ?

Answer Source

If you are using Google Maps iOS SDK, seems there is no way to replace the default user location icon. However the default icon already has an arrow to indicate which direction user is going (simply call mapView.myLocationEnabled = true).

A workaround is to put a marker on user's current position, and change the marker image based on heading.

Sample Code (the full source code):

    func RadiansToDegrees(radians: Double) -> Double {
        return radians * 180.0/M_PI

    func DegreesToRadians(degrees: Double) -> Double {
        return degrees * M_PI / 180.0

    var GeoAngle = 0.0
    var locationManager = CLLocationManager()
    var marker = GMSMarker()

    override func viewDidLoad() {
        // Do any additional setup after loading the view, typically from a nib.

        var camera = GMSCameraPosition.cameraWithLatitude(-33.86,
            longitude: 151.20, zoom: 6)
        var mapView = GMSMapView.mapWithFrame(CGRectZero, camera: camera)
        self.view = mapView

        marker.map = mapView

        locationManager.delegate = self

    func locationManager(manager: CLLocationManager!, didUpdateToLocation newLocation: CLLocation!, fromLocation oldLocation: CLLocation!) {
        var camera = GMSCameraPosition.cameraWithLatitude(newLocation.coordinate.latitude,
            longitude: newLocation.coordinate.longitude, zoom: 15)
        (self.view as GMSMapView).animateToCameraPosition(camera)

        GeoAngle = self.setLatLonForDistanceAndAngle(newLocation)
        marker.position = newLocation.coordinate

    func locationManager(manager: CLLocationManager!, didUpdateHeading newHeading: CLHeading!) {
        var direction = -newHeading.trueHeading as Double
        marker.icon = self.imageRotatedByDegrees(CGFloat(direction), image: UIImage(named: "arrow.png")!)

    func imageRotatedByDegrees(degrees: CGFloat, image: UIImage) -> UIImage{
        var size = image.size

        var context = UIGraphicsGetCurrentContext()

        CGContextTranslateCTM(context, 0.5*size.width, 0.5*size.height)
        CGContextRotateCTM(context, CGFloat(DegreesToRadians(Double(degrees))))

        image.drawInRect(CGRect(origin: CGPoint(x: -size.width*0.5, y: -size.height*0.5), size: size))
        var newImage = UIGraphicsGetImageFromCurrentImageContext()

        return newImage

    func setLatLonForDistanceAndAngle(userLocation: CLLocation) -> Double {
        var lat1 = DegreesToRadians(userLocation.coordinate.latitude)
        var lon1 = DegreesToRadians(userLocation.coordinate.longitude)

        var lat2 = DegreesToRadians(37.7833);
        var lon2 = DegreesToRadians(-122.4167);

        var dLon = lon2 - lon1;

        var y = sin(dLon) * cos(lat2);
        var x = cos(lat1) * sin(lat2) - sin(lat1) * cos(lat2) * cos(dLon);
        var radiansBearing = atan2(y, x);
        if(radiansBearing < 0.0)
            radiansBearing += 2*M_PI;

        return radiansBearing;

The key step is to change image based on the degree come from the func locationManager(manager: CLLocationManager!, didUpdateHeading newHeading: CLHeading!) method.

You also need to make sure to add NSLocationAlwaysUsageDescription and NSLocationWhenInUseUsageDescription in your info.plist file.

enter image description here