Android Google Maps Tutorial Part 3. Adding An Image To Googlemaps Using Map Overlays

Android Google Maps Tutorial Part 3. Adding An Image to GoogleMaps Using Ma...
Pgina 1 de 8
Mir
Mir Nauman Tahir. Development, Configurations, Tutorials and bla bla

bla ....
Android Google Maps Tutorial Part 3. Adding An

Image to GoogleMaps Using Map Overlays.
February 13, 2012 in Android Google Maps API Ver 1.0 | Tags: Adding image to GoogleMaps, com.google.android.maps.Overlay,
Displaying image on the current location of GPS, Google Maps, gps location, Map Overlays
7 Votes
Objective of this tutorial is to place an image to the current location of the device, means displaying an image at
the current coordinates from the GPS of the device. We can have a better idea from the image displayed below
of what we are trying to achieve.
http://mirnauman.wordpress.com/2012/02/13/adding-image-to-googlemaps-using-ma... 08/10/2013
Android Google Maps Tutorial Part 3. Adding An Image to GoogleMaps Using Ma... Pgina 2 de 8
A Cross image added to the current location from the GPS of the device
To start with this tutorial we will continue with the examples from the previous tutorial and to have the exact
output one must go through the previous tutorials in this series i.e,
http://mirnauman.wordpress.com/2012/01/26/how-to-get-google-maps-api-key-for-android-issues-and-errors-
solved/
http://mirnauman.wordpress.com/2012/01/30/using-google-maps-in-android-development-tutorial-part-1/
http://mirnauman.wordpress.com/2012/02/07/using-gps-in-android-and-animating-google-maps-to-the-current-
gps-location-android-tutorial-part-2/
First of all we will create a PNG image with transparent background or download it from Google or search it in
the android samples folders. When we have our desired image just like the one shown below.
Our PNG
Copy this PNG and browse to your res folder of the GoogleMaps project. My path for the res folder is
C:\Users\Mir Nauman Tahir\workspace\googlemaps\res\ . In res folder we will have 3 more folders starting
from drawable i.e
1. drawable-hdpi
2. drawable-ldpi
3. drawable-mdpi
we have to copy our image in the the drawable folder but which one. If you have no idea copy the image to all
the three folders. By default the image will be taken from the hdpi folder, if the image is not found by that name
in the hdpi folder than the mdpi folder is searched. so we have to have our image in one of the two folders. If
the same image is present in both the folders than the hdpi image is taken.
The reason behind putting our image in the res folder is that we can easily access our image file by
R.id.our_image code. extension should not be entered. Using this method saves us a lot of overhead by not
getting involved in the path to the file and the addressing schemes whether relative or absolute.
Now coming to the code. First we will create our own Map Overlay Class that will
extend com.google.android.maps.Overlay. For the time being the Class should be defined inside our main
GooglemapsActivity Class. The code is given below.
1 /*My overlay Class starts*/

2 class MyMapOverlays extends com.google.android.maps.Overlay
3 {
4 GeoPoint location = null;
5
6 public MyMapOverlays(GeoPoint location)
7 {
8 super();
9 this.location = location;
10 }
11
12 @Override
13 public void draw(Canvas canvas, MapView mapView, boolean shadow)
14 {
15
16 super.draw(canvas, mapView, shadow);
17 //translate the screen pixels
18 Point screenPoint = new Point();
19 mapView.getProjection().toPixels(this.location, screenPoint);
20
21 //add the image
22 canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.our_cross_image),
23 screenPoint.x, screenPoint.y , null); //Setting the image location on the screen (x,y).
24 }
25 }
26 /*My overlay Class ends*/
We have our main map Overlay class in place, now we will come to our MyLocationListener Class. This is not
necessary here. The following code can also be defined in onCreate method of our main GooglemapsActivity
Class but as we want to draw the image on the current location of the GPS and that if the GPS coordinates
changes the image should reapear in the newly updated location we will add this code to MyLocationListener
Class.
Add the following code in the onLocationChanged(Location loc) between mc.setZoom(7) and
mapView.invalidate(). From our previous tutorial code http://mirnauman.wordpress.com/2012/02/07/using-gps-
in-android-and-animating-google-maps-to-the-current-gps-location-android-tutorial-part-2/
1 //add a location marker.

2
3 MyMapOverlays marker = new MyMapOverlays(p) ;
4 List listOfOverLays = mapView.getOverlays();

