> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/android/ja/maps/llms.txt)

# Multiple Maps with ViewPager

![Use a MapView inside a ViewPager.](https://docs.mapbox.com/android/ja/assets/ideal-img/maps-examples-viewpager.f56cfce.480.png)

This example demonstrates the usage of the Android [`ViewPager`](https://developer.android.com/reference/androidx/viewpager/widget/ViewPager) widget to display multiple maps with different styles using a tabs interface.

When the activity is created, the `ViewPager` is initialized with the `MapFragmentAdapter`. The `onRestoreInstanceState` method ensures that map fragments are loaded asynchronously based on the `ViewPager`'s current and off-screen positions. The [`MapFragment`](https://github.com/mapbox/mapbox-maps-android/blob/main/app/src/main/java/com/mapbox/maps/testapp/examples/fragment/MapFragment.kt) class handles loading map styles based on the index provided.

Each map fragment loads a specific style based on the index value passed using `getStyleFromIndex`. The `getStyleFromIndex` function returns a map style string based on the provided index, which corresponds to different styles available in the [`Style`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps/-style/) class such as `Style.STANDARD`, `Style.DARK`, `Style.SATELLITE`, and others.

> **Note: Android Examples App Available**
> 
> This example code is part of the **Maps SDK for Android Examples App**, a working Android project [available on GitHub](https://github.com/mapbox/mapbox-maps-android/tree/v11.33.0/). Android developers are encouraged to run the examples app locally to interact with this example in an emulator and explore other features of the Maps SDK.
> 
> See our [Run the Maps SDK for Android Examples App](https://docs.mapbox.com/help/tutorials/maps-sdk-android-examples-app/) tutorial for step-by-step instructions.

**Kotlin**

Title: `ViewPagerActivity.kt`

[View on GitHub](https://github.com/mapbox/mapbox-maps-android/blob/v11.33.0/app/src/main/java/com/mapbox/maps/testapp/examples/ViewPagerActivity.kt)

```kt
@file:Suppress("DEPRECATION")

package com.mapbox.maps.testapp.examples

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter
import com.mapbox.maps.Style
import com.mapbox.maps.testapp.databinding.ActivityViewpagerBinding
import com.mapbox.maps.testapp.examples.fragment.MapFragment

/**
 * Test activity showcasing using the Android SDK ViewPager API to show MapFragments.
 */
class ViewPagerActivity : AppCompatActivity() {

  private lateinit var binding: ActivityViewpagerBinding

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityViewpagerBinding.inflate(layoutInflater)
    setContentView(binding.root)
    binding.viewPager.adapter = MapFragmentAdapter(supportFragmentManager)
  }

  override fun onRestoreInstanceState(savedInstanceState: Bundle) {
    super.onRestoreInstanceState(savedInstanceState)
    val currentPosition = binding.viewPager.currentItem
    val offscreenLimit = binding.viewPager.offscreenPageLimit
    for (i in currentPosition - offscreenLimit..currentPosition + offscreenLimit) {
      if (i < 0 || i > binding.viewPager.adapter?.count ?: 0) {
        continue
      }
      val mapFragment = binding.viewPager.adapter?.instantiateItem(binding.viewPager, i) as MapFragment
      mapFragment.getMapAsync(i)
    }
  }

  internal class MapFragmentAdapter(
    fragmentManager: FragmentManager
  ) : FragmentStatePagerAdapter(fragmentManager, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {

    override fun getCount(): Int {
      return NUM_ITEMS
    }

    override fun getItem(position: Int): Fragment {
      val fragment = MapFragment()
      fragment.getMapAsync(position)
      return fragment
    }

    override fun getPageTitle(position: Int): CharSequence {
      return "Page $position"
    }

    companion object {
      private const val NUM_ITEMS = 6
    }
  }
}

fun MapFragment.getMapAsync(index: Int) {
  this.getMapAsync {
    it.loadStyle(getStyleFromIndex(index))
  }
}

fun getStyleFromIndex(index: Int): String {
  return when (index) {
    0 -> Style.STANDARD
    1 -> Style.DARK
    2 -> Style.SATELLITE
    3 -> Style.LIGHT
    4 -> Style.TRAFFIC_NIGHT
    5 -> Style.STANDARD_SATELLITE
    else -> Style.STANDARD
  }
}
```