how to add a number on google map marker in custom image

Question

I want to add numbers on google map marker.. in code i taken marker as custom image view.. I want to place numbers on that custom marker image view. .. like i posted image

i tried like this

Paint mPaint=new Paint();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.WHITE);
        // mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
        //mPaint.setAntiAlias(true);
        Bitmap.Config conf = Bitmap.Config.ARGB_8888;
        Bitmap bmp = Bitmap.createBitmap(200, 50, conf);
        Canvas canvas = new Canvas(bmp);
        canvas.drawText("TEXT", 0, 50, mPaint);
        marker = googleMap.addMarker(new MarkerOptions()
                .position(new LatLng(latitude, longitude))
                .title(merchant_name)
                .anchor(0.5f, 1)
                .icon(BitmapDescriptorFactory.fromBitmap(bmp)));

Possible duplicate of [Map Markers with text in Google Maps Android API v2](https://stackoverflow.com/questions/17837510/map-markers-with-text-in-google-maps-android-api-v2) — Andrii Omelchenko, Mar 22 '18 at 14:23

score 0 · Answer 1 · answered Mar 22 '18 at 07:43

Use the Below code

private void addMarkersToMap() {
    mMap.clear();
    for (int i = 0; i < Cars.size(); i++) {         
            LatLng ll = new LatLng(Cars.get(i).getPos().getLat(), Cars.get(i).getPos().getLon());
            BitmapDescriptor bitmapMarker = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_RED);

            mMarkers.add(mMap.addMarker(new MarkerOptions().position(ll).title(Cars.get(i).getName())
                    .snippet(getStateString(Cars.get(i).getState())).icon(bitmapMarker)));

            Log.i(TAG,"Car number "+i+"  was added " +mMarkers.get(mMarkers.size()-1).getId());
        }
    }

}

score 0 · Answer 2 · answered Mar 22 '18 at 07:52

Add numbers on google map marker like this:

layout xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" >

<ImageView
    android:layout_width="55dp"
    android:layout_height="65dp"
    android:src="@drawable/custom_marker" />

<TextView
    android:id="@+id/num_txt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="5dp"
    android:gravity="center"
    android:text="20"
    android:textColor="#ce8223"
    android:textSize="25dp"
    android:textStyle="bold" />

  </RelativeLayout>

n CustomMapMarker class, we setup the map (tutorial here). We get the layout custom_marker_layout with layout inflater service, we change our TextView and convert the view result into a bitmap (with createDrawableFromView method).

Custom class:

public class CustomMapMarker extends FragmentActivity {
private GoogleMap mMap;
private Marker customMarker;
private LatLng markerLatLng;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.map_layout);

    markerLatLng = new LatLng(48.8567,2.3508);

    setUpMapIfNeeded();
}

private void setUpMapIfNeeded() {
    // Do a null check to confirm that we have not already instantiated the
    // map.
    if (mMap == null) {
        // Try to obtain the map from the SupportMapFragment.
        mMap = ((SupportMapFragment) 
    getSupportFragmentManager().findFragmentById(R.id.map)).getMap();
        // Check if we were successful in obtaining the map.
        if (mMap != null) {
            setUpMap();
        }
    }
}

private void setUpMap() {

    View marker = ((LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.custom_marker_layout, null);
    TextView numTxt = (TextView) marker.findViewById(R.id.num_txt);
    numTxt.setText("27");

    customMarker = mMap.addMarker(new MarkerOptions()
    .position(markerLatLng)
    .title("Title")
    .snippet("Description")
    .icon(BitmapDescriptorFactory.fromBitmap(createDrawableFromView(this, marker))));

    final View mapView = getSupportFragmentManager().findFragmentById(R.id.map).getView();
    if (mapView.getViewTreeObserver().isAlive()) {
        mapView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
            @SuppressLint("NewApi")
            // We check which build version we are using.
            @Override
            public void onGlobalLayout() {
                LatLngBounds bounds = new LatLngBounds.Builder().include(markerLatLng).build();
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                    mapView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    mapView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
                mMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 50));
            }
        });
    }
}

// Convert a view to bitmap
public static Bitmap createDrawableFromView(Context context, View view) {
    DisplayMetrics displayMetrics = new DisplayMetrics();
    ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
    view.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    view.measure(displayMetrics.widthPixels, displayMetrics.heightPixels);
    view.layout(0, 0, displayMetrics.widthPixels, displayMetrics.heightPixels);
    view.buildDrawingCache();
    Bitmap bitmap = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(bitmap);
    view.draw(canvas);

    return bitmap;
}
}

like this:

score 0 · Answer 3 · answered Mar 22 '18 at 07:55

0

If I had to guess, you would need to programatically draw text onto the bitmap first, and then add that custom bitmap to the marker. example

answered Mar 22 '18 at 07:55

zuko

707
5
12

how to add a number on google map marker in custom image

3 Answers3