Drawing Curved Polylines Using points, Google Maps JS API

Question

There's problem with curved lines calculating. So I have start and end locations, and I'm calculating points between those two positions for drawing Arc using polyline. Everything is Ok, but start and final points of curved line is different then initial.

picture is here

Here method for creating curved points beetween start (path[0]) and end (path1) points:

getCurvePath(path, iteration) {
    let k = 0.01+(0.05*iteration) //curve radius
    let latLng1 = new google.maps.LatLng(path[0])
    let latLng2 = new google.maps.LatLng(path[1])
    let h = google.maps.geometry.spherical.computeHeading(
        latLng1,
        latLng2
    )
    let d = 0.0
    let p = null

    //The if..else block is for swapping the heading, offset and distance 
    //to draw curve always in the upward direction
    if (h < 0) {
        d = google.maps.geometry.spherical.computeDistanceBetween(latLng2, latLng1)
        h = google.maps.geometry.spherical.computeHeading(latLng2, latLng1)
        //Midpoint position
        p = google.maps.geometry.spherical.computeOffset(latLng2, d * 0.5, h)
    } else {
        d = google.maps.geometry.spherical.computeDistanceBetween(latLng1, latLng2)

        //Midpoint position
        p = google.maps.geometry.spherical.computeOffset(latLng1, 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 = google.maps.geometry.spherical.computeOffset(p, x, h + 90)

    //Calculate heading between circle center and two points
    let h1 = google.maps.geometry.spherical.computeHeading(c, latLng1)
    let h2 = google.maps.geometry.spherical.computeHeading(c, latLng2)

    //Calculate positions of points on circle border and add them to polyline options
    let numberOfPoints = 500 //more numberOfPoints more smooth curve you will get
    let step = (h2 - h1) / numberOfPoints

    //Create PolygonOptions object to draw on map
    let polygon = []
    polygon.push(latLng1)

    //Create a temporary list of LatLng to store the points that's being drawn on map for curve 
    let temp = []

    //iterate the numberOfPoints and add the LatLng to PolygonOptions to draw curve
    //and save in temp list to add again reversely in PolygonOptions
    for (let i = 0; i<numberOfPoints; i++) {
        let latlng = google.maps.geometry.spherical.computeOffset(c, r, h1 + i * step)
        polygon.push(latlng) //Adding in PolygonOptions
        temp.push(latlng)    //Storing in temp list to add again in reverse order
    }
    polygon.push(latLng2)
    //iterate the temp list in reverse order and add in PolygonOptions
    for (let i = (temp.length-1); i>=0; i--) {
        polygon.push(temp[i])
    }
    //polygon.push(latLng2)
    return polygon
},

Using this method here:

const polylines = polylineLocations.map(polyline => {

        return new google.maps.Polyline({
            path: self.getCurvePath([polyline.pathA, polyline.pathB], polyline.iteration),
            geodesic: true,
            strokeColor: self.getStrokeColor(polyline.value, polyline.meta.PROVIDER),
            // strokeColor: "#FF0000",
            strokeOpacity: 1,
            strokeWeight: self.getStrokeWeight(polyline.capacity),
            meta: polyline.meta,
            value: polyline.value,
            clickable: true
        });

    })

finally I can't understand what is the problem? Calculating is not true?