Search code examples
androidgoogle-mapsandroid-layoutandroid-fragmentsmarker

Google map with number markers from server


I want to show multiple markers on Google map. I want to show marker as number in round area. As below image :

enter image description here

For adding multiple markers i have gone through :

Adding multiple markers in Google Maps API v2 Android

Adding Multiple Markers Google Maps

How to show multiple markers on MapFragment in Google Map API v2?

And I have achieved multiple markers by this code :

public class ComplaintsMapActivity extends FragmentActivity implements OnMapReadyCallback  {

    private GoogleMap mMap;
    private NetworkManager networkManager = null;
    private int reqIdComplaintList = -1;
    private ArrayList<ComplaintData> complaintList = new ArrayList<>();

    private static final int ZOOM_LEVEL = 15;
    private static final int TILT_LEVEL = 0;
    private static final int BEARING_LEVEL = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_complaints_map);
        // Obtain the SupportMapFragment and get notified when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);

        networkManager = NetworkManager.getInstance();

    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        complaintList = (ArrayList<ComplaintData>)getIntent().getSerializableExtra("list");


        for (int i = 0; i < complaintList.size(); i++) {
            ComplaintData location = complaintList.get(i);
            LatLng position = new LatLng(Double.parseDouble(location.getLat()), Double.parseDouble(location.getLng()));
            mMap.addMarker(new MarkerOptions().position(position));
            
            if (i == 0) {
                CameraPosition camPos = new CameraPosition(position, ZOOM_LEVEL, TILT_LEVEL, BEARING_LEVEL);
                mMap.moveCamera(CameraUpdateFactory.newCameraPosition(camPos));
            }
        }

    }

}

And my result is :

enter image description here

I know how to set custom markers. But this data is dynamic any number of data will be there. So I want to ask if is there any way to generate this numbers by any loop something. because setting marker to each location i would need hundreds of markers which is not much preferable. So is there any option for this?

Note : I don't want clustering. I just want to show 1 on one marker, 2 on second marker, ... and 100 on hundred marker and so on.

Any help will be appreciated.

Thank you :)


Solution

  • First You need to create a custom layout for you marker :

    <?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="@dimen/_35sdp"
       android:layout_height="@dimen/_45sdp"
       android:src="@drawable/ic_marker" />
    
    <TextView
       android:id="@+id/num_txt"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       android:paddingBottom="@dimen/_10sdp"
       android:text="20"
       android:textColor="@color/white"
       android:textSize="@dimen/font_title"
       android:textStyle="bold" />
    
    </RelativeLayout>
    

    Your Image can be a drawable. You can take an imageview or a background to your textview. Both works

    View marker = ((LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.custom_marker_layout, null);
       TextView numTxt = (TextView) marker.findViewById(R.id.num_txt);
    Marker myMarker = googleMap.addMarker(new MarkerOptions().position(latLng).title(arrPostList.get(i).getRestaurant_name()).icon(BitmapDescriptorFactory.fromBitmap(Utils.createDrawableFromView(getActivity(), marker))));
    

    Create Bitmap From Drawable method :

    // 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 RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.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;
    }