How to show both MarkerIcon and Title in google map as like Google Apps?

Question

When I find nearest restaurants in Google's Maps Android Application the restaurant name is showing near to marker icon as default. (Refer Google Image).

But in my application I need to do same when I search for nearest restaurants, I able to display only marker icons. (Refer My Application Image).

Google Image:

My Application Image:

Partial Solution : Here I found partial solution for this we get this by drawing a text using canvas. I used below code refer by these links here and here But canvas drawing cutting of my text. Refer attached image TextDrawn Image

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

    private Bitmap writeTextOnDrawable(int drawableId, String text) {

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

            Paint paint = new Paint();
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(Color.BLACK);
            paint.setTextAlign(Paint.Align.CENTER);
            paint.setLinearText(true);
            paint.setAntiAlias(true);
            paint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));

            paint.setTextSize(35);

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

            Canvas canvas = new Canvas(bm);


            //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, canvas.getHeight() + 2, canvas.getHeight() + 2, paint);

            return  bm;
        } 

Answer 1

There are several sources for icons, and Places API provides enough details so that you can pick the right icon for each place. I'm not familiar with Android though, so I'll only touch lightly on that.

The way things are today, I'd sayd the trick is to find a dependable set of icons you can work with.

1. Safest option may be Place API's own icons. At least in the web service, each place as an icon field that points to a URL. Being part of a supported API, I'd feel most comfortable depending on these icons ─ save for having my own icons. Here's the one for bars:

2. If you like them, and don't mind that they may go away some day without notice, you could use the deprecated Chart API's Freestanding Icons. At least this ones will only change once: from being available to no longer being available. They don't look particularly good though:

3. If you really really want the same icons used in Google Maps search results, and enjoy living on edge, you could hack their URLs out of Google Maps. Beware: these may change at any time, so you might one day wake up to no icons! ─ and it may change often, not just once.

However, if you're using Places API for Android, I can imagine you're looking for a solution based off of the Places API web service.

It looks like the Place object has no getIcon() or anything similar, so you'd need to come up with your own mapping from the output of getPlaceTypes() to icons. I think it'd be reasonable to ask Google to add a getIcon() method that would do this for you, so I recommend filing a feature request for it.

Answer 2

Try with the custom map marker. You can create your own view and set that view to the marker.

Step 1 : Create a custom layout file based on your needs and inflate it.

 View customMarker = LayoutInflater.from(getApplicationContext()).inflate(R.layout.custom_marker, null);

Step 2 : Convert custom view to Bitmap.

public static Bitmap createDrawableFromView(Context context, View view) {
        DisplayMetrics displayMetrics = new DisplayMetrics();
        ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        view.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.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;
    }
Bitmap customeViewBitmap = createDrawableFromView(context, customMarker);

Step 3 : Create the marker with the resulted bitmap and add it to google map object.

GoogleMap googleMap = googleMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(
                    R.id.map)).getMap();
googleMap.addMarker(new MarkerOptions()
                    .position(latLng)                    .icon(BitmapDescriptorFactory.fromBitmap(customeViewBitmap)));

Step 4 : Add MarkerClick Listener

googleMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
                @Override
                public boolean onMarkerClick(Marker marker) {
                    //Your logic here
                    return false;
                }
            });

Answer 3

Those aren't Markers. I believe they're added to Google Places database, using the Places Add API.

What I can suggest, is for you to retrieve the result from places, and use those results as title when you're adding Markers.

Answer 4

My approach to your situation would be to use Dynamic Icons from Google Maps.

It may be deprecated, but I am unaware of a better alternative at the moment. With this library you would be able to create pins with icons and letters inside, which I believe is exactly what you want.

For example, the following link

https://chart.googleapis.com/chart?chst=d_map_spin&chld=2.1|35|FFFF88|11|_|A|Balloon!

will create the following image

The library is extensive and has alot of options, this is just the tip of the iceberg.

Hope it helps!

Answer 5

After few days research I finishing with this solution. We can set your own layout to IconGenerator

 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("Naveen");

    final IconGenerator mIconGenerator = new IconGenerator(getApplicationContext());
    mIconGenerator.setContentView(marker);
    Bitmap icon = mIconGenerator.makeIcon();
    customMarker = mMap.addMarker(new MarkerOptions()
            .position(markerLatLng)
            .title("Title")
            .snippet("Description")
            .icon(BitmapDescriptorFactory.fromBitmap(icon))
            .anchor(0.5f, 1));