How to Add Custom Marker in Google Maps | Custom info Window with Adapter | Android Breakdown [Updated]

We Know you need it. That's why we are explaining.

If you want to customize markers in google maps then you are at right place. Don't worry about the new things you are going to face. The key is JUST STAY till the end. Same things is here, you are tired to search a lot over internet, still didn't get what to do, How to do. If yes then focus here, right now.

Default marker in google map

This is the default code, which doesn't do anything special except adding a simple default marker on the particular LatLng (Latitude and Longitude). All changes will be linked to it. so remember, add marker is important thing.

 @Override
    public void onMapReady(final GoogleMap googleMap) {
        this.googleMap = googleMap;
        googleMap.addMarker(new MarkerOptions()
                .position(new LatLng(0,0)));
    }

Custom marker in google map

To make custom marker like above you just need to paste a function which returns bitmap.

private Bitmap getMarkerBitmapFromView(String name) {

        //HERE YOU CAN ADD YOUR CUSTOM VIEW
        View customMarkerView = ((LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.map_marker, null);

        //IN THIS EXAMPLE WE ARE TAKING TEXTVIEW BUT YOU CAN ALSO TAKE ANY KIND OF VIEW LIKE IMAGEVIEW, BUTTON ETC.
        TextView textView = (TextView) customMarkerView.findViewById(R.id.txt_name);
        textView.setText(name);
        customMarkerView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
        customMarkerView.layout(0, 0, customMarkerView.getMeasuredWidth(), customMarkerView.getMeasuredHeight());
        customMarkerView.buildDrawingCache();
        Bitmap returnedBitmap = Bitmap.createBitmap(customMarkerView.getMeasuredWidth(), customMarkerView.getMeasuredHeight(),
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(returnedBitmap);
        canvas.drawColor(Color.WHITE, PorterDuff.Mode.SRC_IN);
        Drawable drawable = customMarkerView.getBackground();
        if (drawable != null)
            drawable.draw(canvas);
        customMarkerView.draw(canvas);
        return returnedBitmap;
    }

Create "map_marker.xml" in layout

Now that's it, if you only want to customize marker. Use this function in addMarker.

 googleMap.addMarker(new MarkerOptions()
                        .position(new LatLng(0,0))
                        .icon(BitmapDescriptorFactory.fromBitmap(getMarkerBitmapFromView("Custom Marker"))));

Now here comes info window. Yes, the window, which will pop up by clicking on marker icon is called info window.

Custom info window in google map

To create this type of info window you need to create a class which will implement GoogleMap.InfoWindowAdapter. So first of all paste this code.

 class MyInfoWindowAdapter implements GoogleMap.InfoWindowAdapter {

        private final View customView;
        private [Your List] list;
        boolean notFirstTime;


        MyInfoWindowAdapter([Your List] list) {
            this.list = list;
            customView = getLayoutInflater(null).inflate(R.layout.map_info_window, null);
        }

        @Override
        public View getInfoContents(final Marker marker) {
            int position = Integer.parseInt(marker.getSnippet());

            //Todo your code here

            return customView;
        }

        @Override
        public View getInfoWindow(Marker marker) {
            // TODO Auto-generated method stub
            return null;
        }

    }

Create "map_info_window.xml" in layouts

Now be careful about markers, Read it carefully that MyInfoWindowAdapter will work same as a adapter, which we make for listview or recyclerview. But here, this adapter is for markers. see the example below.

//HERE WE ARE ADDING MARKERS FROM A LIST OF LATLNG

for(int i=0;i<[your list size];i++)
{
  googleMap.addMarker(new MarkerOptions()
                        .position([your list].getLatLng())//Getting latlng from an item of list.
                        .snippet(String.valueOf(i))//Here we are saving the position of marker (converted into string).
                        .icon(BitmapDescriptorFactory.fromBitmap(getMarkerBitmapFromView([Your List].get(i).getMarkerName()))));
}
  
  googleMap.setInfoWindowAdapter(new MyInfoWindowAdapter([your list]));//pass your list, which contains info window data.

// NOTE : LIST WILL ALSO CONTAIN OTHERS DATA FOR INFO WINDOW WITH LATLNG

That's it. You are almost done, you only need to make your own custom layout for the info window and have to use into adapter. To show data according to markers place, you can get position of them from snippet.

class MyInfoWindowAdapter implements GoogleMap.InfoWindowAdapter {

        private final View customView;
        private [Your List] list;
        boolean notFirstTime;


        MyInfoWindowAdapter([Your List] list) {
            this.list = list;
            //INFLATE YOUR CUSTOM VIEW FROM HERE

            customView = getLayoutInflater(null).inflate(R.layout.map_info_window, null);
        }

        @Override
        public View getInfoContents(final Marker marker) {

            //BY THIS YOU CAN GET MARKER POSITION

            int position = Integer.parseInt(marker.getSnippet());

            //TO MAKE YOU UNDERSTAND WE ARE TAKING AN EXAMPLE THAT HOW YOU CAN FIND VIEWS FROM YOUR CUSTOM LAYOUT

            TextView txtView= (TextView) customView.findViewById(R.id.text_view);

 
            /*NOW WE WILL SHOW TEXT ACCORDING TO MARKERS POSITION. THE TEXT, WHICH IS STORED IN YOUR LIST (IT CAN BE ANY THING, A IMAGE URL, TEXT ETC. ACCORDING TO YOUR NEED)*/

            txtView.setText([Your List].get(position).getPlaceName());//You can get your own function, whatever you made in you list for a particular position.


            return customView;
        }

        @Override
        public View getInfoWindow(Marker marker) {
            // TODO Auto-generated method stub
            return null;
        }

    }

For be updated Just Subscribe us.