5 listOfOverLays.clear();
6 listOfOverLays.add(marker);
7
8 mapView.invalidate();
mapView.invalidate() should be the last statement coz it will redraw the map. Now Run the project. When the
map loads for the first time it will show no image. At this stage send dummy coordinates from the DDMS and
the map will animate to the current coordinates receieved from the DDMS and will show our Cross image on
the current location.
Sending dummy coordinates from DDMS, Map animated to the current location and displaying our "Cross"
image at the current location
This was all for adding images using map overlays. We will extend the same tutorial series for exploring further
functionalities of GoogleMaps.
Note:- Please leave your comments if this article was of any help. Thanks.
Related articles
Android Google Maps Tutorial Part 1. Basic Development. (mirnauman.wordpress.com)

Android Google Maps Tutorial Part 2. Using GPS in Android and Animating Google Maps to the Current GPS
location. (mirnauman.wordpress.com)
Android Google Maps Tutorial Part 5, Adding Multiple Images To Google Maps Using ItemizedOverlay.
(mirnauman.wordpress.com)
Android Google Maps Tutorial Part 6, Getting The Location That Is Touched. (mirnauman.wordpress.com)
Android Google Maps Tutorial Part 7, Drawing A Path or Line Between Two Locations
Android Google Maps Tutorial Part 3. Adding An Image to GoogleMaps Using Map Overlays.
About these ads
Share this:
Like this:
Be the first to like this.
26 comments
Comments feed for this article
February 14, 2012 at 9:45 am [...] http://mirnauman.wordpress.com/2012/02/13/adding-

Android Google Maps Tutorial Part image-to-googlemaps-using-map-overlays-android-tuto
4, Adding Menu & Some Additional [...]
Functionality Like Zooming, Reply
Changing Map View, Animating To
GPS Current Location Using Menu
Button. Mir
March 6, 2012 at 7:16 am hi,

piyush I have return my code according to
tuotrial but when i was puting the lat/lon
value from DDMS i am geeting null pointer error
..can u help me plz
Reply
April 10, 2012 at 12:15 pm [...] http://mirnauman.wordpress.com/2012/02/13/adding-

Android Google Maps Tutorial Part image-to-googlemaps-using-map-overlays-android-tuto
5, Adding Multiple Images To [...]
Google Maps Using Reply
ItemizedOverlay. Mir
April 16, 2012 at 9:25 am [...] Android Google Maps Tutorial Part 3. Adding An
Android Google Maps Tutorial Part Image to GoogleMaps Using Map Overlays.
6, Getting The Location That Is (mirnauman.wordpress.com) [...]
Touched. Mir Reply
May 9, 2012 at 3:55 am Reblogged this on Mir.

Mir
Reply
June 1, 2012 at 9:24 am you are a grate man!!!!!!!!!!!!!

sabu
this work on my phone as good
condition.
Reply
June 10, 2012 at 10:48 am Since the icon is placed with its top/left
Peter Willems pixel on the geopoint location, the
overlay routine should subtract 24 pixels in
both direction of the projected x/y location on the canvas.
Reply
August 30, 2012 at 6:32 am thank you! great tutorial

Gal
Reply
September 1, 2012 at 5:04 pm Really great, well written/easy to read.

Helen Thank you very much.
Reply
September 10, 2012 at 1:41 pm if i have Latitude and longitude and

ThienNN intent google by uri.parse
now, i cant add an image to google map
Can u help me.
if u have free time , pls help me . tks
my yahoo : thienvn@ymail.com
Reply
September 10, 2012 at 5:53 pm r u using an overlay class or not, if yes

Mir than are u receiving any error while
doing that, if yes wats the error.
Reply
September 12, 2012 at 1:03 pm tks 4 help

ThienNN My app was fin
tks again
September 11, 2012 at 4:08 am Nice article. Can you please elaborate as
Mohsin Memon how we can place pictures from internet
directly on the map?
Reply
September 20, 2012 at 2:22 am Hi . when I use an overlay class and fix
Ziz++ error at getResource() by a Context but
when it called by activity , my map is empty ,
no map , no error .
Can u hel me
Reply
September 21, 2012 at 9:03 am check the google maps api key
Mir
Reply
September 20, 2012 at 2:24 am hihi , sorry . When i called at Activity ,

Ziz++ may context = null
Fix Context = this.getApplicationContext() it okay
Reply
September 20, 2012 at 5:08 amhi,

