Android Google Map Draw Path/Line/Route Between Two Points/Markers

Learn about Android Google Map Draw Path or Polyline Between two markers tutorial example.

In this tutorial, we will draw a route between two points on google map in our android app.

If you are making an app for cab locator or something like this, you need to show path or line between two points on the google map.

This tutorial will simplify this process for you.

See the below video which is the last output of this example

Creating API on google console

First of all, we need to create a new application on google developer console.

For this, follow the “Work At Google Developer Console” part in Google Map Android Tutorial.

Once you have done above step, you will have one Google API key, which we will add in android studio project in few minutes.

After creating API key, we need to enable the Directions API.

Now, see the below image

android google map draw path

 

  • At google developer console Click on the navigation menu icon as show in above image.
  • System will open one sliding menu which is looking like the below image
android google map draw path

Sliding menu

  • As per the image, click on APIs option.

It will led you to the screen like the following image

android google map draw path

Direction API

When you click on Directions API, system will open the below screen

android google map draw path

ENABLE API

  • Click on the ENABLE button as per image.
  • Make sure that you have enabled Direction API otherwise you will not be able to draw a path between two markers.

At this stage, we have Google API key and we have enable Directions API.

Tasks on Android Studio

Now come to android studio and create a new project.

Do not select “Maps Activity”, while making new project instead select “Empty Activity.”

Now follow all the below steps.

Step 1. Writing API key

Under the res->values->strings.xml file add the below code line

  • Replace “YOUR_GOOGLE_API_KEY” with your original API which you have already generated.

Step 2. Dependency and Manifest Works

Write down the below line in the build.gradle(Module: app) file.

  • Above file is fetching the required classes to use google map in our project.

Now in the AndroidManifest.xml file, add the below code structure in <application> tag.

Now add the internet permission,

Final code for AndroidManifest.xml file is as the below

Step 3. Required Interface

Create a new JAVA class named TaskLoadedCallback.java

Source code for TaskLoadedCallback.java is as the following

Step 4. PointParser class

Make a new JAVA class and give it a name like PointParser.java

Add the following source code in PointParser.java

  • This class will parse the JSON data which we have received from the google.
  • When we want to draw the route, we need to parse one URL which consist the location (latitude and longitude) of both origin and destination places.

This URL is looking like below

This URL is just for information, we do not need to add it to our project.

Changing the color of path

By default, we will draw a RED colored path between two markers.

If you want to change it’s color than you should change below lines

Above code is the part of the onPostExecute() method.

Step 5. FetchURL code

Prepare another JAVA class and name of this class should be FetchURL.java

Source Code block for FetchURL.java is looking like the below

This class is making the http call to the URL.

In this class, we are also setting the mode of transport.

We’ve set the directionMode=driving in the current application.
The other modes of transport are:

  • driving (default)
  • walking
  • bicycling
  • transit

To change the mode, update the below line

Step 6. DataParser class

Time to create a new class and it’s name is like DataParser.java

Code block of DataParser.java is something like the following

As the name suggests, this class is parsing the JSON data which google have sent us.

Step 7. Final Words

Now we just need to change two main files. activity_main.xml and MainActivity.java

Source code for activity_main.xml is something like the following

  • First widget is the fragment. We will load the google map in this widget only.
  • Second one is the button. When the user will click the button, we will draw a polyline between two points.

Now in the MainActivity.java file, write down the following source code lines

Let us understand above code step by step.

Consider the following code

  • Using above lines, compiler will create objects of various classes like GoogleMap, MarkerOptions etc.

There are below important lines in the onCreate() method.

  • First two lines are adding two markers on the google map.
  • You can change latitude and longitude of source and destination (place1 and place2) using first two lines.
  • Then compiler will get the mapfragment using the findFragmentById and then it will initialize the google map.

When the google map has finished it’s initialization process, then it will animate the camera using below code

You can change some camera parameters like zoom, tilt, target place etc.

When the user clicks the button, compiler will execute the below coding lines

Here, it is the starting point of the process of drawing the path route between markers.

If you have followed above tutorial lines perfectly then you should get the output as you have shown in the output video at the starting of the tutorial.

Possible Errors

When drawing route on google map, there can be two most common errors you may have to face.

First is like This API project is not authorized to use this API.

Look at this below image

Search for “mylog” as per the above image in the logcat.

I was getting this error and it took me 6 hours to solve this. And the problem was that my Directions API was not enable !!

So do not waste your time when you are getting this error and quickly enable Directions API. (This is the prime intention of this blog to help you solve this type of simple errors that might eat your big amount of time)

Second possible error is that “You have exceeded your daily request” like following image

It means that your free trial is over. Either you have to use your credit card to get more requests or simply wait for 24 hours.

Download Source Code for Android Google Map Draw Path

Download Source code for Google_Map_Path_Two_Location

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

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