Draw polylines on a map

Displays a map of the south Pacific Ocean with an animation of red and green polylines changing their position and size.

Get started

Before you can try the sample code, you must configure your development environment. For more information, see Maps SDK for iOS code samples .

View the code

Swift

 import 
  
 GoogleMaps 
 import 
  
 UIKit 
 final 
  
 class 
  
 PolylinesViewController 
 : 
  
 UIViewController 
  
 { 
  
 private 
  
 lazy 
  
 var 
  
 styles 
 : 
  
 [ 
 GMSStrokeStyle 
 ] 
  
 = 
  
 { 
  
 let 
  
 greenStyle 
  
 = 
  
 GMSStrokeStyle 
 . 
 gradient 
 ( 
 from 
 : 
  
 . 
 green 
 , 
  
 to 
 : 
  
 UIColor 
 . 
 green 
 . 
 withAlphaComponent 
 ( 
 0 
 )) 
  
 let 
  
 redStyle 
  
 = 
  
 GMSStrokeStyle 
 . 
 gradient 
 ( 
 from 
 : 
  
 UIColor 
 . 
 red 
 . 
 withAlphaComponent 
 ( 
 0 
 ), 
  
 to 
 : 
  
 . 
 red 
 ) 
  
 return 
  
 [ 
 greenStyle 
 , 
  
 redStyle 
 , 
  
 GMSStrokeStyle 
 . 
 solidColor 
 ( 
 UIColor 
 ( 
 white 
 : 
  
 0 
 , 
  
 alpha 
 : 
  
 0 
 ))] 
  
 }() 
  
 private 
  
 var 
  
 pathLength 
 : 
  
 Double 
  
 = 
  
 0 
  
 private 
  
 var 
  
 pos 
 : 
  
 Double 
  
 = 
  
 0 
  
 private 
  
 var 
  
 polylines 
 : 
  
 [ 
 GMSPolyline 
 ] 
  
 = 
  
 [] 
  
 private 
  
 lazy 
  
 var 
  
 mapView 
 : 
  
 GMSMapView 
  
 = 
  
 { 
  
 let 
  
 camera 
  
 = 
  
 GMSCameraPosition 
 ( 
 latitude 
 : 
  
 - 
 30 
 , 
  
 longitude 
 : 
  
 - 
 175 
 , 
  
 zoom 
 : 
  
 3 
 ) 
  
 return 
  
 GMSMapView 
 ( 
 frame 
 : 
  
 . 
 zero 
 , 
  
 camera 
 : 
  
 camera 
 ) 
  
 }() 
  
 override 
  
 func 
  
 loadView 
 () 
  
 { 
  
 view 
  
 = 
  
 mapView 
  
 mapView 
 . 
 accessibilityElementsHidden 
  
 = 
  
 true 
  
 } 
  
 override 
  
 func 
  
 viewDidLoad 
 () 
  
 { 
  
 super 
 . 
 viewDidLoad 
 () 
  
 var 
  
 path 
  
 = 
  
 GMSMutablePath 
 () 
  
 path 
 . 
 addLatitude 
 ( 
 - 
 33.866901 
 , 
  
 longitude 
 : 
  
 151.195988 
 ) 
  
 path 
 . 
 addLatitude 
 ( 
 - 
 18 
 , 
  
 longitude 
 : 
  
 179 
 ) 
  
 path 
 . 
 addLatitude 
 ( 
 21.291982 
 , 
  
 longitude 
 : 
  
 - 
 157.821856 
 ) 
  
 path 
 . 
 addLatitude 
 ( 
 37.423802 
 , 
  
 longitude 
 : 
  
 - 
 122.091859 
 ) 
  
 path 
 . 
 addLatitude 
 ( 
 - 
 12 
 , 
  
 longitude 
 : 
  
 - 
 77 
 ) 
  
 path 
 . 
 addLatitude 
 ( 
 - 
 33.866901 
 , 
  
 longitude 
 : 
  
 151.195988 
 ) 
  
 path 
  
 = 
  
 path 
 . 
 pathOffset 
 ( 
 byLatitude 
 : 
  
 - 
 30 
 , 
  
 longitude 
 : 
  
 0 
 ) 
  
 pathLength 
  
 = 
  
 path 
 . 
 length 
 ( 
 of 
 : 
  
 . 
 geodesic 
 ) 
  
 / 
  
 21 
  
 for 
  
 i 
  
 in 
  
 0. 
 . 
< 30 
  
 { 
  
 let 
  
 polyline 
  
 = 
  
 GMSPolyline 
 ( 
 path 
 : 
  
 path 
 . 
 pathOffset 
 ( 
 byLatitude 
 : 
  
 Double 
 ( 
 i 
 ) 
  
 * 
  
 1.5 
 , 
  
 longitude 
 : 
  
 0 
 )) 
  
 polyline 
 . 
 strokeWidth 
  
 = 
  
 8 
  
 polyline 
 . 
 geodesic 
  
 = 
  
 true 
  
 polyline 
 . 
 map 
  
 = 
  
 mapView 
  
 polylines 
 . 
 append 
 ( 
 polyline 
 ) 
  
 } 
  
 animatePath 
 () 
  
 } 
  
 // Updates the path style every 0.1 seconds. 
  
 private 
  
 func 
  
 animatePath 
 () 
  
 { 
  
 polylines 
 . 
 forEach 
  
 { 
  
 if 
  
 let 
  
 path 
  
 = 
  
 $0 
 . 
 path 
  
 { 
  
 $0 
 . 
 spans 
  
 = 
  
 GMSStyleSpansOffset 
 ( 
 path 
 , 
  
 styles 
 , 
  
 [ 
 NSNumber 
 ( 
 value 
 : 
  
 pathLength 
 )], 
  
 . 
 geodesic 
 , 
  
 pos 
 ) 
  
 } 
  
 } 
  
 pos 
  
 -= 
  
 50000 
  
 DispatchQueue 
 . 
 main 
 . 
 asyncAfter 
 ( 
 deadline 
 : 
  
 DispatchTime 
 . 
 now 
 () 
  
 + 
  
 0.1 
 ) 
  
 { 
  
 self 
 . 
 animatePath 
 () 
  
 } 
  
 } 
 } 
  
  

