Sample Code - Add a Image on Google Map

Add a Image on Google Map using Overlay

Integration of Google Map with location applications provides a better navigation for user. You can add custom images , text and view on the Map View using the Overlay class provided by Google APIs.

See the previous post to integrate the location listener with your basic google map view.

http://creativeandroidapps.blogspot.in/2012/07/sample-code-update-google-map-using.html 

This post will focus on adding a image on the map view on the detected location by the location listener.


You can use the Overlay class from com.google.android.maps package.

Now create a new class "GLocate.java" in your sample application which is extending the com.google.android.maps.Overlay class.


See the code as follows

package com.example.gmapsample;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Point;
import android.location.Location;
import android.util.Log;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapView;

public class GLocate extends com.google.android.maps.Overlay{

    GeoPoint location = null;
    Bitmap overlay_img = null;
    public GLocate(GeoPoint location)
    {
        super();
        this.location = location;
    }
    
    public void setImage(Bitmap bmp)
    {
        this.overlay_img = bmp;
    }
    
    @Override
    public void draw(Canvas canvas, MapView mapView, boolean shadow)
     {
         super.draw(canvas, mapView, shadow);
         //translate the screen pixels
         Paint p = new Paint();
         Point screenPoint = new Point();
         mapView.getProjection().toPixels(this.location, screenPoint);
         Log.i("GLocate","draw : x = "+ screenPoint.x + "y= " + screenPoint.y);
         //add the image
         canvas.drawBitmap(overlay_img,screenPoint.x, screenPoint.y , p); //Setting the image  location on the screen (x,y).
         mapView.invalidate(); //redraw the map view
     }

 }

Now integrate the class in your main activity code as follows (see the highlighted lines of code)

 @Override
        public void onLocationChanged(Location location) {
        // A new location update is received.  Do something useful with it. 
            Log.i(TAG,"Location Listener start");
            String coordinates[] = {""+location.getLatitude(), ""+location.getLongitude()};
            double lat = Double.parseDouble(coordinates[0]);
            double lng = Double.parseDouble(coordinates[1]);
            GeoPoint p = new GeoPoint((int) (lat * 1E6),(int) (lng * 1E6));
            Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.caalogo);
            GLocate gl = new GLocate(p);
            gl.setImage(bmp);
            List listOfOverLays = mapView.getOverlays();
            listOfOverLays.clear();
            listOfOverLays.add(gl);
            mapController.animateTo(p);
            mapController.setZoom(4);
            mapView.invalidate();     

        }

Now run the application and send the location update using the DDMS tool explained in previous post (http://creativeandroidapps.blogspot.in/2012/07/sample-code-update-google-map-using.html ).


The output of the application is as follows.

Google Map - Overlay Image

Please provide your valuable feedback.


Thanks
Creative Android Apps