Google Map Draw Polyline between multiple latitude longitude

Question

I have an array of latitude & longitude and I want to draw polyline using those data.

Array data are as below,

[
     {
        address = "Gota, Godrej Garden City Road, Ahmedabad, India, 382481 ",
        city = Ahmedabad,
        latitude = "23.10104251103548",
        longitude = "72.54941169820619",
        street = "Godrej Garden City Road",
     },
     {
        address = "Aaryan Eureka Opposite Shayona Shikhar, Vandemataram Rd, Gota, Ahmedabad, Gujarat 382481",
        city = Ahmedabad,
        latitude = "23.09644251103548",
        longitude = "72.54801169820619",
        street = "Vandemataram Rd",
     },
     ....// Hundreds of records
]

Code which I tried so far,

let path = GMSMutablePath()
    for mapData in arrMapData {
        path.add(CLLocationCoordinate2D(latitude: mapData.latitude ?? 0.0, longitude: mapData.longitude ?? 0.0))
    }
    let polyline = GMSPolyline(path: path)
    polyline.strokeWidth = 3.0
    polyline.strokeColor = .black
    polyline.map = mapView // Google MapView

    // Creates a marker in the center of the map.
    let marker = GMSMarker()
    marker.position = CLLocationCoordinate2D(latitude: arrMapData[0].latitude ?? 0.0, longitude: arrMapData[0].longitude ?? 0.0)
    marker.icon = UIImage(named: AppImages.Pin_red)
    marker.title = sourceTitle
    marker.snippet = sourceSnippet
    marker.map = mapView

    let marker1 = GMSMarker()
    marker1.position = destination
    marker1.icon = UIImage(named: AppImages.Map_pin_orange)
    marker1.title = destinationTitle
    marker1.snippet = destinationSnippet
    marker1.map = mapView

I am aware about Google Direction API, but I don't need to call that api because I already have all those latitude and longitude data... And even calling direction api for all hundred records is also not a feasible solution.

My above code not giving me any kind of error. It is plotting two pins on the Map which seems correct to me[Source destination details added from 0th index object from array and last index object from Array].

But no polyline is added on Map. I am looking for some solution to this. Thank you!

make sure your mapData.latitude and mapData.longitude is number and > 0 — Trai Nguyen

Trai Nguyen Trai Nguyen · Accepted Answer · 2020-04-30T04:18:43

From your code, I modify array lat and lng as below function

func drawPolyline(){
        let location: CLLocationCoordinate2D = CLLocationCoordinate2D(latitude: 23.10104251103548, longitude: 72.54941169820619)
        let camera = GMSCameraPosition.camera(withTarget: location, zoom: 18)
        self.mapContentView.mapView.animate(to: camera)

        let arrLat = [23.10104251103548, 23.09644251103548, 23.08644251103548, 23.07644251103548, 23.06644251103548]
        let arrLng = [72.54941169820619, 72.54801169820619, 72.54701169820619, 72.54601169820619, 72.54501169820619]
        let path = GMSMutablePath()
        for i in 0..<arrLat.count {
            path.add(CLLocationCoordinate2D(latitude: arrLat[i], longitude: arrLng[i]))
        }
        let polyline = GMSPolyline(path: path)
        polyline.strokeWidth = 3.0
        polyline.strokeColor = .black
        polyline.map = self.mapContentView.mapView

        let marker = GMSMarker()
        marker.position = CLLocationCoordinate2D(latitude: 23.10104251103548, longitude: 72.54941169820619)
        marker.icon = UIImage(named: "ic_marker")
        marker.title = "A"
        marker.snippet = "ABC"
        marker.map = self.mapContentView.mapView

        let marker1 = GMSMarker()
        marker1.position = CLLocationCoordinate2D(latitude: 23.06644251103548, longitude: 72.54501169820619)
        marker1.icon = UIImage(named: "ic_marker")
        marker1.title = "B"
        marker1.snippet = "EFG"
        marker1.map = self.mapContentView.mapView
    }

And the result HERE

I think you should try with some sample lat & lng first in your app. If it work, so the problem come from your parse data.

Google Map Draw Polyline between multiple latitude longitude

1 Answers