Professional Documents
Culture Documents
Pgina 1 de 17
Mir
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.
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 dont 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:
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.
Create an overlay class lets say by the name of MyOverlay inside our main activity class named
GoogleMapsDrawPath that extends MapActivity
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Locat... Pgina 2 de 17
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.
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Locat... Pgina 3 de 17
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.
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Locat... Pgina 4 de 17
I feel the need of explaining a few more things that even if we dont 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
1 package com.android.googlemapsdrawpath;
2
3 import java.util.List;
4
5 import com.google.android.maps.GeoPoint;
6 import com.google.android.maps.MapActivity;
7 import com.google.android.maps.MapController;
8 import com.google.android.maps.MapView;
9 import com.google.android.maps.Overlay;
10 import com.google.android.maps.Projection;
11
12 import android.graphics.Canvas;
13 import android.graphics.Color;
14 import android.graphics.Paint;
15 import android.graphics.Path;
16 import android.graphics.Point;
17 import android.os.Bundle;
18
19 public class GoogleMapsDrawPath extends MapActivity {
20 /** Called when the activity is first created. */
21 private List mapOverlays;
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Locat... Pgina 5 de 17
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Locat... Pgina 6 de 17
97
98 path2.moveTo(p2.x, p2.y);//Moving to Islamabad location
99 path2.lineTo(p1.x,p1.y);//Path to Rawalpindi
100
101 canvas.drawPath(path1, mPaint);//Actually drawing the path from Abbottabad to Islamabad
102 canvas.drawPath(path2, mPaint);//Actually drawing the path from Islamabad to Rawalpindi
103
104 }
105
106 }
107 }
Related articles
Share this:
66 comments
Comments feed for this article
April 27, 2012 at 4:34 am [...] Android Google Maps Tutorial Part 7, Drawing A
Android Google Maps Tutorial Part Path or Line Between Two Locations
3. Adding An Image to GoogleMaps (mirnauman.wordpress.com) [...]
Using Map Overlays. Mir Reply
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Locat... Pgina 7 de 17
Android Google Maps Tutorial Part [...] Android Google Maps Tutorial Part 7, Drawing A
4, Adding Menu & Some Additional Path or Line Between Two Locations
Functionality Like Zooming, (mirnauman.wordpress.com) Share
Changing Map View, Animating To this:TwitterLinkedInFacebookEmailPrintLike this:LikeBe
GPS Current Location Using Menu the first to like this post. Categories [...]
Button. Mir Reply
May 13, 2012 at 8:37 am Hi Mir i have a question can you help
andrias me with this i want when i touch one of
the stars in the map to open an information
viewer for example information
about Islamabad
Reply
May 17, 2012 at 9:45 am Hi, I have one doubt did you check the
satyanarayana same code work for from France to
Abbottabad.
Reply
May 17, 2012 at 10:46 am ideally it should work, coz the code
Mir needs a starting lat, long and and ending
lat, long. now it depends on u which ever start
end locations u select. but if u have tried it and its not working than u should
zoom in or out a lil. thay may solve the issue.
Reply
Reply
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Locat... Pgina 8 de 17
Reply
Reply
I hope my point was clear, and thanks anyway you were very helpful
Reply
Reply
Reply
Reply
Reply
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Locat... Pgina 9 de 17
Reply
Reply
Reply
June 11, 2012 at 12:26 pm Just wanted to say thank you, Great job
Bogdan man!
Reply
Reply
Reply
Reply
Reply
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Lo... Pgina 10 de 17
July 11, 2012 at 4:21 pm great totorial, now i make some app
zodiac where idont use tracking from google,
how i can load data longitude|lantitude from
database to draw point and overlay it in map(take from google)?
Reply
July 12, 2012 at 4:03 am there r two ways of doing that, first u
Mir create a kml file and parse it in android
code, get lat-long pairs form it and map them
on google maps. second method would be to store coordinates in sqlite db
and read data from it. my next tutorial in google maps section would be on
kml parsing. hope that will solve the problem
Reply
Reply
Reply
July 18, 2012 at 5:41 pm sure i will but i can only guide u. as am
Mir stuck wid my office app development i
wont be able to go along step by step with the
whole application. i have worked on my next tutorial but i dont even have
time to document it and publish it. but as soon as am done wid the office
development. i ll be back on the track
Reply
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Lo... Pgina 11 de 17
Best regards,
Aprido Sandyasa
Reply
Reply
August 23, 2012 at 1:17 pm Mir Sir this program draws a line
sumit between two location or points can we
show the driving path between then.??
Reply
August 27, 2012 at 6:25 am ya we can show driving paths but for
Mir that we need to use the open street map
api. its on my tutorial agenda. will write
something about it , hopefully soon
Reply
Reply
September 28, 2012 at 4:08 am its not a big deal bro. will write a
Mir tutorial reading contents from sms in
inbox. after that the rest u will find in the
already published tutorials.
Reply
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Lo... Pgina 12 de 17
This code is all executing (proved by the Log.d) but the lines are never
displayed (all my other layers are displaying correctly). Is there something
else I need to do to make the canvas visible? Here is the code:
projection.toPixels(geoPt_2, p1);
projection.toPixels(geoPt_1, p2);
} // [ END MapLineStyleOverlay ]
Reply
Also thanks to Mir as this is the best map tutorial for me.
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Lo... Pgina 13 de 17
Reply
Reply
November 29, 2012 at 12:20 pm To show the real time path that you have
sagar trehan followed while driving from source to
destination you need to run your app on real
android device.
For this as Mir had posted his awesome tutorial of how to draw a path
between between two latitude and longitude pair.You just have to follow that.
For it you have to use requestLocationUpdate() method in this you must pass
the minTime and minDistance after which you want to take latitude and
longitude points.You have to store all these latitude and longitude pair in
SQLite database later on reaching destination you must call the tutorial-7 of
Mir iteratively on the latitude and longitude pair present in SQLite database.
Reply
Reply
November 30, 2012 at 6:08 am hey sagar i tried googling about what
Durratulmazd Rokadia you adviced but didnt succeed can you
recomend some tutorials for the same or
sample codethnx..
Reply
Reply
Reply
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Lo... Pgina 14 de 17
Reply
December 18, 2012 at 6:48 am [...] Android Google Maps Tutorial Part 7, Drawing A
Android Google Maps Tutorial Part Path or Line Between Two Locations
4, Adding Menu & Some Additional (mirnauman.wordpress.com) [...]
Functionality Like Zooming, Reply
Changing Map View, Animating To
GPS Current Location Using Menu
Button. Mir
Reply
Reply
Reply
Reply
Reply
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Lo... Pgina 15 de 17
Reply
Reply
Reply
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Lo... Pgina 16 de 17
Thanks
Reply
Reply
Reply
March 3, 2013 at 5:25 pm [...] By. Mir Nauman Tahir in His Blog [...]
Drawing A Path or Line Between Reply
Two Locations Muhammad Yusro
March 24, 2013 at 12:39 pm Hi,could you please provide me the code
sonalshines for search location as well as
show_routes from source(current location as
GPS) to destination..I have followed your tutorial and have got the expected
output
Reply
Reply
Reply
check the above article. this might solve alot of ur issues. its not actually a
button click, rather its a menu button that is clicked. but it will get u the idea
of how things work.
Reply
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Lo... Pgina 17 de 17
shishram Hi Mir,
Reply
Reply
L E A V E A R E P LY
http://mirnauman.wordpress.com/2012/04/26/android-google-maps-tutorial-part-7-dra... 08/10/2013