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;
        } 

Groundsheet

You can get those details from the Google Places API... Give it a look – Procuration

Yes I used Google Places API only I already displayed markers. My Question is How to display name along with marker icons as like Google Image I mentioned? – Groundsheet

Probably the following post can help you. binwaheed.blogspot.com.es/2011/05/… – Siloam

@Siloam canvas.drawText is not drawing full text can you help to solve this? Check updated question. – Groundsheet

Not sure if it will work, but have you tried changing paint.setTextSize(35); to other values? – Loathe

Another thing that could help, is the icon size. Check this question #35718603 – Loathe

@Loathe Changing size is not working Here Canvas canvas = new Canvas(bm); So canvas is available for only bitmap size for this reason only text is drawn for bitmap width it is not extending to original text width. But here text is too long means there is no meaning of extending bitmap width. – Groundsheet

if you are using Google places api then u will surely get image and icons for each lat long so use that image and u will get screen like a google maps android Application. – Rascal

Yes Nikhil I am using Google places api only for nearbysearch. I am getting "icon" and "name" in the result. How to set that result in the map? Can you please elaborate? – Groundsheet

Answer 1

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));

Groundsheet

Answer 2

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.

Throb

Thank you for sharing Feature request link. Here the problem is not for Icons. I need to display title along with icon. – Groundsheet

Ah, then you might want to file 2 feature requests :) – Throb

Answer 3

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;
                }
            });

Burchfield

Where the text drawn in canvas. My question is want to display both marker and text in map like google map app. Here text will display only when on click event for respective marker. – Groundsheet

View customMarker = LayoutInflater.from(getActivity()).inflate(R.layout.custom_marker, null); final ImageView markerIcon = (ImageView) customMarker.findViewById(R.id.map_marker); final TextView markerText = (TextView) customMarker.findViewById(R.id.marker_text); markerIcon.setImageResource(R.drawable.ic_media_play); markerText.setText("Restaurant Name"); Bitmap customViewBitmap = createDrawableFromView(getActivity(), customMarker); LatLng latLng = new LatLng(13.0169961,80.2042327); – Burchfield

mMap.addMarker(new MarkerOptions().position(latLng).icon(BitmapDescriptorFactory.fromBitmap(customViewBitmap))); – Burchfield

You have to create the custom view layout. Where you can put image view and text view. <Relativelayout><ImageView></ImageView><TextView android:layout_toRightOf="ImageView"></TextView></Relativelayout> – Burchfield

The above answer will work without using ClusterManager but in my implementation I used ClusterManager, So how to do for this Here I can paste the code please refer. paste.org/81472 – Groundsheet

1. You have to inflate the custom_m‌arker inside CustomIconRendered constructor. 2. onBeforeClusterItemRendered you have to set the drawable to imageview and title/description to textview. 3. Convert customMarker view into bitmap and add it to markeroptions – Burchfield

private final View customMarker;public CustomIconRendered(Context context, GoogleMap map,ClusterManager<MarkerObject> clusterManager) {super(context, map, clusterManager);this.context = context;customMarker = LayoutInflater.from(context).inflate(R.layout.custom_marker, null);} – Burchfield

protected void onBeforeClusterItemRendered(MarkerObject item, MarkerOptions markerOptions) { ImageView markerIcon = (ImageView) customMarker.findViewById(R.id.map_marker); final TextView markerText = (TextView) customMarker.findViewById(R.id.marker_text); markerIcon.setImageResource(item.getImagetResource()); markerText.setText(item.getTitle()); Bitmap customViewBitmap = createDrawableFromView(getActivity(), customMarker);markerOptions.icon(BitmapDescriptorFactory.fromBitmap(customeViewBitmap));} – Burchfield

Answer 4

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.

Done

I am already getting Places result using maps.googleapis.com/maps/api/place/nearbysearch API. Alos I added markers ,according to google doc here title is showing only on click event for the marker. But in Google map showing titles with markers actually text drawn in map. So how to do that? – Groundsheet

A custom marker would fit your use case well. You can also try and test out adding the places library when loading the script. Its indicated there that the library enables your application to search for places (defined in this API as establishments, geographic locations, or prominent points of interest) contained within a defined area, such as the bounds of a map, or around a fixed point. – Done

Your suggestion is good but how to use for it in android native apps? In web application only its work – Groundsheet

Sorry, I forgot about it being on Android. I believe the Google Maps app still uses custom markers for their restaurants, and other points of interests. You can just use the same design principles shown when you want to add a restaurant marker. Hope this helps you out a bit. – Done

In my user case I have various icon related to restaurants. like cafe, meal_delivery, bar, bakery etc.. for each of these I displaying different marker icons. I feel its better to display name with icons as like Google maps in android. I think they drawing text along with icon using canvas. – Groundsheet

Its suggested here to call showInfoWindo(). They also indicated various ways to show the title. – Done

Thats good but I am using clustermanager I can't use this. I needed exact like Google as mentioned in my question screen shot (Google Image) – Groundsheet

Answer 5

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!

Loathe

I think it is not possible for android. The library belongs to web application – Groundsheet

@NaveenKumarM This is 100% possible for any application capable of making a web request. Android included. Upon performing a request to the link described, Google APIs will give you an image as a result. You can use it. Another way to see it, is that you can have markers on your application, you can also have this. – Loathe

Thanks Flame, But I don't want to change icons here. I need my customized icons as well. And also making a web request for icons each time its not a good practice. – Groundsheet

@NaveenKumarM Well, I agree that making a GET request every time you want to display an icon is overkill if you have hundreds of restaurants. – Loathe

Beware: while these dynamic icons are nice, they might go away any day. If you just scroll up, you'll see a Warning: This API is deprecated. Please use the actively maintained Google Charts API instead. red banner at the top. – Throb

@Throb I do mention that in my answer. If you know of a better option, feel free to mention it. – Loathe