User marker with the image of the user inside the pin

Question

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

Any idea how to do this?

Answer 1

I did this by taking the link from the Telegram application Telegram application

Add marker on 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); } 

Bitmap Creation Function

 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 the marker using 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));