How to draw route with google map in iOS

Hello Guys, Welcome to this tutorial. I hope you are doing well. Here once again I came with a new wonderful tutorial. Which is as How to draw Route in iOS with Google Map. In this tutorial, I will make you understand how you can draw routes on the map in iOS with the help of google maps library. Here I will make clear each and everything with the help of a basic example.

Draw Route with Google Map in iOS

If did not read my tutorial on Draw Route with MKViewKit in iOS, then you must go through with it first and with repeated video as well. After seeing that you can compare which one is best for you and which one is easy to implement. Google Map or MKViewKit?.

Install Google Maps Library in iOS

• First you have to install the pod in your project. So that you can use the google maps functionality easily.
• For installing the Pods in your project you can refer this tutorial
• After installing the pods you can add library in your project.
• So open your pod file and add the library inside it.

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'MapViewKit' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for MapViewKit
  
  pod 'GoogleMaps'
  pod 'GooglePlaces'
  pod 'Alamofire'
  pod 'SwiftyJSON'

  target 'MapViewKitTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'MapViewKitUITests' do
    # Pods for testing
  end

end

Wonderful, After that Clean your Xcode project and build. So that we can use the required libraries for achieving our goals. Now, It’s time to initialise the Google maps services for our project. So open your AppDelegate.swift and edit that as given below.

import UIKit
// MARK: Import Google Maps here
import GoogleMaps

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {



    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // MARK: Add your project key here
        GMSServices.provideAPIKey("YOUR_API_KEY")
        
        return true
    }

    func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
    }

    func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
    }
}

Great work, I think you are looking for YOUR_API_KEY. This key will be provided by the google. And for that you have to visit on this link. 

Once you complete with creation of the keys then you have to add the billing to Google Cloud for the Maps and follow all the required step which is suggested by the google.

Now Let’s move to next step. And in the next step you have add on view to your StoryBoard view Controller as mention into the below image. 

Integrate the functionality for GoogleMapViewController.swift

After that, You need to do some coding so that you could achieve your desire goal. I hope you have set the Outlet of your GMSMapView into your GoogleMapController.swift. If yes then let’s do the coding for that.

At the very first add properties to your GoogleMapController.swift

@IBOutlet weak var mapView: GMSMapView!

// MARK: Define the source latitude and longitude
let sourceLat = 28.704060
let sourceLng = 77.102493
    
// MARK: Define the destination latitude and longitude
let destinationLat = 28.459497
let destinationLng = 77.026634

Great 👍 Work, In next task we will take the data from JSON response and we will set polyline to our map.  Before doing that we have to create the URL for fetching the points for the directions from the google. So here it is 😊😊

// MARK: Create source location and destination location so that you can pass it to the URL
let sourceLocation = "\(sourceLat),\(sourceLng)"
let destinationLocation = "\(destinationLat),\(destinationLng)"
        
// MARK: Create URL
let url = "https://maps.googleapis.com/maps/api/directions/json?origin=\(sourceLocation)&destination=\(destinationLocation)&mode=driving&key=YOUR_API_KEY"

Well done, Till now you are on the track. Now you need to fetch data from the Google API and you need to add to you map. As I have done below. 

// MARK: Request for response from the google
        AF.request(url).responseJSON { (reseponse) in
            guard let data = reseponse.data else {
                return
            }
            
            do {
                let jsonData = try JSON(data: data)
                let routes = jsonData["routes"].arrayValue
                
                for route in routes {
                    let overview_polyline = route["overview_polyline"].dictionary
                    let points = overview_polyline?["points"]?.string
                    let path = GMSPath.init(fromEncodedPath: points ?? "")
                    let polyline = GMSPolyline.init(path: path)
                    polyline.strokeColor = .systemBlue
                    polyline.strokeWidth = 5
                    polyline.map = self.mapView
                }
            }
             catch let error {
                print(error.localizedDescription)
            }
        }

Great work, Now we will set the marker to the map for source and our destination location. And below is the code for that. 

// MARK: Marker for source location
        let sourceMarker = GMSMarker()
        sourceMarker.position = CLLocationCoordinate2D(latitude: sourceLat, longitude: sourceLng)
        sourceMarker.title = "Delhi"
        sourceMarker.snippet = "The Capital of INDIA"
        sourceMarker.map = self.mapView
        
        
        // MARK: Marker for destination location
        let destinationMarker = GMSMarker()
        destinationMarker.position = CLLocationCoordinate2D(latitude: destinationLat, longitude: destinationLng)
        destinationMarker.title = "Gurugram"
        destinationMarker.snippet = "The hub of industries"
        destinationMarker.map = self.mapView
        

Wonderful, After that, We will zoom the map and animate to the source location so that we can see the clear output and path in between two selected points. 

let camera = GMSCameraPosition(target: position, zoom: 10)
self.mapView.animate(to: camera)

Great work, In Conclusion you have achieve your goal. If you have any doubt related this tutorial then you can comment below or you can watch the video. 

😊😊😊😊😊 Happy Coding 😊😊😊😊 Happy Life 😊