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

Get Application Key for Google Map

Get the apiKey for Google Map

Google Map integration in your android application requires a key to integrate with your application.


This post will explain the procedure to get the apiKey for your android application for Google and explain the integration of Google Map with your application.


To get the apiKey we need to follow the following steps

• Locate the debug.keystore 
• Locate the keytool.exe
• Generate the MD5 fingerprint using keytool and debug.keystore
• Get the API Key from Google by providing the MD5 fingerprint

You can find the debug.keystore file user directory of your operating system

For Example  : C:\Users\XXXX\.android\debug.keystore

You can find the keytool.exe in your %JAVA_HOME%\bin\keytool.exe

Now run the following command to get the MD5 fingerprint

C:\Program Files\Java\jdk1.6.0_01\bin>keytool.exe  -list -alias androiddebugkey

-keystore C:\Users\t\.android\debug.keystore -storepass android -keypass android

See the output of the command as following screen shot

MD5 fingerprint with Key Tool

Now register this MD5 fingerprint to get the Google Map API Key as follows

Go to the following link

https://developers.google.com/android/maps-api-signup

Copy the MD5 fingerprint and click on Generate Key to get your application key.

Add the application key value to the MapView XML object as follows

 <com.google.android.maps.MapView
                 android:id="@+id/map_view"
                 android:layout_width="fill_parent"
                 android:layout_height="fill_parent"
                 android:apiKey="0HvaRYYCBNDap4SKY0HN-XXXXXXXXXXXXXX"
                 />

Now you are ready to use the Google Map in your application see here how to integrate the basic google map object in your application.


http://creativeandroidapps.blogspot.in/2012/07/google-map-in-android-application.html




If you like the post then please provide your feedback.


Thanks
Creative Android Apps