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

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.

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,

• 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.

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.

/*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.

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 (mirnauman.wordpress.com)
• Android Google Maps Tutorial Part 3. Adding An Image to GoogleMaps Using Map Overlays. (mirnauman.wordpress.com)