Create Polygon on Google Maps | iOS | Swift

Maps are very common feature these days in mobile application so in this tutorial we will do few things:

1. GoogleMaps SDK Installation.
2. Show GoogleMaps in iOS App.
3. Create polygon on GoogleMaps.

Before starting this I am considering that you already setup your Google cloud project and have an API Key.

GoogleMaps SDK Installation.

Go to your project directory in terminal and create pod file using “pod init” command, now you’ll see Podfile in project directory.

Open your Podfile and paste the following code in it:

target 'YourProjectName' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  pod 'GoogleMaps'

end

save Podfile and run “pod install” command in terminal and close the project and now open .xcworkspace file.

Show GoogleMaps in iOS App.

Open “Main.storyboard” Drag and Drop a UIView and pass it customer class from the identity inspector “GMSMapView”

In your AppDelegate.swift first “import GoogleMaps” paste your Google Api Key in application(_:didFinishLaunchingWithOptions:) :

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        GMSServices.provideAPIKey("YOUR_API_KEY_HERE")
        return true
}

Now Build and Run the app and you will see Google’s Map in your application.

Create Polygon on GoogleMaps

First import GoogleMaps and create an IBOutlet of the Map in UIViewController

@IBOutlet weak var mapView: GMSMapView!

To create polygon on Google Maps first we need to create and instance of “GMSMutablePath” and it have to add every point of polygon which is lengthy and non reusable so I created a function with escaping closure which will take [CLLocationCoordinate2D] and gives GMSPolygon in call back.

Copy and Paste the following function in your code:

//to create polygon
    func createPolygon(coordinates: [CLLocationCoordinate2D], completion: @escaping (_ polygon: GMSPolygon?) -> Void) {
        let rect = GMSMutablePath()
        
        for coordinate in coordinates {
            rect.add(coordinate)
        }
        let polygon = GMSPolygon(path: rect)
        completion(polygon)
    }

To get the center point of any polygon copy and paste the following functions:

// to get centre point of polygon
    func polygonCenterOfMass(polygon: [CGPoint]) -> CGPoint {
        let nr = polygon.count
        var centerX: CGFloat = 0
        var centerY: CGFloat = 0
        var area = signedPolygonArea(polygon: polygon)
        for i in 0 ..< nr {
            let j = (i + 1) % nr
            let factor1 = polygon[i].x * polygon[j].y - polygon[j].x * polygon[i].y
            centerX = centerX + (polygon[i].x + polygon[j].x) * factor1
            centerY = centerY + (polygon[i].y + polygon[j].y) * factor1
        }
        area = area * 6.0
        let factor2 = 1.0/area
        centerX = centerX * factor2
        centerY = centerY * factor2
        let center = CGPoint.init(x: centerX, y: centerY)
        return center
    }
    
    func signedPolygonArea(polygon: [CGPoint]) -> CGFloat {
        let nr = polygon.count
        var area: CGFloat = 0
        for i in 0 ..< nr {
            let j = (i + 1) % nr
            area = area + polygon[i].x * polygon[j].y
            area = area - polygon[i].y * polygon[j].x
        }
        area = area/2.0
        return area
    }

Now lets consider we have coordinates of Nevada, USA

var nevadaCoordinates: [CLLocationCoordinate2D] = [
        CLLocationCoordinate2D(
            latitude: 41.99483623877299,
            longitude: -119.99917096965822
        ),
        CLLocationCoordinate2D(
            latitude: 41.86407114225792,
            longitude: -114.0225887305135
        ),
        CLLocationCoordinate2D(
            latitude: 37.11940857325003,
            longitude: -114.0225887305135
        ),
        CLLocationCoordinate2D(
            latitude: 35.05993939067412,
            longitude: -114.63782306666128
        ),
        CLLocationCoordinate2D(
            latitude: 38.996381415577794,
            longitude: -119.98816452566066
        ),
        CLLocationCoordinate2D(
            latitude: 41.986681086642214,
            longitude: -119.98816452566066
        )
    ]

In viewDidLoad() we will use these functions and data set and viewDidLoad() would be look like this:

//viewDidLoad()
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        self.title = "Maps Polygon"
        var points: [CGPoint] = []
        for point in self.nevadaCoordinates {
            let pointObj = CGPoint(x: point.latitude, y: point.longitude)
            points.append(pointObj)
        }
        
        self.createPolygon(coordinates: self.nevadaCoordinates) { polygon in
            if let polygon = polygon {
                polygon.fillColor = .red
                polygon.strokeColor = .black
                polygon.strokeWidth = 2
                polygon.map = self.mapView
                
                let centreOfPolygon = self.polygonCenterOfMass(polygon: points)
                let centreLocation = CLLocationCoordinate2D(latitude: centreOfPolygon.x, longitude: centreOfPolygon.y)
                self.mapView.animate(toLocation: centreLocation)
                self.mapView.animate(toZoom: 6)
                let mapMarker = GMSMarker(position: centreLocation)
                mapMarker.title = "Nevada"
                mapMarker.map = self.mapView
            }
        }
    }

Now Build and Run the project and you’ll see the red color polygon on the Nevada, USA.

You can download the code from my Github Repository.

That’s it, If this tutorial helped you please 👏 and share so others can find it. Thank you for attention, Happy Coding :)