Skip to main content

Draggable Marker and Drawing the routes between them using Google Maps | IOS | Swift

By
This blog is about how we can make the marker draggable and get the current location from it and to draw the routes between them.

For that we have to install the pods of Google maps from developer.google.com.
Then we have to add the following 
  pod 'GoogleMaps'
  pod 'GooglePlaces'
  pod 'GooglePlacesAPI'
  pod 'SwiftyJSON'

And we have to save the pods into the pod file.
Then, we have to install all the pods through terminal.

Again we have to make the outlet for textfield and button as discussed below.
2 TextField and 3 Buttons.

Hope you will enjoy the coding. Happy coding.!


import UIKit
import GoogleMaps
import GooglePlaces
import SwiftyJSON
import Alamofire

enum Location {
case startLocation
case destinationLocation
}

class ViewController: UIViewController , GMSMapViewDelegate ,  CLLocationManagerDelegate {
@IBOutlet weak var googleMaps: GMSMapView!
@IBOutlet weak var startLocation: UITextField!
@IBOutlet weak var destinationLocation: UITextField!

var locationManager = CLLocationManager()
var locationSelected = Location.startLocation
    var polyline = GMSPolyline()
    var locationStart = CLLocation()
var locationEnd = CLLocation()
override func viewDidLoad() {
super.viewDidLoad()
locationManager = CLLocationManager()
locationManager.delegate = self
locationManager.requestWhenInUseAuthorization()
locationManager.startUpdatingLocation()
locationManager.desiredAccuracy = kCLLocationAccuracyBest
locationManager.startMonitoringSignificantLocationChanges()
//Your map initiation code
let camera = GMSCameraPosition.camera(withLatitude: 28.524555, longitude: 77.275111, zoom: 6.0)
self.googleMaps.camera = camera
self.googleMaps.delegate = self
self.googleMaps?.isMyLocationEnabled = true
self.googleMaps.settings.myLocationButton = true
self.googleMaps.settings.compassButton = true
self.googleMaps.settings.zoomGestures = true
}
// MARK: function for create a marker pin on map
func createMarker(titleMarker: String, iconMarker: UIImage, latitude: CLLocationDegrees, longitude: CLLocationDegrees) {
let marker = GMSMarker()
marker.position = CLLocationCoordinate2DMake(latitude, longitude)
        marker.isDraggable=true
marker.title = titleMarker
marker.icon = iconMarker
marker.map = googleMaps
}
//MARK: - Location Manager delegates
func locationManager(_ manager: CLLocationManager, didFailWithError error: Error) {
print("Error to get location : \(error)")
}
    
    
func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
let location = locations.last
// let camera = GMSCameraPosition.camera(withLatitude: (location?.coordinate.latitude)!, longitude: (location?.coordinate.longitude)!, zoom: 17.0)
let locationMobi = CLLocation(latitude: 28.524555, longitude: 77.275111)
drawPath(startLocation: location!, endLocation: locationMobi)
//self.googleMaps?.animate(to: camera)
self.locationManager.stopUpdatingLocation()
}
// MARK: - GMSMapViewDelegate
func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
googleMaps.isMyLocationEnabled = true
}
func mapView(_ mapView: GMSMapView, willMove gesture: Bool) {
googleMaps.isMyLocationEnabled = true
if (gesture) {
mapView.selectedMarker = nil
}
}
func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
googleMaps.isMyLocationEnabled = true
return false
}
func mapView(_ mapView: GMSMapView, didTapAt coordinate: CLLocationCoordinate2D) {
print("COORDINATE \(coordinate)") // when you tapped coordinate
}
func didTapMyLocationButton(for mapView: GMSMapView) -> Bool {
googleMaps.isMyLocationEnabled = true
googleMaps.selectedMarker = nil
return false
}
    
    //MARK: - Marker Delegate
    func mapView(_ mapView: GMSMapView, didDrag marker: GMSMarker) {
    
    
        }
    
    func mapView(_ mapView: GMSMapView, didBeginDragging marker: GMSMarker) {
        
        
    }
    
    func mapView(_ mapView: GMSMapView, didEndDragging marker: GMSMarker) {
        self.googleMaps.reloadInputViews()

        //self.polyline.map = nil;
        print("marker dragged to location: \(marker.position.latitude),\(marker.position.longitude)")
       let locationMobi = CLLocation(latitude: marker.position.latitude, longitude: marker.position.longitude)
        self.drawPath(startLocation: locationMobi, endLocation: locationEnd)

    }


//MARK: - this is function for create direction path, from start location to desination location
func drawPath(startLocation: CLLocation, endLocation: CLLocation)
{
let origin = "\(startLocation.coordinate.latitude),\(startLocation.coordinate.longitude)"
let destination = "\(endLocation.coordinate.latitude),\(endLocation.coordinate.longitude)"
        self.polyline.map = nil
        //self.googleMaps.clear()

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 route using Polyline
for route in routes
{
let routeOverviewPolyline = route["overview_polyline"].dictionary
let points = routeOverviewPolyline?["points"]?.stringValue
let path = GMSPath.init(fromEncodedPath: points!)
                self.polyline = GMSPolyline.init(path: path)
self.polyline.strokeWidth = 2
self.polyline.strokeColor = UIColor.red
self.polyline.map = self.googleMaps
}
}
}
// MARK: when start location tap, this will open the search location
@IBAction func openStartLocation(_ sender: UIButton) {
let autoCompleteController = GMSAutocompleteViewController()
autoCompleteController.delegate = self
// selected location
locationSelected = .startLocation
// Change text color
UISearchBar.appearance().setTextColor(color: UIColor.black)
self.locationManager.stopUpdatingLocation()
self.present(autoCompleteController, animated: true, completion: nil)
}
// MARK: when destination location tap, this will open the search location
@IBAction func openDestinationLocation(_ sender: UIButton) {
let autoCompleteController = GMSAutocompleteViewController()
autoCompleteController.delegate = self
// selected location
locationSelected = .destinationLocation
// Change text color
UISearchBar.appearance().setTextColor(color: UIColor.black)
self.locationManager.stopUpdatingLocation()
self.present(autoCompleteController, animated: true, completion: nil)
}
// MARK: SHOW DIRECTION WITH BUTTON
@IBAction func showDirection(_ sender: UIButton) {
// when button direction tapped, must call drawpath func
self.drawPath(startLocation: locationStart, endLocation: locationEnd)
}

}

// MARK: - GMS Auto Complete Delegate, for autocomplete search location
extension ViewController: GMSAutocompleteViewControllerDelegate {
func viewController(_ viewController: GMSAutocompleteViewController, didFailAutocompleteWithError error: Error) {
print("Error \(error)")
}
func viewController(_ viewController: GMSAutocompleteViewController, didAutocompleteWith place: GMSPlace) {
// Change map location
let camera = GMSCameraPosition.camera(withLatitude: place.coordinate.latitude, longitude: place.coordinate.longitude, zoom: 16.0
)
// set coordinate to text
if locationSelected == .startLocation {
startLocation.text = "\(place.coordinate.latitude), \(place.coordinate.longitude)"
locationStart = CLLocation(latitude: place.coordinate.latitude, longitude: place.coordinate.longitude)
createMarker(titleMarker: "Location Start", iconMarker: #imageLiteral(resourceName: "mapspin"), latitude: place.coordinate.latitude, longitude: place.coordinate.longitude)
} else {
destinationLocation.text = "\(place.coordinate.latitude), \(place.coordinate.longitude)"
locationEnd = CLLocation(latitude: place.coordinate.latitude, longitude: place.coordinate.longitude)
createMarker(titleMarker: "Location End", iconMarker: #imageLiteral(resourceName: "mapspin"), latitude: place.coordinate.latitude, longitude: place.coordinate.longitude)
}
self.googleMaps.camera = camera
self.dismiss(animated: true, completion: nil)
}
func wasCancelled(_ viewController: GMSAutocompleteViewController) {
self.dismiss(animated: true, completion: nil)
}
func didRequestAutocompletePredictions(_ viewController: GMSAutocompleteViewController) {
UIApplication.shared.isNetworkActivityIndicatorVisible = true
}
func didUpdateAutocompletePredictions(_ viewController: GMSAutocompleteViewController) {
UIApplication.shared.isNetworkActivityIndicatorVisible = false
}
}

public extension UISearchBar {
public func setTextColor(color: UIColor) {
let svs = subviews.flatMap { $0.subviews }
guard let tf = (svs.filter { $0 is UITextField }).first as? UITextField else { return }
tf.textColor = color
}

}

Comments

Post a Comment

Popular posts from this blog

Route between two places using Google Maps iOS SDK.

By
Its very interesting to have the Google maps  Firstly. We have to install the pods of Google maps. So, follow the steps for installing the pods of Google maps on developers.google.com 1. Create the pod file as on the site. 2. In Podfile add the pod of Alamofire and SwiftyJSON. 3. Save the pod file.      pod 'GoogleMaps'     pod 'GooglePlaces'     pod 'Alamofire' , '~> 4.2.0'     pod 'SwiftyJSON' 4. Install the pods. Here is the code for route. import UIKit import GoogleMaps import GooglePlaces import Alamofire import SwiftyJSON class GoogleViewController: UIViewController , GMSMapViewDelegate {     @IBOutlet weak var googleView: GMSMapView !          // AIzaSyC907BQBnrZK0UjA2zARtE6Mq7L__yqw5Q     override func viewDidLoad() {         super . viewDidLoad ()         GMSSe...
Post a Comment
Read more

Cancellable Task with Dispatch Work Item | iOS | Swift

By iOS Developer
In some scenarios, we all want that the task we want to perform should be cancellable later on. For this kind of behaviour, we already have OperationQueue but the use of It seems difficult for beginners. Most of us didn't use OperationQueue so frequently and were only familiar with Grand Central Dispatch (GCD) . by performing UI operations in the main thread, Dispatch Group, etc. By the use of DispatachWorkItem , we can create some tasks that can be cancelled later on. Here is the example, let workItem = DispatchWorkItem {     // Here is our task     debugPrint ( "Task is to print some text..." ) } This is DispatchWorkItem containing a task to print something. To perform this task, we need to make use of DispatchQueue like this by adding delay if required. DispatchQueue . main . asyncAfter (deadline: . now () + . seconds ( 1 ), execute: workItem ) Here is the basic example to add a task and perform it using DispatchQueue. Now to cancel that we need to keep the re...
Post a Comment
Read more