All CategoriesAndroid App Development

Draggable Marker: Ola Case Study

We all know how Ola has become our go-to option for getting to and from any place within the city. No more having to bargain with an auto/driver. Travel has truly become easy.
And my appreciation for their services doesn’t quite end here. Now speaking as an Android developer, I noticed a new, exciting feature a week ago: I can now set my location by dragging a marker across the app’s map!
This prompted me to write a blog about the same, explaining to you all the concept behind it. We could use the same concept in the apps that we develop too. Here, I will be sharing with you the tips and tricks of implementing an Ola-like draggable marker for maps for our apps.
As a first step, we will create a new project and will implement the concept of the Draggable Marker in our app’s maps using Google Maps. We will drag and drop the marker to a specific location and then add a pin with an address flag.

Classed and Methods:

Permissions:


Let’s dig into the details of implementing it. We are using draggable markers in online cab apps like Ola, Uber, Rapido, etc. for getting a location by dragging it across. While selecting a pickup and destination place into the Ola app, we can drag the marker from one place to another place.

Example with a Code Snippet:

First, we will create a new project named as “DraggableMarkerDemo” using:
File > New > New Project
Now, we will add a fragment for a map in activity_main.xml:

Now, we will get an API Key from the Google Console for the Google Maps. I am sharing with you a link for steps on how to get an API key for Maps:
https://developers.google.com/maps/documentation/android-api/signup
You will get an API key for maps as shown below, now go to the AndroidManifest.xml file and add the API key in the metadata.

Add some permissions on AndroidManifest.xml:

Add one file for adding the title and a snippet on a marker named ‘popup.xml’.

Now go to MainActivity.java and follow the following steps:

  1. Extend it to the AbstractMapActivity
  2. Implement OnReadyCallback, OnInfoWindowClickListener, and OnMarkerDragListener
  3. Initialize the GoogleMap object


Create a MapFragment class and run the following code:

Set your default marker in onMapReady(..) {} as following:

Add a code in onMarkerDragStart(){..} for dragging.

Add the following code for getting a destination while dragging the marker:

Add some code on the method, onMarkerDragEnd(){..}

Add one adapter for the popup menu of the Marker after clicking on Marker and setting a title and snippet for it.

Add an activity ‘AbstractMapActivity.java’ and add the method readyToGo(){..}, this will help you check if the Google Map is available or not in our apps.

There is one more thing that you need to remember, in order to get an address from the latitude and longitude, you should use the following code. You will get your address with your city’s name by using the code given below:

Your work has been done now. Build your .gradle file, try to compile and run your project, try to resolve whatever errors that you are getting, and then run your app. I hope you should be able to get an output.
You will get a perfect output where you can drag and drop your location from one place to another place and you will get the location’s address as a flag.

Output:


I hope you found this article interesting and helpful for dragging and dropping a marker from one point to another in order to get a specific address. A draggable marker is very useful when you want to drop your origin/destination manually.

Download the code from the following link: GitHub

Enroll for Google Certified Android Development Training conducted by Acadgild and become a successful Android Developer.
 

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles

Close