I have been trying this for a month and a lot of my readers asked to write a tutorial that makes it easy to draw a line on Google Maps for Android between two locations. I have gone through a lot of material. Most of the articles on this exact issue are not exactly addressing this specific issue. So their code is way too complex for this simple task. I have tried to make this as simple as possible.

Assumption About The Reader:

At this point I assume that reader of this article have already configured everything and Google Maps are displayed in their emulator properly. For those who don’t have Google Maps properly displayed in their emulator, they can read my earlier articles. Links provided at the end of this article.

Objective:

Draw a line that between two points on Google Maps lets say City “A” and City “B”. Repeat the process to draw a line between City “B” and City “C”.

What we need:

Coordinates of 3 cities or any 3 locations that we want to connect.

  1. Abbottabad :   34159000,73220000
  2. Islamabad :      33695043,73050000
  3. Rawalpindi :    33615043, 73050000

I have taken relative coordinates of 3 Pakistani cities starting from Abbottabad (where my family lives), moving to Islamabad (Capital of Pakistan). From Islamabad moving to Rawalpindi.

Coding (the part everyone’s been waiting for):

Create an overlay class lets say by the name of MyOverlay inside our main activity class named “GoogleMapsDrawPath” that extends MapActivity


class MyOverlay extends Overlay{

public MyOverlay(){

}

public void draw(Canvas canvas, MapView mapv, boolean shadow){
 super.draw(canvas, mapv, shadow);

//Configuring the paint brush

Paint mPaint = new Paint();
 mPaint.setDither(true);
 mPaint.setColor(Color.RED);
 mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
 mPaint.setStrokeJoin(Paint.Join.ROUND);
 mPaint.setStrokeCap(Paint.Cap.ROUND);
 mPaint.setStrokeWidth(4);

 GeoPoint gP1 = new GeoPoint(34159000,73220000);//starting point Abbottabad
 GeoPoint gP2 = new GeoPoint(33695043,73050000);//End point Islamabad

 GeoPoint gP4 = new GeoPoint(33695043, 73050000);//Start point Islamabad
 GeoPoint gP3 = new GeoPoint(33615043, 73050000);//End Point Rawalpindi

Point p1 = new Point();
 Point p2 = new Point();
 Path path1 = new Path();

 Point p3 = new Point();
 Point p4 = new Point();
 Path path2 = new Path();
 projection.toPixels(gP2, p3);
 projection.toPixels(gP1, p4);

path1.moveTo(p4.x, p4.y);//Moving to Abbottabad location
 path1.lineTo(p3.x,p3.y);//Path till Islamabad

 projection.toPixels(gP3, p1);
 projection.toPixels(gP4, p2);

path2.moveTo(p2.x, p2.y);//Moving to Islamabad location
 path2.lineTo(p1.x,p1.y);//Path to Rawalpindi

 canvas.drawPath(path1, mPaint);//Actually drawing the path from Abbottabad to Islamabad
 canvas.drawPath(path2, mPaint);//Actually drawing the path from Islamabad to Rawalpindi

 }

}

Explanation:

The code is pretty self explanatory as I have commented the parts that required explanation. First we configure the paint brush. To draw a line between two points we need to have coordinates of  at least two locations but as I am connecting 3 locations, I have taken 4 GeoPoints , repeating the coordinates of  Islamabad. I have done this to demonstrate that each time we draw a line we will need two points. After that I have created 4 Points and 2 Paths. Than setting the Projection. In simple words associating the GeoPoints  to Points.  After this setting the Paths like moving it to a starting location and defining the end point of the Path. Lastly call the canvas.drawPath(path1, mPaint) method providing it the path and the brush to actually draw the line on the map.

Configuring the Main Activity Class:

Add the following code in the onCreate method of GoogleMapsDrawPath class.


mapView = (MapView) findViewById(R.id.mapview1);//Creating an instance of MapView
 mapView.setBuiltInZoomControls(true);//Enabling the built-in Zoom Controls

 gP = new GeoPoint(33695043, 73000000);//Creating a GeoPoint

 mc = mapView.getController();
 mc.setCenter(gP);
 mc.setZoom(9);//Initializing the MapController and setting the map to center at the
 //defined GeoPoint

