Custom marker with user image inside the pin

Question

I am trying to display users on a map, I have already implemented the map in the app, but now I am trying to make custom markers that display a user's photo inside the pin something like this:

Any idea how to do it ?

Answer 1

I have done this by taking reference from Telegram app Telegram App

Add Marker in Google Map

GoogleMap mMap;
Marker marker;

LatLng latLng = new LatLng(Double.parseDouble(lat), Double.parseDouble(long));
MarkerOptions options = new MarkerOptions().position(latLng);
Bitmap bitmap = createUserBitmap();
if(bitmap!=null){
    options.title("Ketan Ramani");
    options.icon(BitmapDescriptorFactory.fromBitmap(bitmap));
    options.anchor(0.5f, 0.907f);
    marker = mMap.addMarker(options);
    mMap.moveCamera(CameraUpdateFactory.newLatLng(latLng));
    mMap.animateCamera(CameraUpdateFactory.zoomTo(15), 2000, null);
}

Function to create bitmap

private Bitmap createUserBitmap() {
    Bitmap result = null;
    try {
        result = Bitmap.createBitmap(dp(62), dp(76), Bitmap.Config.ARGB_8888);
        result.eraseColor(Color.TRANSPARENT);
        Canvas canvas = new Canvas(result);
        Drawable drawable = getResources().getDrawable(R.drawable.livepin);
        drawable.setBounds(0, 0, dp(62), dp(76));
        drawable.draw(canvas);

        Paint roundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        RectF bitmapRect = new RectF();
        canvas.save();

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.avatar);
        //Bitmap bitmap = BitmapFactory.decodeFile(path.toString()); /*generate bitmap here if your image comes from any url*/
        if (bitmap != null) {
            BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            Matrix matrix = new Matrix();
            float scale = dp(52) / (float) bitmap.getWidth();
            matrix.postTranslate(dp(5), dp(5));
            matrix.postScale(scale, scale);
            roundPaint.setShader(shader);
            shader.setLocalMatrix(matrix);
            bitmapRect.set(dp(5), dp(5), dp(52 + 5), dp(52 + 5));
            canvas.drawRoundRect(bitmapRect, dp(26), dp(26), roundPaint);
        }
        canvas.restore();
        try {
            canvas.setBitmap(null);
        } catch (Exception e) {}
    } catch (Throwable t) {
        t.printStackTrace();
    }
    return result;
}

Calculate dp according to device density

public int dp(float value) {
    if (value == 0) {
        return 0;
    }
    return (int) Math.ceil(getResources().getDisplayMetrics().density * value);
}

livepin.png

avatar.png

Answer 2

You can customize Marker with your own Bitmap.

private static final LatLng mArea= new LatLng(lat, long);
private Marker marker= mMap.addMarker(new MarkerOptions()
                            .position(mArea)
                            .title("mArea")
                            .snippet("Snippet").icon(yourBitmap));