Google maps android V2 in viewpager does not appear on first page

Question

I have implemented google maps V2 in a View pager. Following is my code.

Activity and Adapter:

public class MainActivity extends FragmentActivity {
FragmentManager fm;
FragmentTransaction ft;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ArrayList<LatLng> alLL = new ArrayList<LatLng>();
    alLL.add(new LatLng(23, 65));
    alLL.add(new LatLng(49, 65));
    alLL.add(new LatLng(70, 65));
    alLL.add(new LatLng(32, 65));
    alLL.add(new LatLng(10, 65));
    ViewPagerAdapter adapter = new ViewPagerAdapter(this, alLL);
    ViewPager myPager = (ViewPager) findViewById(R.id.myfivepanelpager);
    myPager.setAdapter(adapter);
    myPager.setOffscreenPageLimit(0);
    myPager.setCurrentItem(0);

}

public class ViewPagerAdapter extends PagerAdapter {

    ArrayList<LatLng> alLL;
    LayoutInflater inflater;

    public ViewPagerAdapter(Activity context, ArrayList<LatLng> ll) {
        super();
        alLL = ll;
        inflater = context.getLayoutInflater();
    }

    @Override
    public Object instantiateItem(View collection, int position) {
        Log.v("Instantiate object", "pager adapter");
        View view = inflater.inflate(R.layout.pages, null);
        TextView tvTitle = (TextView) view.findViewById(R.id.tvTitle);
        MyMapFragment map = new MyMapFragment();
        Bundle bundle = new Bundle();
        bundle.putDouble("lat", alLL.get(position).latitude);
        bundle.putDouble("lng", alLL.get(position).longitude);
        map.setArguments(bundle);
        getSupportFragmentManager().beginTransaction()
                .add(R.id.flMain, map, "" + position).commit();

        tvTitle.setText("" + position);
        ((ViewPager) collection).addView(view, 0);
        return view;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return alLL.size();
    }

    @Override
    public void destroyItem(View arg0, int arg1, Object arg2) {
        Log.v("Pager adapter", "ondestroyitem called");
        ((ViewPager) arg0).removeView((View) arg2);
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0 == ((View) arg1);
    }

    @Override
    public Parcelable saveState() {
        return null;
    }

}
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<android.support.v4.view.ViewPager
    android:id="@+id/myfivepanelpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</FrameLayout>

pages.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
    android:id="@+id/tvTitle"
    android:text="map"
    android:layout_width="wrap_content"
    android:background="#F00"
    android:layout_height="wrap_content" />

<FrameLayout
    android:id="@+id/flMain"
    android:layout_width="200dp"
    android:layout_height="200dp" >
</FrameLayout>

</LinearLayout>

MyMapFragment

public class MyMapFragment extends SupportMapFragment {
private LatLng latLon;
GoogleMap map;

public MyMapFragment() {
    super();
}

@Override
public void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
}


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    View v = super.onCreateView(inflater, container, savedInstanceState);
    Bundle bundle = getArguments();
    double lat = bundle.getDouble("lat");
    double lng = bundle.getDouble("lng");
    latLon = new LatLng(lat, lng);
    map = getMap();
    initMap();
    return v;
}

@Override
public void onResume() {
    super.onResume();
}

private void initMap() {
    Log.v("MyMapFragment", "initmap");
    UiSettings settings = map.getUiSettings();
    settings.setAllGesturesEnabled(false);
    settings.setMyLocationButtonEnabled(false);

    map.moveCamera(CameraUpdateFactory.newLatLngZoom(latLon, 2));
    map.addMarker(new MarkerOptions().position(latLon));
}
}

The issue i face is whenever i write

getSupportFragmentManager().beginTransaction()
                .add(R.id.flMain, map, "" + position).commit();

map does not appear on first page until i scroll to next few pages and when i come back to first page map appears

and when I use

getSupportFragmentManager().beginTransaction()
                .replace(R.id.flMain, map, "" + position).commit();

maps on every page appears first then disappears after some time but stays on the last page.

Which is proper manner to implement this, to use add or replace.

And how to overcome the issues i face in each of them?

Answer 1

Perfect solution of our issue :

 public class MyAdapter extends FragmentPagerAdapter {  
    public MyAdapter(FragmentManager fragmentManager) {
            super(fragmentManager);         
                                              }

        @Override public int getCount() { 
            return alLL.size(); }

        @Override public Fragment getItem(int position) { 
            return fragments.get(position); }

        @Override public Object instantiateItem(View container, int position) {
            View view => LayoutInflater.from(FragmentMainActivity.this).inflate(R.layout.pages,
 null);             
fm.beginTransaction().replace(R.id.flMain,> f
ragments.get(position), ""+position).commit(); ((ViewPager) container).addView(view, 0);            return view; }
        }