Objective-C

 #import "GoogleMapsDemos/Samples/PolylinesViewController.h" 
 #import <GoogleMaps/GoogleMaps.h> 
 static 
  
 CLLocationCoordinate2D 
  
 kSydneyAustralia 
  
 = 
  
 { 
 -33.866901 
 , 
  
 151.195988 
 }; 
 static 
  
 CLLocationCoordinate2D 
  
 kHawaiiUSA 
  
 = 
  
 { 
 21.291982 
 , 
  
 -157.821856 
 }; 
 static 
  
 CLLocationCoordinate2D 
  
 kFiji 
  
 = 
  
 { 
 -18 
 , 
  
 179 
 }; 
 static 
  
 CLLocationCoordinate2D 
  
 kMountainViewUSA 
  
 = 
  
 { 
 37.423802 
 , 
  
 -122.091859 
 }; 
 static 
  
 CLLocationCoordinate2D 
  
 kLimaPeru 
  
 = 
  
 { 
 -12 
 , 
  
 -77 
 }; 
 static 
  
 bool 
  
 kAnimate 
  
 = 
  
 true 
 ; 
 @implementation 
 PolylinesViewController 
 { 
  
 NSArray 
  
 * 
 _styles 
 ; 
  
 NSArray 
  
 * 
 _lengths 
 ; 
  
 NSArray 
  
 * 
 _polys 
 ; 
  
 double 
  
 _pos 
 , 
  
 _step 
 ; 
  
 GMSMapView 
  
 * 
 _mapView 
 ; 
 } 
 - 
 ( 
 void 
 ) 
 tick 
  
 { 
  
 for 
  
 ( 
 GMSPolyline 
  
 * 
 poly 
  
 in 
  
 _polys 
 ) 
  
 { 
  
 poly 
 . 
 spans 
  
 = 
  
 GMSStyleSpansOffset 
 ( 
 poly 
 . 
 path 
 , 
  
 _styles 
 , 
  
 _lengths 
 , 
  
 kGMSLengthGeodesic 
 , 
  
 _pos 
 ); 
  
 } 
  
 _pos 
  
 -= 
  
 _step 
 ; 
  
 if 
  
 ( 
 kAnimate 
 ) 
  
 { 
  
 __weak 
  
 id 
  
 weakSelf 
  
 = 
  
 self 
 ; 
  
 dispatch_after 
 ( 
 dispatch_time 
 ( 
 DISPATCH_TIME_NOW 
 , 
  
 NSEC_PER_SEC 
  
 / 
  
 10 
 ), 
  
 dispatch_get_main_queue 
 (), 
  
 ^ 
 { 
  
 [ 
 weakSelf 
  
 tick 
 ]; 
  
 }); 
  
 } 
 } 
 - 
 ( 
 void 
 ) 
 initLines 
  
 { 
  
 if 
  
 ( 
 ! 
 _polys 
 ) 
  
 { 
  
 NSMutableArray 
  
 * 
 polys 
  
 = 
  
 [ 
 NSMutableArray 
  
 array 
 ]; 
  
 GMSMutablePath 
  
 * 
 path 
  
 = 
  
 [ 
 GMSMutablePath 
  
 path 
 ]; 
  
 [ 
 path 
  
 addCoordinate 
 : 
 kSydneyAustralia 
 ]; 
  
 [ 
 path 
  
 addCoordinate 
 : 
 kFiji 
 ]; 
  
 [ 
 path 
  
 addCoordinate 
 : 
 kHawaiiUSA 
 ]; 
  
 [ 
 path 
  
 addCoordinate 
 : 
 kMountainViewUSA 
 ]; 
  
 [ 
 path 
  
 addCoordinate 
 : 
 kLimaPeru 
 ]; 
  
 [ 
 path 
  
 addCoordinate 
 : 
 kSydneyAustralia 
 ]; 
  
 path 
  
 = 
  
 [ 
 path 
  
 pathOffsetByLatitude 
 : 
 -30 
  
 longitude 
 : 
 0 
 ]; 
  
 _lengths 
  
 = 
  
 @[ 
  
 @( 
 [ 
 path 
  
 lengthOfKind 
 : 
 kGMSLengthGeodesic 
 ] 
  
 / 
  
 21 
 ) 
  
 ] 
 ; 
  
 for 
  
 ( 
 int 
  
 i 
  
 = 
  
 0 
 ; 
  
 i 
 < 
 30 
 ; 
  
 ++ 
 i 
 ) 
  
 { 
  
 GMSPolyline 
  
 * 
 poly 
  
 = 
  
 [[ 
 GMSPolyline 
  
 alloc 
 ] 
  
 init 
 ]; 
  
 poly 
 . 
 path 
  
 = 
  
 [ 
 path 
  
 pathOffsetByLatitude 
 : 
 ( 
 i 
  
 * 
  
 1.5 
 ) 
  
 longitude 
 : 
 0 
 ]; 
  
 poly 
 . 
 strokeWidth 
  
 = 
  
 8 
 ; 
  
 poly 
 . 
 geodesic 
  
 = 
  
 YES 
 ; 
  
 poly 
 . 
 map 
  
 = 
  
 _mapView 
 ; 
  
 [ 
 polys 
  
 addObject 
 : 
 poly 
 ]; 
  
 } 
  
 _polys 
  
 = 
  
 polys 
 ; 
  
 } 
 } 
 - 
 ( 
 void 
 ) 
 viewDidLoad 
  
 { 
  
 [ 
 super 
  
 viewDidLoad 
 ]; 
  
 GMSCameraPosition 
  
 * 
 camera 
  
 = 
  
 [ 
 GMSCameraPosition 
  
 cameraWithLatitude 
 : 
 -30 
  
 longitude 
 : 
 -175 
  
 zoom 
 : 
 3 
 ]; 
  
 GMSMapView 
  
 * 
 mapView 
  
 = 
  
 [ 
 GMSMapView 
  
 mapWithFrame 
 : 
 CGRectZero 
  
 camera 
 : 
 camera 
 ]; 
  
 mapView 
 . 
 accessibilityElementsHidden 
  
 = 
  
 YES 
 ; 
  
 self 
 . 
 view 
  
 = 
  
 mapView 
 ; 
  
 _mapView 
  
 = 
  
 mapView 
 ; 
  
 CGFloat 
  
 alpha 
  
 = 
  
 1 
 ; 
  
 UIColor 
  
 * 
 green 
  
 = 
  
 [ 
 UIColor 
  
 colorWithRed 
 : 
 0 
  
 green 
 : 
 1 
  
 blue 
 : 
 0 
  
 alpha 
 : 
 alpha 
 ]; 
  
 UIColor 
  
 * 
 greenTransp 
  
 = 
  
 [ 
 UIColor 
  
 colorWithRed 
 : 
 0 
  
 green 
 : 
 1 
  
 blue 
 : 
 0 
  
 alpha 
 : 
 0 
 ]; 
  
 UIColor 
  
 * 
 red 
  
 = 
  
 [ 
 UIColor 
  
 colorWithRed 
 : 
 1 
  
 green 
 : 
 0 
  
 blue 
 : 
 0 
  
 alpha 
 : 
 alpha 
 ]; 
  
 UIColor 
  
 * 
 redTransp 
  
 = 
  
 [ 
 UIColor 
  
 colorWithRed 
 : 
 1 
  
 green 
 : 
 0 
  
 blue 
 : 
 0 
  
 alpha 
 : 
 0 
 ]; 
  
 GMSStrokeStyle 
  
 * 
 grad1 
  
 = 
  
 [ 
 GMSStrokeStyle 
  
 gradientFromColor 
 : 
 green 
  
 toColor 
 : 
 greenTransp 
 ]; 
  
 GMSStrokeStyle 
  
 * 
 grad2 
  
 = 
  
 [ 
 GMSStrokeStyle 
  
 gradientFromColor 
 : 
 redTransp 
  
 toColor 
 : 
 red 
 ]; 
  
 _styles 
  
 = 
  
 @[ 
  
 grad1 
 , 
  
 grad2 
 , 
  
 [ 
 GMSStrokeStyle 
  
 solidColor 
 : 
 [ 
 UIColor 
  
 colorWithWhite 
 : 
 0 
  
 alpha 
 : 
 0 
 ]], 
  
 ] 
 ; 
  
 _step 
  
 = 
  
 50000 
 ; 
  
 [ 
 self 
  
 initLines 
 ]; 
  
 [ 
 self 
  
 tick 
 ]; 
 } 
 @ 
 end  
 
 . 
 m 

