MapView inside RecyclerView only displaying map on clicks

Question

This has to be the most absurd thing ever.

I have a RecyclerView with repeated custom items. Inside these items, there are a few textfields, buttons and a single MapView.

The issue is that when the list loads, the MapView only displays the Google logo and no other tile or detail (or marker). However, when I tap once on the map, it shows the marker I added. On the next tap, it loads a pixellated map. On another tap, it loads a better quality map. On further clicks it adds the text labels for nearby locations. LatLngBounds are also not working but that's a secondary problem.

Why is this happening?

My code is as follows:

JobAdapter.java

public class JobAdapter extends RecyclerView.Adapter<JobAdapter.ViewHolder>
{
    private Context context;
    private static List<Job> jobList;
    private HashSet<MapView> mapViews = new HashSet<>();
    private GoogleMap googleMap;

    public JobAdapter(Context con, List<Job> jobs)
    {
        context = con;
        jobList = jobs;
    }

    @Override
    public int getItemCount()
    {
        return jobList.size();
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
    {
        Context context = parent.getContext();
        LayoutInflater inflater = LayoutInflater.from(context);
        View view = inflater.inflate(R.layout.listitem_booking, parent, false);
        ViewHolder viewHolder = new ViewHolder(view);
        mapViews.add(viewHolder.mapView);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position)
    {
        Job job = jobList.get(position);

        holder.mapView.setClickable(false);

        if(job.getJobType().equalsIgnoreCase("Now"))
        {
            holder.pickup.setBackgroundColor(ContextCompat.getColor(context, R.color.lightRed));
        }

        holder.pickup.setText(job.getPickupAddress());
        if(job.getDestinationAddress() != null && !job.getDestinationAddress().equalsIgnoreCase(""))
        {
            holder.destination.setText(job.getDestinationAddress());
        }
        else
        {
            holder.destination.setVisibility(View.GONE);
        }
        holder.person.setText(job.getContact());
        holder.datetime.setText(job.getDate() + " at " + job.getTime());
    }

    class ViewHolder extends RecyclerView.ViewHolder implements /*View.OnClickListener,*/ OnMapReadyCallback
    {
        @BindView(R.id.pickup)
        TextView pickup;

        @BindView(R.id.destination)
        TextView destination;

        @BindView(R.id.person)
        TextView person;

        @BindView(R.id.datetime)
        TextView datetime;

        @BindView(R.id.map_listitem)
        MapView mapView;

        @BindView(R.id.acceptJob)
        Button acceptJob;

        @BindView(R.id.declineJob)
        Button declineJob;

        @BindView(R.id.buttonLayout)
        LinearLayout buttonLayout;

        private ViewHolder(View itemView)
        {
            super(itemView);
            ButterKnife.bind(this, itemView);
//            itemView.setOnClickListener(this);
            mapView.onCreate(null);
            mapView.getMapAsync(this);
        }

        private void addMarkers(Job job)
        {
            googleMap.clear();
            boolean hasDestination = true;
            String[] destinationLatlng = null;
            LatLng destination = null;

            if(job.getDestinationAddress() == null || job.getDestinationAddress().equalsIgnoreCase(""))
            {
                hasDestination = false;
            }
            else
            {
                destinationLatlng = job.getDestinationLatLong().split(",");
                destination = new LatLng(Double.valueOf(destinationLatlng[0]), Double.parseDouble(destinationLatlng[1]));
            }

            final String[] pickupLatlng = job.getPickupLatLong().split(",");
            final LatLng pickup = new LatLng(Double.valueOf(pickupLatlng[0]), Double.parseDouble(pickupLatlng[1]));

            if(hasDestination)
            {
                googleMap.addMarker(new MarkerOptions()
                        .position(pickup)
                        .title(job.getPickupAddress()));

                googleMap.addMarker(new MarkerOptions()
                        .position(destination)
                        .title(job.getDestinationAddress()));

                LatLngBounds.Builder builder = new LatLngBounds.Builder();
                builder.include(pickup);
                builder.include(destination);

                LatLngBounds bounds = builder.build();

                CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLngBounds(bounds, 5);
                googleMap.animateCamera(cameraUpdate);
            }
            else
            {
                googleMap.addMarker(new MarkerOptions()
                        .position(pickup)
                        .title(job.getPickupAddress()));

                CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLngZoom(pickup, 15);
                googleMap.animateCamera(cameraUpdate);
            }
        }

        /*@Override
        public void onClick(View view)
        {
            final Job job = jobList.get(getAdapterPosition());
        }*/

        @Override
        public void onMapReady(GoogleMap gMap)
        {
            googleMap = gMap;
            addMarkers(jobList.get(getAdapterPosition()));
        }
    }
}

listitem_booking

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:map="http://schemas.android.com/tools"
    android:orientation="vertical"
    app:cardElevation="2dp"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/pickup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingStart="4dp"
            android:paddingEnd="4dp"
            android:paddingTop="2dp"
            android:paddingBottom="2dp"
            android:textSize="16sp"
            android:text="Complex"
            android:background="@color/lessLightGreen"
            android:gravity="center_vertical"
            android:drawableStart="@drawable/google_maps"
            android:drawablePadding="2dp"
            android:textColor="@color/colorPrimaryText"/>

        <TextView
            android:id="@+id/destination"
            android:layout_below="@id/pickup"
            android:text="Golra"
            android:visibility="visible"
            android:drawableStart="@drawable/directions"
            android:drawablePadding="2dp"
            style="@style/listitem_secondary_text"/>

        <TextView
            android:id="@+id/person"
            android:drawablePadding="2dp"
            android:layout_below="@id/destination"
            android:text="Asfandyar Khan"
            android:drawableStart="@drawable/account"
            style="@style/listitem_secondary_text"/>

        <TextView
            android:id="@+id/datetime"
            android:layout_below="@id/person"
            android:text="7th April 2017 at 9:00am"
            android:drawableStart="@drawable/time"
            style="@style/listitem_secondary_text"/>

        <com.google.android.gms.maps.MapView
            android:id="@+id/map_listitem"
            android:layout_width="match_parent"
            android:layout_height="170dp"
            android:layout_marginTop="2dp"
            android:layout_below="@id/datetime"
            map:liteMode="true"
            android:padding="10dp"/>

        <LinearLayout
            android:id="@+id/buttonLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_below="@id/map_listitem"
            android:gravity="end"
            android:layout_margin="4dp">

            <Button
                android:backgroundTint="@color/colorPrimary"
                android:textColor="@android:color/white"
                android:id="@+id/acceptJob"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Accept"/>

            <Button
                android:backgroundTint="@color/darkRed"
                android:textColor="@android:color/white"
                android:id="@+id/declineJob"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Decline"/>

        </LinearLayout>

    </RelativeLayout>

</android.support.v7.widget.CardView>

I've tried various things but nothing seems to be working.

Answer 1

There might another issue in your code. The "map" should be:

xmlns:map="http://schemas.android.com/apk/res-auto"

but not:

xmlns:map="http://schemas.android.com/tools"

Answer 2

Try adding onResume, like this:

mapView.onCreate(null);
mapView.getMapAsync(this);
mapView.onResume();

Edit:
I've just noticed you are using

map:liteMode="true"  

Try removing it (at least to test) or adding the following to the xml:

map:cameraZoom="15"  
map:mapType="normal"

• Either way, I think the onResume is needed.
• When I use liteMode it sometimes takes a few seconds (about 5) for the map to show after the logo.