Polyline with gradient across width in iOS Google Maps SDK

Question

I have iOS app with the Google Maps SDK integrated. My route has default style and I'm able to change the color to be gradient in length via spans.

Is it possible to update polyline color and define gradient in width instead (like original Google Maps app has)?:

enter image description here

UPDATE: I have added limited version by using two identical polylines with different styles but I'm definitely looking for a better solution: enter image description here

I followed the official documentation and didn't find any references of that.

score 9 · Accepted Answer · edited Mar 28 '18 at 12:22

9

I do this:

GMSPath *path = [GMSPath pathFromEncodedPath:overview_route];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 5;

GMSStrokeStyle *greenToRed = [GMSStrokeStyle gradientFromColor:[UIColor greenColor] toColor:[UIColor redColor]];
polyline.spans = @[[GMSStyleSpan spanWithStyle:greenToRed]];
polyline.map = self.mapView;

edited Mar 28 '18 at 12:22

Valeriy Van

1,851
16
19

answered Apr 11 '15 at 21:02

Jorge

1,066
8
16

score 2 · Answer 2 · answered Apr 25 '18 at 06:31

You can refer to the documentation for more info: https://developers.google.com/maps/documentation/ios-sdk/shapes

I use for example two gradients from blue to dark(black):

let brandBlue = GMSStrokeStyle.solidColor(.blue)
let nightBlue = GMSStrokeStyle.solidColor(.dark)
let gradientBlue = GMSStrokeStyle.gradient(from: .blue, to: .dark)

polyline.spans = [GMSStyleSpan(style: brandBlue),
                  GMSStyleSpan(style: nightBlue),
                  GMSStyleSpan(style: gradientBlue)]

polyline.map = mainMap.mapView

Polyline with gradient across width in iOS Google Maps SDK

2 Answers2