Run the full sample app locally

The Maps SDK for iOS sample app is available as a download archive from GitHub . Follow these steps to install and try the Maps SDK for iOS sample app.

  1. Run git clone https://github.com/googlemaps-samples/maps-sdk-for-ios-samples.git to clone the samples repository into a local directory.
  2. Open a terminal window, navigate to the directory where you cloned the sample files, and drill down into the GoogleMaps directory:

    Swift

    cd maps-sdk-for-ios-samples-main/GoogleMaps-Swift pod install 
     open GoogleMapsSwiftDemos.xcworkspace 
    

    Objective-C

    cd maps-sdk-for-ios-samples-main/GoogleMaps pod install 
     open GoogleMapsDemos.xcworkspace 
    
  3. In Xcode, press the compile button to build the app with the current scheme. The build produces an error, prompting you to enter your API key in the SDKConstants.swift file for Swift or SDKDemoAPIKey.h file for Objective-C.
  4. Get an API key from your project with the Maps SDK for iOS enabled .
  5. Edit the SDKConstants.swift file for Swift or SDKDemoAPIKey.h file for Objective-C and paste your API key into the definition of either the apiKey or kAPIKey constant. For example:

    Swift

    static let apiKey = " YOUR_API_KEY 
    "

    Objective-C

     static 
      
     NSString 
      
     * 
     const 
      
     kAPIKey 
      
     = 
      
     @" YOUR_API_KEY 
    " 
     ; 
    
  6. In the SDKConstants.swift file (Swift) or SDKDemoAPIKey.h file (Objective-C), remove the following line, because it's used to register the user-defined issue:

    Swift

    #error (Register for API Key and insert here. Then delete this line.)

    Objective-C

    #error Register for API Key and insert here.
  7. Build and run the project. The iOS simulator window appears, showing a list of Maps SDK Demos.
  8. Choose one of the options displayed, to experiment with a feature of the Maps SDK for iOS.
  9. If prompted to allow GoogleMapsDemos to access your location, choose Allow.
Create a Mobile Website
View Site in Mobile | Classic
Share by: