Create a Draggable Map Like Uber , OLA in iOS using Swift 4

Draggable Map.

We have seen the Ola or Uber map where the pin is located in middle of Google Map & we can Drag the Map or Zoom also after doing all this , map stop dragging or zooming then

it will show their actual address where the pin located. In iOS we can use Apple Map or Google Map so here I have taken the Example of Google Map.

Please follow this steps.

1: Install the Google Map Framework through POD.

pod 'GoogleMaps'

1	pod 'GoogleMaps'

2: Write the Gopogle Map Key in Appdelegate class.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
   GMSServices.provideAPIKey("sgjsbgjkbsgjdbgjdbgdjgbdjgbdjk");
   return true
}

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

GMSServices.provideAPIKey("sgjsbgjkbsgjdbgjdbgdjgbdjgbdjk");

return true

}

3: Create a view controller & take a one UIView .

Take the one UIView in UIViewController & set the leading , trailing , top , bottom constraints to super view , after that take one UIImageView in middle of UIView and set the constraints center Horizontal & center vertical.

4: Create outlet of UIview & pin Image.

@IBOutlet var mapView: UIView!
@IBOutlet var pinImage: UIImageView!

1 2	@IBOutlet var mapView: UIView! @IBOutlet var pinImage: UIImageView!

5 : Now setup your Map for this I have written the function where i have set the default latitude & longitude.

public var longitude:Double = 77.38066792488098
public var latitude:Double = 28.6517752463408
var GoogleMapView:GMSMapView!
var geoCoder :CLGeocoder!

override func viewDidLoad() {
   super.viewDidLoad()
   self.SetUpMap()
   geoCoder = CLGeocoder()
}


  func SetUpMap(){
        let camera = GMSCameraPosition.camera(withLatitude:self.latitude, longitude: self.longitude, zoom: 12)
        GoogleMapView = GMSMapView.map(withFrame: CGRect(0, 0, SCREEN_WIDTH, self.mapView.frame.height), camera: camera)
        GoogleMapView.delegate = self
        self.mapView.addSubview(GoogleMapView)
        self.mapView.bringSubviewToFront(pinImage)
    }

public var longitude:Double = 77.38066792488098

public var latitude:Double = 28.6517752463408

var GoogleMapView:GMSMapView!

var geoCoder :CLGeocoder!

override func viewDidLoad() {

super.viewDidLoad()

self.SetUpMap()

geoCoder = CLGeocoder()

}

func SetUpMap(){

let camera = GMSCameraPosition.camera(withLatitude:self.latitude, longitude: self.longitude, zoom: 12)

GoogleMapView = GMSMapView.map(withFrame: CGRect(0, 0, SCREEN_WIDTH, self.mapView.frame.height), camera: camera)

GoogleMapView.delegate = self

self.mapView.addSubview(GoogleMapView)

self.mapView.bringSubviewToFront(pinImage)

}

Note: it will show the PIN image on your given Latitude & Longitude position.

Now I have to implement the dragging functionality for this you need to write the delegate method to check when the map is at idle position after dragging. here i have used the geocode for getting the address through latitude & longitude.

6: This Method will call when the Map is at idle position after dragging.

func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
        
        let lat = position.target.latitude
        let lng = position.target.longitude
        
        // Create Location
        let location = CLLocation(latitude: lat, longitude: lng)
        
        // Geocode Location
        geoCoder.reverseGeocodeLocation(location) { (placemarks, error) in
            if let placemarks = placemarks{
                if let location = placemarks.first?.location{
                    //self.addressTextField.text = (placemarks.first?.name ?? "")+" "+(placemarks.first?.subLocality ?? " ")
                    if let addressDict = (placemarks.first?.addressDictionary as? NSDictionary){
                        let dict = JSON(addressDict)
                        self.cityTextField.text = dict["City"].stringValue
                        var address:String = ""
                        for data in dict["FormattedAddressLines"].arrayValue{
                            address = address+" "+data.stringValue
                        }
                                    
                     // here you will get the Address.


                    }
                }
            }
        
        }
    }

func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {

let lat = position.target.latitude

let lng = position.target.longitude

// Create Location

let location = CLLocation(latitude: lat, longitude: lng)

// Geocode Location

geoCoder.reverseGeocodeLocation(location) { (placemarks, error) in

if let placemarks = placemarks{

if let location = placemarks.first?.location{

//self.addressTextField.text = (placemarks.first?.name ?? "")+" "+(placemarks.first?.subLocality ?? " ")

if let addressDict = (placemarks.first?.addressDictionary as? NSDictionary){

let dict = JSON(addressDict)

self.cityTextField.text = dict["City"].stringValue

var address:String = ""

for data in dict["FormattedAddressLines"].arrayValue{

address = address+" "+data.stringValue

}

// here you will get the Address.

}

Note: Now you can get the PIN position Address.

Thanks for reading this Technical blog, I Hope this is helpful for you. If you got any query or issue please ask me on the comment below.

Stay updated and Stay Cool.

kunal prasad 26 October 2021

. . .

Discuss on Helpdesk

9 comments

Aashish Aug 22, 2019 at 2:05 pm

Could you plaese send me the source code

Aashish Aug 22, 2019 at 2:05 pm

Could you plaese send me the source code?

kunal prasad (Moderator) Aug 22, 2019 at 7:55 pm
Can you tell me, what’s an issue you are facing?

Reply
- aashish Aug 23, 2019 at 3:02 pm
  PIN position Address ,city is not fetched on the textfield.
  
  Reply

Kiran Oct 30, 2019 at 2:38 am

I am requesting for the source code for the implementation which you have done

vinay Nov 4, 2019 at 12:06 pm

The tutorial is great, but it would be even wonderful. if you can make the source code available for download.

KOSURU UDAY SAIKUMAR Feb 24, 2020 at 12:23 pm

Can you please upload the source code

Ahsan Iqbal Sep 10, 2021 at 9:19 pm

Can you please let me have the complete source code of the functionality you described here? Thanks.

anchit (Moderator) Sep 25, 2021 at 6:09 pm

Please let us know the issue which you are getting while following the article.

Reply