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

you have two locations - why not just draw a line between them? Do you mean to have a curved path as shown? If there's no route defined there, how do you come up with that line rather than a straight line between the two points? — Russell, Mar 15 '17 at 11:58
Bro that is the my question i just want to connect to starting point of route from my location/building like google map.(If you are telling to draw line then i don't have starting point lat-long its just return polypoints to draw line like `"c}kpB{daaM_G\\kBNUD@Ns@r@kAlBw@tAKr@Cd@MX{A`C}BnD[d@LJaD`FS\\UV_@Ty@\\ADNz@HXZx@zBbETh@tAdD`AjAd@r@z@dC|A~Er@jCjB|FzArE`@|Af@jCt@xDfAhH^xCL|AFj@Tt@~EpKrAdDh@~Av@nCrAvFvApGp@rBx@`B^p@VXNR`@x@Xn@n@tBh@~AXp@Zl@z@rAFTFfABh@Hv@ThAp@lCr@~D`BnNZhDPlAr@hEB`@Bl@F~BD|FAnCB~CAdCEjCBrDDzANbAJt@Fj@CbAGlA?~ATvB@l@Gt@UjBMv@UhBAbAH`AHlBBdA?`@e@DgAHcIj@[@@RcEZ"`) — , Mar 15 '17 at 12:06
then convert your current location to another polypoint, and add a MKPolyLine to the map — Russell, Mar 15 '17 at 12:07
its not possible at all to convert current location directly to polypoints :( — , Mar 15 '17 at 12:15
Please does anyone have idea to do it exact like googlemaps? — , Mar 15 '17 at 12:17
@yummy , hi, did you found the solution to show dotted arc line between starting point and marker as in 2nd screenshot? — user3853770, Apr 22 '20 at 06:55

score 4 · Accepted Answer · edited May 23 '17 at 12:17

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:

No words to say thank you its **working for me** & sure if i got for curve line i will update to you. — , Mar 16 '17 at 13:08

score 0 · Answer 2 · answered Mar 15 '17 at 12:34

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
    }
}

Russell how it is possible to show this on googleMap ? :( `mapView.add(polyline, level: MKOverlayLevel.aboveRoads)` not accessible to **GMSMapView** — , Mar 15 '17 at 13:01
my mistake - I'm using `MKMapView`. As far as I can see, it's very similar, but you use `polyline.map = mapView'. There are some good examples here http://stackoverflow.com/questions/22550849/drawing-route-between-two-places-on-gmsmapview-in-ios — Russell, Mar 15 '17 at 14:11

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

2 Answers2