Draw polyline using Google Maps in custom view with Swift 3

Viewed 22767

I am trying to draw route between two places using Google Maps on a custom UIView but not able to get it correctly implemented. My custom view is mapViewX. I've installed google sdk using pods which includes pod 'GoogleMaps' and pod 'GooglePlaces'. I made custom-view Class as 'GMSMapView'. my code is :

    @IBOutlet weak var mapViewX: GMSMapView!

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    let path = GMSMutablePath()
    path.add(CLLocationCoordinate2D(latitude: 37.778483, longitude: -122.513960))
    path.add(CLLocationCoordinate2D(latitude: 37.706753, longitude: -122.418677))
    let polyline = GMSPolyline(path: path)
    polyline.strokeColor = .black
    polyline.strokeWidth = 10.0
    polyline.map = mapViewX

}

Please help!

3 Answers

Swift 4

Create global variables.

var sourceLat = 0.0
var sourceLong = 0.0
var DestinationLat = 0.0
var DestinationLong = 0.0
var startLOC = CLLocation()
var endLOC = CLLocation()

Install Pod Alamofire and SwiftJSON.

pod 'Alamofire', '~> 4.5'
pod 'SwiftyJSON'

Make a function for draw route between source and destination.

func drawPath(startLocation: CLLocation, endLocation: CLLocation)
{
    let origin = "\(startLocation.coordinate.latitude),\(startLocation.coordinate.longitude)"
    let destination = "\(endLocation.coordinate.latitude),\(endLocation.coordinate.longitude)"
    let url = "https://maps.googleapis.com/maps/api/directions/json?origin=\(origin)&destination=\(destination)&mode=driving"

    Alamofire.request(url).responseJSON { response in
        //print(response.request as Any)  // original URL request
        //print(response.response as Any) // HTTP URL response
        //print(response.data as Any)     // server data
        //print(response.result as Any)   // result of response serialization

        let json = JSON(data: response.data!)
        let routes = json["routes"].arrayValue
        print(json)
        // print route using Polyline

        DispatchQueue.global(qos: .default).async(execute: {() -> Void in
            // Do something...
            DispatchQueue.main.async(execute: {() -> Void in
               // self.hideHUD()
            })
        })
        for route in routes
        {
            let routeOverviewPolyline = route["overview_polyline"].dictionary
            let points = routeOverviewPolyline?["points"]?.stringValue
            let path = GMSPath.init(fromEncodedPath: points!)
            let polyline = GMSPolyline.init(path: path)
            polyline.strokeWidth = 4
            polyline.strokeColor =  UIColor.black
            polyline.map = self.mapViewBus

        }

    }
}

Create button action provide it source route and destination route. Giving Latitude and Longitude. After that paste the code.

 // Route Source & Destination
            self.startLOC = CLLocation(latitude: sourceLat, longitude: sourceLong)
            self.endLOC = CLLocation(latitude: DestinationLat, longitude: DestinationLong)

            drawPath(startLocation: startLOC, endLocation: endLOC)


            let marker = GMSMarker()
            marker.position = CLLocationCoordinate2D(latitude: sourceLat, longitude: sourceLong)
           // marker.icon = userImage.af_imageScaled(to: CGSize(width: 50, height: 50)).af_imageRoundedIntoCircle()
            marker.title = "Source"
            marker.map = mapViewBus


            let markerr = GMSMarker()
            markerr.position = CLLocationCoordinate2D(latitude: DestinationLat, longitude: DestinationLong)
           // markerr.icon =  washerImage.af_imageScaled(to: CGSize(width: 50, height: 50)).af_imageRoundedIntoCircle()
            markerr.title = "Desintation"
            markerr.map = mapViewBus

            let camera = GMSCameraPosition.camera(withLatitude: sourceLat, longitude: sourceLong, zoom: 14.0)
            self.mapViewBus.camera = camera
            self.mapViewBus.animate(to: camera)
Related