CODEWITHSUNDEEP
androidgoogle-maps-markers
Madhu
Madhu

Reputation: 1800

Write text in Google Map v2 custom marker - Android

In my map , I have some list of Markers, now I need to achieve the output as like belowenter image description here

i.e. marker with index number.

I have searched over google but didn't get any solution, Please help me to get an idea to implement this.

Upvotes: 4

Views: 6616

Answers (2)

hrskrs
hrskrs

Reputation: 4480

For custom marker:

  • You can create a custom image and draw an index number in top of that image
  • Check this example for custom marker

For Marker Window:

You can create a custom xml file that contains ImageView and TextViews:

Something like customMapView.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/white_full"
    android:layout_width="match_parent"
    android:padding="@dimen/padding_micro"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img"
        android:layout_gravity="left"
        android:src="@drawable/ic_launcher"
        android:textColor="@color/black_full"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:gravity="right"
        android:id="@+id/name"
        android:text="test"
        android:textColor="@color/black_full"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

      <!-- Other TextViews or Whatever you want-->

</RelativeLayout>

After you initialize Markers you call setInfoWindowAdapter and inflate your custom view. Something like:

    private void customizeMarkerInfoWindow(){
        //Setting custom info window
        mMap.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() {
            //Use default infoWindow frame
            @Override
            public View getInfoWindow(Marker marker) {
                return null;
            }

            @Override
            public View getInfoContents(Marker marker) {
                // Getting view from the layout file
                View view = mActivity.getLayoutInflater().inflate(R.layout.customMapView, null);
                // Getting the position from the marker
                LatLng latLng = marker.getPosition();
                //UI elements
                ImageView img = (TextView) view.findViewById(R.id.img);
                TextView coord = (TextView) view.findViewById(R.id.name);
                mukAdTv.setText(mukAd);
                //You set the image here depending on how you want to set it, if you are downloading from internet you can use PICASSO for it and set it to img
                //With picasso
                Picasso.with(mActivity).load(YOUR_IMAGE_URL).into(img);
                //From drawables
                //img.setBackground(yourDrawable);
                name.setText(latLng.latitude + ", " + latLng.longitude);

                return view;
            }
        });
    }

Upvotes: 2

gprathour
gprathour

Reputation: 15333

Do whatever you want with Google Map Markers

I have made a very flexible and interesting hack to achieve whatever kind of marker you want.

What I do is,

  1. Create an XML Layout file and design it the way you want your marker to appear. For example in your case it is going to be a Green Marker image with a TextView on it.

  2. Set the values of TextViews as per requirement.

  3. Convert the Layout file to an image and get BitmapDescriptor Object.

  4. Create a custom marker by using the image you just created.

The benefit of such view over Info Window is that you can open window for multiple markers at same time. As in InfoWindow you can open it only for one marker at one time.

Code Sample

Check out my this answer for Code Help.

Upvotes: 4

Related Questions