CODEWITHSUNDEEP
iosswiftxcodegoogle-mapsgoogle-polyline
Anupam Das
Anupam Das

Reputation: 51

How to draw a polyline between multiple markers?

Want to draw a PolyLine from userLocation to multiple marker. In my code already added markers coordinates in a array then added userLocation into 0th position of that array. Now I want to draw a route polyLine between array elements. My code is given below...

self.coods.append(self.currentLocation)

                let jsonResponse = response.data
                do{

                    let json = try JSON(data: jsonResponse!)
                    self.dictXYZ = [json]
                    print("JsonResponse printed \(json["data"][0]["lattitude"])")
                    if let array = json["data"].array{
                        for i in 0..<array.count{
                        var coordinate = CLLocationCoordinate2D()
                            coordinate.latitude = array[i]["lattitude"].doubleValue
                            coordinate.longitude = array[i]["longitude"].doubleValue

                            self.coods.append(coordinate)
                        }

                        for j in self.coods {

                            let marker = GMSMarker()

                            marker.position = j
                            let camera = GMSCameraPosition.camera(withLatitude: j.latitude, longitude: j.longitude, zoom: 12)

                            self.mapView.camera = camera
                            marker.map = self.mapView
                        }

Upvotes: 2

Views: 2167

Answers (3)

Vinoth
Vinoth

Reputation: 9764

In the Google Developer Docs.

Waypoints - Specifies an array of intermediate locations to include along the route between the origin and destination points as pass through or stopover locations. Waypoints alter a route by directing it through the specified location(s). The API supports waypoints for these travel modes: driving, walking and bicycling; not transit.

First you need to create a waypoints for all intermediate locations to add the route between the source and destination. With that polyline you can create a GMSPath and then draw the route by using GMSPolyline. I hope below solution can help you to draw a route for multiple locations. 

func getPolylineRoute(from source: CLLocationCoordinate2D, to destinations: [CLLocationCoordinate2D], completionHandler: @escaping (Bool, String) -> ()) {

    guard let destination = destinations.last else {
        return
    }
    var wayPoints = ""
    for (index, point) in destinations.enumerated() {
        if index == 0 { // Skipping first location that is current location.
            continue.  
        }
        wayPoints = wayPoints.count == 0 ? "\(point.latitude),\(point.longitude)" : "\(wayPoints)%7C\(point.latitude),\(point.longitude)"
    }

    let url = URL(string: "https://maps.googleapis.com/maps/api/directions/json?origin=\(source.latitude),\(source.longitude)&destination=\(destination.latitude),\(destination.longitude)&sensor=true&mode=driving&waypoints=\(wayPoints)&key=\(GOOGLE_API_KEY)")!
    let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
        if error != nil {
            print("Failed : \(String(describing: error?.localizedDescription))")
            return
        } else {
            do {
                if let json: [String: Any] = try JSONSerialization.jsonObject(with: data!, options: .allowFragments) as? [String: Any] {
                    guard let routes = json["routes"] as? [[String: Any]] else { return }
                    if (routes.count > 0) {
                        let overview_polyline = routes[0]
                        let dictPolyline = overview_polyline["overview_polyline"] as? NSDictionary
                        let points = dictPolyline?.object(forKey: "points") as? String
                        completionHandler(true, points!)
                    } else {
                        completionHandler(false, "")
                    }
                }
            } catch {
                print("Error : \(error)")
            }
        }
    }
    task.resume()
}

Pass the current location and destination array of locations to getPolylineRoute method. Then call the drawPolyline method with polyline points from main thread.

getPolylineRoute(from: coods[0], to: coods) { (isSuccess, polylinePoints) in
    if isSuccess {
        DispatchQueue.main.async {
            self.drawPolyline(withMapView: self.mapView, withPolylinePoints: polylinePoints)
        }
    } else {
        print("Falied to draw polyline")
    }
}

func drawPolyline(withMapView googleMapView: GMSMapView, withPolylinePoints polylinePoints: String){
    path = GMSPath(fromEncodedPath: polylinePoints)!
    let polyline = GMSPolyline(path: path)
    polyline.strokeWidth = 3.0
    polyline.strokeColor = .lightGray
    polyline.map = googleMapView
}

Upvotes: 1

Samet MACİT
Samet MACİT

Reputation: 121

let path = GMSMutablePath()
for j in self.coods {
path.add(j)
}
let polyline = GMSPolyline(path: path)
polyline.map = mapView

Upvotes: 1

LLIAJLbHOu
LLIAJLbHOu

Reputation: 1313

First create GMSPath object

let path = GMSMutablePath()
self.coods.forEach {
   path.add(coordinate: $0)
}

https://developers.google.com/maps/documentation/ios-sdk/reference/interface_g_m_s_mutable_path.html#af62038ea1a9da3faa7807b8d22e72ffb

Then Create GMSPolyline object using path

let pathLine = GMSPolyline.with(path: path)
pathLine.map = self.mapView

https://developers.google.com/maps/documentation/ios-sdk/reference/interface_g_m_s_polyline.html#ace1dd6e6bab9295b3423712d2eed90a4

Upvotes: 0

Related Questions