nipuna i used my phone for testing. but it is not
working. map is loading but no other that
that can you please give me answer.
Reply
September 21, 2012 at 8:30 am ur question is not clear, wat problem are
Mir u exactly facing when u load ur app on
the device
Reply
September 21, 2012 at 9:02 am u can also check the google maps api
Mir key
Reply
September 26, 2012 at 7:42 am

I have an error on this part:
Anthony MyMapOverlays marker = new
MyMapOverlays(p) ;
List listOfOverLays = mapView.getOverlays();
listOfOverLays.clear();
listOfOverLays.add(marker);
it says on this line MyMapOverlays marker = new MyMapOverlays(p) ;

the underlined error is at new MyMapOverlays(p)
No enclosing instance of type MainActivity is accessible. Must qualify the

allocation with an enclosing instance of type MainActivity (e.g. x.new A()
where x is an instance of MainActivity).
Reply
November 18, 2012 at 4:35 pm I work on a project android

Wilfried Adoni and I would like to know how to trace
an itinerary on foot and car.
the user enters the address of departure and arrival and the address of the
application generates the way thank you.
please send me the code on my mail
willy_91@live.fr
Reply
November 20, 2012 at 5:58 am its not that simple. this way u can get a
Mir straight line from start location to end
location. but if u really want the map to show
u the way along actual roads than u have to work really hard. google so far
not provide any api that can do this for you. but u can use any available open
source street view api
Reply
February 8, 2013 at 5:36 am Hi Sorry I am a very beginner to

Choi android, after I put your first paragraph
code in my program. Should I be able to see
my image? I see nothing on my map but without any error messages, did I
miss anything? Thanks!
Reply
February 13, 2013 at 8:37 amI have tried twice and it seems its
Choi getting better, however, an error
message appeared Sorry! The application
Map(process com.example.map)has stopped unexpectedly. Please try again.
Can you help me please? Thanks!
Reply
February 13, 2013 at 10:42 am Are there some limitations of the image
Choi that being overlaid?
March 13, 2013 at 7:46 pm Hi,

Roby I need your help,please
I have to make an android app,I need to search
some locations(restaurants, hotels,)
Something like Places Directory or
http://androidandme.com/2010/07/applications/google-maps-brings-places-to
-android-with-4-4-update
Can you help me?
Thanks
Reply
L E A V E A R E P LY

Android Google Maps Tutorial Part 3. Adding An Image To Googlemaps Using Map Overlays

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Android Google Maps Tutorial Part 3. Adding An Image To Googlemaps Using Map Overlays

Uploaded by

Copyright:

Available Formats

Android Google Maps Tutorial Part 3. Adding An Image to GoogleMaps Using Ma...

Mir Nauman Tahir. Development, Configurations, Tutorials and bla bla

Android Google Maps Tutorial Part 3. Adding An

1 /*My overlay Class starts*/

1 //add a location marker.

4 List listOfOverLays = mapView.getOverlays();

Android Google Maps Tutorial Part 1. Basic Development. (mirnauman.wordpress.com)

Be the first to like this.

February 14, 2012 at 9:45 am [...] http://mirnauman.wordpress.com/2012/02/13/adding-

March 6, 2012 at 7:16 am hi,

April 10, 2012 at 12:15 pm [...] http://mirnauman.wordpress.com/2012/02/13/adding-

May 9, 2012 at 3:55 am Reblogged this on Mir.

June 1, 2012 at 9:24 am you are a grate man!!!!!!!!!!!!!

August 30, 2012 at 6:32 am thank you! great tutorial

September 1, 2012 at 5:04 pm Really great, well written/easy to read.

September 10, 2012 at 1:41 pm if i have Latitude and longitude and

September 10, 2012 at 5:53 pm r u using an overlay class or not, if yes

September 12, 2012 at 1:03 pm tks 4 help

September 20, 2012 at 2:24 am hihi , sorry . When i called at Activity ,

Fix Context = this.getApplicationContext() it okay

September 20, 2012 at 5:08 amhi,

September 26, 2012 at 7:42 am

it says on this line MyMapOverlays marker = new MyMapOverlays(p) ;

No enclosing instance of type MainActivity is accessible. Must qualify the

November 18, 2012 at 4:35 pm I work on a project android

February 8, 2013 at 5:36 am Hi Sorry I am a very beginner to

March 13, 2013 at 7:46 pm Hi,

You might also like

1 /My overlay Class starts/