Google Maps custom Marker with Business Logo

Question

for an Android App I need a custom marker for my google maps activity. The standard option do not help me. what is the best way to achieve the right icon with a businesslogo that can be set for each marker?

UPDATE:

Sorry, either I wasn't clear enough or I don't see it. I can't find a lot helpful things in the docs or the hints you gave me. Now I constructed a default marker:

and I have lots of profile pics or logos wich need to be placed within the marker at runtime depending on certain conditions e.g.:

Check this http://stackoverflow.com/a/18054483/1939564 – Muhammad Babar Sep 17 '15 at 05:01 — Muhammad Babar, Sep 17 '15 at 05:01
thx could you have a look at my update? – Jan Drees Sep 18 '15 at 09:50 — Jan Drees, Sep 18 '15 at 09:50

score 0 · Answer 1 · answered Sep 17 '15 at 05:03

There is a documentation about adding custom markers on a position.

private static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
private Marker melbourne = mMap.addMarker(new MarkerOptions()
                            .position(MELBOURNE)
                            .title("Melbourne")
                            .snippet("Population: 4,137,400")
                        .icon(BitmapDescriptorFactory.fromResource(R.drawable.arrow)));

score 0 · Answer 2 · answered Sep 17 '15 at 05:38

for making custom view you have to use MarkerDemoActivity class to use a custom marker.if you are using google map Api V2.0.

and other solution to make custom view for marker. Add this code to add marker of map:

Marker myLocMarker = map.addMarker(new MarkerOptions()
        .position(myLocation)
        .icon(BitmapDescriptorFactory.fromBitmap(writeTextOnDrawable(R.drawable.bluebox, "your text goes here"))));

the writeTextOnDrawable() Method:

private Bitmap writeTextOnDrawable(int drawableId, String text) {

Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId)
        .copy(Bitmap.Config.ARGB_8888, true);

Typeface tf = Typeface.create("Helvetica", Typeface.BOLD);

Paint paint = new Paint();
paint.setStyle(Style.FILL);
paint.setColor(Color.WHITE);
paint.setTypeface(tf);
paint.setTextAlign(Align.CENTER);
paint.setTextSize(convertToPixels(context, 11));

Rect textRect = new Rect();
paint.getTextBounds(text, 0, text.length(), textRect);

Canvas canvas = new Canvas(bm);

//If the text is bigger than the canvas , reduce the font size
if(textRect.width() >= (canvas.getWidth() - 4))     //the padding on either sides is considered as 4, so as to appropriately fit in the text
    paint.setTextSize(convertToPixels(context, 7));        //Scaling needs to be used for different dpi's

//Calculate the positions
int xPos = (canvas.getWidth() / 2) - 2;     //-2 is for regulating the x position offset

//"- ((paint.descent() + paint.ascent()) / 2)" is the distance from the baseline to the center.
int yPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint.ascent()) / 2)) ;  

    canvas.drawText(text, xPos, yPos, paint);

    return  bm;
}


public static int convertToPixels(Context context, int nDP)
{
    final float conversionScale = context.getResources().getDisplayMetrics().density;

    return (int) ((nDP * conversionScale) + 0.5f) ;

}

and for more information see this link.

thx but I can't find a function which helps me. could you have a look at my update? — Jan Drees, Sep 18 '15 at 09:51

score 0 · Accepted Answer · answered Oct 05 '15 at 03:51

So this is how i did it firt i constructed two pics. the marker as shown above and the other one by the following function (all code is found soewhere on stackoverflow):

public static Bitmap getCircleBitmap(Bitmap bm) {
    int sice = Math.min((bm.getWidth()), (bm.getHeight()));
    Bitmap bitmap = ThumbnailUtils.extractThumbnail(bm, sice, sice);
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);
    final int color = 0xffff0000;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    paint.setAntiAlias(true);
    paint.setDither(true);
    paint.setFilterBitmap(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawOval(rectF, paint);
    paint.setColor(Color.BLUE);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth((float) 4);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);
    return output;
}

Then I pass them to the following function

public static Bitmap overlay(Bitmap bmp1, Bitmap bmp2) {
    Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), bmp1.getConfig());
    Canvas canvas = new Canvas(bmOverlay);
    canvas.drawBitmap(bmp1, new Matrix(), null);
    canvas.drawBitmap(bmp2, 5, 5, null);
    return bmOverlay;
}

I know its probably not the best way of doing it, especially i dont like the hard coding of the position of the circle in the marker. but t works so far

Google Maps custom Marker with Business Logo

3 Answers3