mapOverlays = mapView.getOverlays();
 projection = mapView.getProjection();

 myoverlay = new MyOverlay();
 mapOverlays.add(myoverlay);

Explanation:

Create instance of the mapView, enable the built-in zoom controls. Create GeoPoints and move the map to center at the created GeoPoint. Lastly add overlays from the myOverlay class to the map.

Path starting from Abbottabad moving towards Islamabad

Path Reaching Islamabad and than the second Path Starting from Islamabad to Rawalpindi

Complete path starting from Abbottabad to Rawalpindi. It looks like one single line but actually it consists of two line. The second one starting from the point where the first one is ending.

Some Extras that need explanation:

I feel the need of explaining a few more things that even if we don’t understand the code will work. But the readers have the right to know why a certain method, object, class etc is used.

  • GeoPoint :An immutable class representing a pair of latitude and longitude, stored as integer numbers of microdegrees
  • Projection :A Projection serves to translate between the coordinate system of x/y on-screen pixel coordinates and that of latitude/longitude points on the surface of the earth.
  • Point :Converts the given GeoPoint to onscreen pixel coordinates, relative to the top-left of the MapView that provided this Projection

 

Complete Code for GoogleMapsDrawPath Application:


package com.android.googlemapsdrawpath;

import java.util.List;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.Projection;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.os.Bundle;

public class GoogleMapsDrawPath extends MapActivity {
 /** Called when the activity is first created. */
 private List mapOverlays;
 private Projection projection;
 private MapController mc;
 private MapView mapView;
 private GeoPoint gP;
 //private GeoPoint gP2;
 private MyOverlay myoverlay;

@Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);

 mapView = (MapView) findViewById(R.id.mapview1);//Creating an instance of MapView
 mapView.setBuiltInZoomControls(true);//Enabling the built-in Zoom Controls

 gP = new GeoPoint(33695043, 73000000);//Creating a GeoPoint

 mc = mapView.getController();
 mc.setCenter(gP);
 mc.setZoom(9);//Initializing the MapController and setting the map to center at the
 //defined GeoPoint

mapOverlays = mapView.getOverlays();
 projection = mapView.getProjection();

 myoverlay = new MyOverlay();
 mapOverlays.add(myoverlay);

 }

@Override
 protected boolean isRouteDisplayed() {
 // TODO Auto-generated method stub
 return false;
 }

 class MyOverlay extends Overlay{

public MyOverlay(){

}

public void draw(Canvas canvas, MapView mapv, boolean shadow){
 super.draw(canvas, mapv, shadow);
 //Configuring the paint brush
 Paint mPaint = new Paint();
 mPaint.setDither(true);
 mPaint.setColor(Color.RED);
 mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
 mPaint.setStrokeJoin(Paint.Join.ROUND);
 mPaint.setStrokeCap(Paint.Cap.ROUND);
 mPaint.setStrokeWidth(4);


 GeoPoint gP1 = new GeoPoint(34159000,73220000);//starting point Abbottabad
 GeoPoint gP2 = new GeoPoint(33695043,73050000);//End point Islamabad

 GeoPoint gP4 = new GeoPoint(33695043, 73050000);//Start point Islamabad
 GeoPoint gP3 = new GeoPoint(33615043, 73050000);//End Point Rawalpindi

Point p1 = new Point();
 Point p2 = new Point();
 Path path1 = new Path();

 Point p3 = new Point();
 Point p4 = new Point();
 Path path2 = new Path();
 projection.toPixels(gP2, p3);
 projection.toPixels(gP1, p4);

path1.moveTo(p4.x, p4.y);//Moving to Abbottabad location
 path1.lineTo(p3.x,p3.y);//Path till Islamabad

 projection.toPixels(gP3, p1);
 projection.toPixels(gP4, p2);

path2.moveTo(p2.x, p2.y);//Moving to Islamabad location
 path2.lineTo(p1.x,p1.y);//Path to Rawalpindi

 canvas.drawPath(path1, mPaint);//Actually drawing the path from Abbottabad to Islamabad
 canvas.drawPath(path2, mPaint);//Actually drawing the path from Islamabad to Rawalpindi

 }

}
}

 

Related articles