Show a direction and draw line in google map

Question

I am really stuck in here. i just learn how to show a google map in my View. And now i want to make a direction from one place to other place.

Here is my code so far :

@IBAction func direction(_ sender: Any) {    
Alamofire.request("https://maps.googleapis.com/maps/api/directions/json?" +
        "origin=Disneyland&destination=Universal+Studios+Hollywood4&").responseJSON
        {response in
            if(response.result.isSuccess){
                print(response.result.value)

The link that I use is the example from web. Right now i just want to know how to make a line and a direction.. Thanks for your help

Answer 1

My Answer is in Swift 2 from my code snippet

    //MARK:- Draw Route Betweeen two points
/**
 To draw a route between to cordinates.

 - parameter origin:            Source marker cordinate
 - parameter destination:       destination marker cordinate
 - parameter zoomCamera:        True if you want to zoom the map.
 - parameter completionHandler: GMSPolyline - to draw the route.
 */

func drawRoute(origin: CLLocation, destination: CLLocation, zoomCamera : Bool!, completionHandler: (polyline : AnyObject) -> Void)
{
    let key : String = Macros.apiKeys.key

    let originString: String = "\(origin.coordinate.latitude),\(origin.coordinate.longitude)"

    let destinationString: String = "\(destination.coordinate.latitude),\(destination.coordinate.longitude)"

    let directionsAPI: String = "https://maps.googleapis.com/maps/api/directions/json?"

    let directionsUrlString: String = "\(directionsAPI)&origin=\(originString)&destination=\(destinationString)&key=\(key)"

    Alamofire.request(.GET, directionsUrlString, parameters: ["": ""])
        .responseJSON { response in

            if let JSON = response.result.value
            {
                self.getRoutesWayPointsBetweenCordinates(origin.coordinate, destination: destination.coordinate, completionHandler:
                    { (routesArray) in

                        if routesArray.count > 0
                        {
                            let routesArray : NSArray = JSON.objectForKey("routes") as! NSArray

                            if routesArray.count > 0
                            {
                                let routeDic = routesArray[0]

                                let routeOverviewPolyline = routeDic .objectForKey("overview_polyline")

                                let points : String = routeOverviewPolyline! .objectForKey("points") as! String


                                // Creating Path between source and destination.
                                    self.path = GMSPath(fromEncodedPath: points)

                                    if self.polyline != nil
                                    {
                                        self.polyline.map = nil
                                    }

                                    self.polyline  = GMSPolyline(path: self.path)

                                    self.polyline.strokeWidth = 4.5

                                    self.polyline.geodesic = true

                                    self.animateRoute(self.polyline, origin: origin.coordinate, destination: destination.coordinate, pathColor:UIColor.blueColor(), zoomCamera: zoomCamera)

                                    completionHandler(polyline: self.polyline)
                            }

                        }else
                        {
                            let poly : GMSPolyline = GMSPolyline()
                            poly.strokeWidth = 5.5
                            completionHandler(polyline:  poly)
                        }
                })
            }
    }
}


func animateRoute(polyline : GMSPolyline, origin : CLLocationCoordinate2D, destination : CLLocationCoordinate2D, pathColor : UIColor, zoomCamera : Bool!)
{

    polyline.strokeColor = pathColor

    polyline.map = self.customMapView // Drawing route

    let bounds = GMSCoordinateBounds(path: path)

    var pad : CGFloat = 40.0

    if padding != nil
    {
        pad = padding
    }
    if zoomCamera == true
    {
        zoomCameraWithBounds(bounds, pad: pad)
    }
}

/**
 It will zoom the camera at specific bounds

 - parameter bounds: Bounds around which the camera should zoom
 - parameter pad:    Padding value from the edges of the window.
 */
func zoomCameraWithBounds(bounds : GMSCoordinateBounds, pad : CGFloat)
{
    let camera = self.customMapView.cameraForBounds(bounds, insets:UIEdgeInsetsZero)

    self.customMapView.camera = camera!

    let zoomCamera = GMSCameraUpdate.fitBounds(bounds, withPadding: pad)

    self.customMapView.animateWithCameraUpdate(zoomCamera) // Above lines will update map camera to fit to bounds so that the complete route between source and destination is visible.
}

What you do is call drawRoute function and pass source and destination coordinates to it, also it uses Alamofire for api hit

Important change this Macros.apiKeys.key with your google api key and make sure it has proper features enabled

Answer 2

I will explain using objective-c. I hope you can translate it to swift.

Do you already use this pod 'GoogleMaps', right? I think you already success to show google maps.

GMSMapView *mapView_ = [GMSMapView mapWithFrame:self.mapView.frame camera:camera];

....

So I will skip it.

Here I just explain about show the direction.

NSString *url_string = @"https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood4&";

If your origin and destination is latitude and longitude you can use this api: "https://maps.googleapis.com/maps/api/directions/json?origin=%f,%f&destination=%f,%f"

NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:url_string]];

if (data) {

NSDictionary *json = [NSJSONSerialization JSONObjectWithData:data options:kNilOptions error:&error];
NSArray *routesArray = [json objectForKey:@"routes"];
NSDictionary *routeDict = [routesArray objectAtIndex:0];
NSDictionary *routeOverviewPolyline = [routeDict objectForKey:@"overview_polyline"];
NSString *points = [routeOverviewPolyline objectForKey:@"points"];

GMSMutablePath *path = [GMSMutablePath path];
path = [GMSPath pathFromEncodedPath:points].mutableCopy;

GMSPolyline *rectangle = [GMSPolyline polylineWithPath:path];
rectangle.map = mapView_;

}