Show custom infoWindow for multiple markers using Android Mapbox SDK

Question

I am trying to visualize multiple markers on map. Its showing perfectly and onMarkerTap its showing information retrieved from database as JSON. What I want to do is showing the information in a custom layout or bottom sheet. When user tap on marker a bottom sheet will appear with the information related to that marker. I am using the following code for the showing of multiple markers. here on MapViewListener section onTapMarker I have set the marker.getTitle() to show the marker name in the Toast for test. But it is showing the same marker name for all markers. But in the infoWindow built in that show on map showing accurate data. How can I solve this?

        FloatingActionButton layerButton = (FloatingActionButton)findViewById(R.id.layer);
        layerButton.setOnClickListener(new View.OnClickListener() {

            public void getData() {
                String url = Config.DATA_URL;

                StringRequest stringRequest = new StringRequest(url, new Response.Listener<String>() {
                    @Override
                    public void onResponse(String response) {
                        showJSON(response);
                    }
                },
                        new Response.ErrorListener() {
                            @Override
                            public void onErrorResponse(VolleyError error) {
                                Toast.makeText(MainActivity.this,error.getMessage().toString(),Toast.LENGTH_LONG).show();
                            }
                        });


                requestQueue.add(stringRequest);
            }

            public void showJSON(String response){

                try {
                    JSONObject jsonObject = new JSONObject(response);
                    JSONArray jsonArray = jsonObject.getJSONArray(Config.JSON_ARRAY);
                    for (int i=0;i<jsonArray.length();i++){
                        JSONObject singleMarker = jsonArray.getJSONObject(i);
                        String poi_name = singleMarker.getString(Config.POI_NAME);
                        String poi_latitude = singleMarker.getString(Config.POI_LATITUDE);
                        String poi_longitude = singleMarker.getString(Config.POI_LONGITUDE);

                        Double dbl_latitude = Double.parseDouble(poi_latitude);
                        Double dbl_longitude = Double.parseDouble(poi_longitude);


                        final Marker marker = new Marker(poi_name, poi_thananame, new LatLng(dbl_latitude, dbl_longitude));
                        marker.setMarker(getResources().getDrawable(R.mipmap.poi_shopping));
                        mapView.addMarker(marker);

                        mapView.setMapViewListener(new MapViewListener() {
                            @Override
                            public void onShowMarker(MapView pMapView, Marker pMarker) {
                            }

                            @Override
                            public void onHideMarker(MapView pMapView, Marker pMarker) {
                            }

                            @Override
                            public void onTapMarker(MapView pMapView, Marker pMarker) {
                                Toast.makeText(getApplicationContext(), " Name: "+marker.getTitle()+, Toast.LENGTH_LONG).show(); 
                            }

                            @Override
                            public void onLongPressMarker(MapView pMapView, Marker pMarker) {
                            }

                            @Override
                            public void onTapMap(MapView pMapView, ILatLng pPosition) {
                            }

                            @Override
                            public void onLongPressMap(MapView pMapView, ILatLng pPosition) {
                            }
                        });

                    }


                } catch (JSONException e) {
                    e.printStackTrace();
                }
//
//                mapView.setCenter(new LatLng(dbl_latitude, dbl_longitude));
//                mapView.setZoom(18);

            }

            //////END OF GET DATA///////

            @Override
            public void onClick(View v) {
                clearLayerFAB.setVisibility(View.VISIBLE);
                getData();
            }

        });

Answer 1

happy to help you out with this one. I assume you are using the 3.2.0 version of the Mapbox Android SDK. If so, I see two problems with your code posted above.

1) You are setting up your listener within the for loop so every time you add a marker your just reseting the listener.

2) Both 3.2.0 and the newer 4.0.0 have a setOnMarkerClickListener method you can call and within it you can add your toast. So it will looks something like this:

for (int i=0;i<jsonArray.length();i++){

    // Add your markers here

}

// Setup your listener here
mapView.setOnMarkerClickListener(new MapboxMap.OnMarkerClickListener() {
    @Override
    public boolean onMarkerClick(@NonNull Marker marker) {

    Toast.makeText(getApplicationContext(), " Name: "+marker.getTitle()+, Toast.LENGTH_LONG).show();

    return false;
    }
});

Hopefully this helps!