GoogleMaps : How to draw dash line to connect with starting point of direction path on google map ios

Question

I am using google map in the my project for direction & show route. I had done all things but I am not able to draw the dash line to connect with starting point of route from my location or building.

See my app screenshot screenshot 1

Now I want to draw dash line like google-maps screenshot 2

Any advice and suggestions will be greatly appreciated

Answer 1

For add dash line to connect with starting & end point you have to do little more stuffs in direction path json response, I have drawn straight dash polyline somewhere, if you got code related curved line then update your answer also,

Russell suggested link will little helpful to you,

Drawing Route Between Two Places on GMSMapView in iOS

You have to do following stuffs,

func drawRoute(coordinate: CLLocationCoordinate2D) {

    //        let directionURL = "https://maps.googleapis.com/maps/api/directions/json?" +
    //            "origin=\(19.0760),\(72.8777)&destination=\(18.520),\(72.9781)&" +
    //        "key=AIzaSyBdzgSm8g6w3daxTQvtlG9pqBxrj3lkaN0"
    //

    var directionURL =  "https://maps.googleapis.com/maps/api/directions/json?origin=\(coordinate.latitude),\(coordinate.longitude)&destination=\(18.5767),\(73.6881)&key=AIzaSyARoB09HGFjDy3IKfLpZq-ZQd3YwUT-3_E"

    //AIzaSyDxSgGQX6jrn4iq6dyIWAKEOTneZ3Z8PtU

    directionURL += "&mode=" + "walking"

    print("drawRoute")


    Alamofire.request(directionURL).responseJSON
        { response in

            if let JSON = response.result.value {

                let mapResponse: [String: AnyObject] = JSON as! [String : AnyObject]

                let routesArray = (mapResponse["routes"] as? Array) ?? []

                let routes = (routesArray.first as? Dictionary<String, AnyObject>) ?? [:]
                //print("routes : \(routes)")

                //--------Dash line lat-long for starting point ----------\\

                let dictArray = (routes["legs"] as? Array) ?? []
                let dict = (dictArray.first as? Dictionary<String, AnyObject>) ?? [:]
                let steps = (dict["steps"] as? Array) ?? []
                let stepsDict = (steps.first as? Dictionary<String, AnyObject>) ?? [:]

                let startLocation = stepsDict["start_location"]
                let lat = startLocation!["lat"] as! NSNumber
                let lng = startLocation!["lng"] as! NSNumber
                print("lat : \(lat) lng : \(lng)")

                let dotCoordinate = CLLocationCoordinate2D(latitude: CLLocationDegrees(lat), longitude: CLLocationDegrees(lng))

                //--------Route polypoints----------\\


                let overviewPolyline = (routes["overview_polyline"] as? Dictionary<String,AnyObject>) ?? [:]
                let polypoints = (overviewPolyline["points"] as? String) ?? ""
                let line  = polypoints

                self.addPolyLine(encodedString: line, coordinate:coordinate , dotCoordinate:dotCoordinate)
            }
    }

}

Now draw route polyline & dash line like following way,

func addPolyLine(encodedString: String, coordinate: CLLocationCoordinate2D ,dotCoordinate : CLLocationCoordinate2D) {

    //--------Dash line to connect starting point---------\\

    let dotPath :GMSMutablePath = GMSMutablePath()
    // add coordinate to your path
    dotPath.add(CLLocationCoordinate2DMake(coordinate.latitude, coordinate.longitude))
    dotPath.add(CLLocationCoordinate2DMake(dotCoordinate.latitude, dotCoordinate.longitude))

    let dottedPolyline  = GMSPolyline(path: dotPath)
    dottedPolyline?.map = self.viewMap
    dottedPolyline?.strokeWidth = 3.0
    let styles: [Any] = [GMSStrokeStyle.solidColor(UIColor.green), GMSStrokeStyle.solidColor(UIColor.clear)]
    let lengths: [Any] = [10, 5]
    dottedPolyline?.spans = GMSStyleSpans(dottedPolyline?.path!, styles as! [GMSStrokeStyle], lengths as! [NSNumber], kGMSLengthRhumb)

    //---------Route Polyline---------\\

    let path = GMSMutablePath(fromEncodedPath: encodedString)
    let polyline = GMSPolyline(path: path)
    polyline?.strokeWidth = 5
    polyline?.strokeColor = .blue
    polyline?.map = self.viewMap

}

See output:

Answer 2

create a MKPolyLine like this

    var pointsToUse: [CLLocationCoordinate2D] = []
    pointsToUse += [CLLocationCoordinate2DMake(55.4, -3.2)]  // current location
    pointsToUse += [CLLocationCoordinate2DMake(55.6, -3.4)]  // lat lon of starting point

    let polyline = MKPolyline(coordinates: &pointsToUse, count: pointsToUse.count)
    mapView.add(polyline, level: MKOverlayLevel.aboveRoads)

and then update the MapView renderer like this

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer
{
    if (overlay is MKPolyline)
    {
        let pr = MKPolylineRenderer(overlay: overlay)
        pr.strokeColor = UIColor.blue.withAlphaComponent(0.5)
        pr.lineWidth = 2
        pr.lineDashPattern = [10, 10]
        return pr
    }
}