iphone - How to draw an arc on Google Maps in iOS?

Question

How to draw an arc between two coordinate points in Google Maps like in this image and same like facebook post in iOS ?

Answer 1

Before using the below function, don't forget to import GoogleMaps Credits: xomena

func drawArcPolyline(startLocation: CLLocationCoordinate2D?, endLocation: CLLocationCoordinate2D?) {
    if let startLocation = startLocation, let endLocation = endLocation {
        //swap the startLocation & endLocation if you want to reverse the direction of polyline arc formed.
        let mapView = GMSMapView()
        let path = GMSMutablePath()
        path.add(startLocation)
        path.add(endLocation)
        // Curve Line
        let k: Double = 0.2 //try between 0.5 to 0.2 for better results that suits you
        let d = GMSGeometryDistance(startLocation, endLocation)
        let h = GMSGeometryHeading(startLocation, endLocation)
        //Midpoint position
        let p = GMSGeometryOffset(startLocation, d * 0.5, h)
        //Apply some mathematics to calculate position of the circle center
        let x = (1 - k * k) * d * 0.5 / (2 * k)
        let r = (1 + k * k) * d * 0.5 / (2 * k)
        let c = GMSGeometryOffset(p, x, h + 90.0)
        //Polyline options
        //Calculate heading between circle center and two points
        let h1 =  GMSGeometryHeading(c, startLocation)
        let h2 = GMSGeometryHeading(c, endLocation)
        //Calculate positions of points on circle border and add them to polyline options
        let numpoints = 100.0
        let step = ((h2 - h1) / Double(numpoints))
        for i in stride(from: 0.0, to: numpoints, by: 1) {
            let pi = GMSGeometryOffset(c, r, h1 + i * step)
            path.add(pi)
        }
        //Draw polyline
        let polyline = GMSPolyline(path: path)
        polyline.map = mapView // Assign GMSMapView as map
        polyline.strokeWidth = 3.0
        let styles = [GMSStrokeStyle.solidColor(UIColor.black), GMSStrokeStyle.solidColor(UIColor.clear)]
        let lengths = [20, 20] // Play with this for dotted line
        polyline.spans = GMSStyleSpans(polyline.path!, styles, lengths as [NSNumber], .rhumb)
        
        let bounds = GMSCoordinateBounds(coordinate: startLocation, coordinate: endLocation)
        let insets = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
        let camera = mapView.camera(for: bounds, insets: insets)!
        mapView.animate(to: camera)
    }
}