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.
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,
- https://mirnauman.wordpress.com/2012/01/26/how-to-get-google-maps-api-key-for-android-issues-and-errors-solved/
- https://mirnauman.wordpress.com/2012/01/30/using-google-maps-in-android-development-tutorial-part-1/
- https://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.
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
- drawable-hdpi
- drawable-ldpi
- 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.
/*My overlay Class starts*/ class MyMapOverlays extends com.google.android.maps.Overlay { GeoPoint location = null; public MyMapOverlays(GeoPoint location) { super(); this.location = location; } @Override public void draw(Canvas canvas, MapView mapView, boolean shadow) { super.draw(canvas, mapView, shadow); //translate the screen pixels Point screenPoint = new Point(); mapView.getProjection().toPixels(this.location, screenPoint); //add the image canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.our_cross_image), screenPoint.x, screenPoint.y , null); //Setting the image location on the screen (x,y). } } /*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 https://mirnauman.wordpress.com/2012/02/07/using-gps-in-android-and-animating-google-maps-to-the-current-gps-location-android-tutorial-part-2/
//add a location marker. MyMapOverlays marker = new MyMapOverlays(p) ; List listOfOverLays = mapView.getOverlays(); listOfOverLays.clear(); listOfOverLays.add(marker); 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.
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 (mirnauman.wordpress.com)
- Android Google Maps Tutorial Part 3. Adding An Image to GoogleMaps Using Map Overlays. (mirnauman.wordpress.com)
26 comments
Comments feed for this article
February 14, 2012 at 9:45 am
Android Google Maps Tutorial Part 4, Adding Menu & Some Additional Functionality Like Zooming, Changing Map View, Animating To GPS Current Location Using Menu Button. « Mir
[…] https://mirnauman.wordpress.com/2012/02/13/adding-image-to-googlemaps-using-map-overlays-android-tuto… […]
March 6, 2012 at 7:16 am
piyush
hi,
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
April 10, 2012 at 12:15 pm
Android Google Maps Tutorial Part 5, Adding Multiple Images To Google Maps Using ItemizedOverlay. « Mir
[…] https://mirnauman.wordpress.com/2012/02/13/adding-image-to-googlemaps-using-map-overlays-android-tuto… […]
April 16, 2012 at 9:25 am
Android Google Maps Tutorial Part 6, Getting The Location That Is Touched. « Mir
[…] Android Google Maps Tutorial Part 3. Adding An Image to GoogleMaps Using Map Overlays. (mirnauman.wordpress.com) […]
May 9, 2012 at 3:55 am
Mir
Reblogged this on Mir.
June 1, 2012 at 9:24 am
sabu
you are a grate man!!!!!!!!!!!!!
this work on my phone as good condition…………………………….
June 10, 2012 at 10:48 am
Peter Willems
Since the icon is placed with its top/left pixel on the geopoint location, the overlay routine should subtract 24 pixels in both direction of the projected x/y location on the canvas.
August 30, 2012 at 6:32 am
Gal
thank you! great tutorial
September 1, 2012 at 5:04 pm
Helen
Really great, well written/easy to read. Thank you very much.
September 10, 2012 at 1:41 pm
ThienNN
if i have Latitude and longitude and intent google by uri.parse
now, i can’t add an image to google map
Can u help me.
if u have free time , pls help me . tks 😀
my yahoo : thienvn@ymail.com
September 10, 2012 at 5:53 pm
Mir
r u using an overlay class or not, if yes than are u receiving any error while doing that, if yes wats the error.
September 12, 2012 at 1:03 pm
ThienNN
tks 4 help 😀
My app was fin 😀
tks again 😀
September 11, 2012 at 4:08 am
Mohsin Memon
Nice article. Can you please elaborate as how we can place pictures from internet directly on the map?
September 20, 2012 at 2:22 am
Ziz++
Hi . when I use an overlay class and fix error at getResource() by a Context but when it called by activity , my map is empty , no map , no error .
Can u hel me 😦
September 21, 2012 at 9:03 am
Mir
check the google maps api key
September 20, 2012 at 2:24 am
Ziz++
hihi , sorry . When i called at Activity , may context = null 😀
Fix Context = this.getApplicationContext() it okay 😀
September 20, 2012 at 5:08 am
nipuna
hi,
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.
September 21, 2012 at 8:30 am
Mir
ur question is not clear, wat problem are u exactly facing when u load ur app on the device
September 21, 2012 at 9:02 am
Mir
u can also check the google maps api key
September 26, 2012 at 7:42 am
Anthony
I have an error on this part:
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).
November 18, 2012 at 4:35 pm
Wilfried Adoni
I work on a project android
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
November 20, 2012 at 5:58 am
Mir
its not that simple. this way u can get a 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
February 8, 2013 at 5:36 am
Choi
Hi Sorry I am a very beginner to 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!
February 13, 2013 at 8:37 am
Choi
I have tried twice and it seems its 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!
February 13, 2013 at 10:42 am
Choi
Are there some limitations of the image that being overlaid?
March 13, 2013 at 7:46 pm
Roby
Hi,
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 🙂