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

# View annotation as InfoWindow

![Legacy InfoWindow implementation using view annotations.](https://docs.mapbox.com/android/ja/assets/ideal-img/maps-examples-view-annotation-as-infowindow.ae8d32e.480.png)

This example demonstrates View Annotation API and point annotations to display markers on the map in the **Mapbox Maps SDK for Android**.

By utilizing the [`MarkerManager`](https://github.com/mapbox/mapbox-maps-android/blob/main/app/src/main/java/com/mapbox/maps/testapp/examples/markersandcallouts/infowindow/MarkerManager.kt) and [`Marker`](https://github.com/mapbox/mapbox-maps-android/blob/main/app/src/main/java/com/mapbox/maps/testapp/examples/markersandcallouts/infowindow/Marker.kt) classes (custom classes available in the [Maps SDK examples app](https://docs.mapbox.com/help/tutorials/maps-sdk-android-examples-app/)), the activity adds markers with titles, snippets, icons, and positions on the map. Additionally, it demonstrates how to handle custom markers, remove markers on long clicks, and provide detailed information within an information window associated with a specific marker. The example replicates the functionality of the Maps SDK v9 `InfoWindow` API, offering a way to interact with markers and callouts on the map interface.

There are several ways to add markers, annotations, and other shapes to the map using the Maps SDK. To choose the appropriate approach for your application, read the [Markers and annotations](https://docs.mapbox.com/android/ja/maps/guides/annotations/) guide.

> **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: `InfoWindowActivity.kt`

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

```kt
package com.mapbox.maps.testapp.examples.markersandcallouts.infowindow

import android.graphics.Bitmap
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.geojson.Point
import com.mapbox.maps.MapView
import com.mapbox.maps.dsl.cameraOptions
import com.mapbox.maps.plugin.gestures.OnMapLongClickListener
import com.mapbox.maps.plugin.gestures.addOnMapLongClickListener
import com.mapbox.maps.plugin.gestures.removeOnMapLongClickListener
import com.mapbox.maps.testapp.R
import com.mapbox.maps.testapp.utils.BitmapUtils.bitmapFromDrawableRes
import java.text.DecimalFormat

/**
 * Test activity showcasing markers above Washington D.C
 * using View Annotation API and point annotations.
 *
 * This example is replicating similar activity from Maps v9 that was using InfoWindow API.
 */
class InfoWindowActivity : AppCompatActivity(), OnMapLongClickListener {

  private lateinit var mapView: MapView
  private lateinit var icon: Bitmap

  private lateinit var markerManager: MarkerManager
  private var customMarker: Marker? = null

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    mapView = MapView(this)
    setContentView(mapView)

    icon = bitmapFromDrawableRes(R.drawable.ic_blue_marker)
    mapView.mapboxMap.apply {
      setCamera(
        cameraOptions {
          center(Point.fromLngLat(-77.03655168667463, 38.897705003219784))
          zoom(15.0)
        }
      )
      getStyle {
        markerManager = MarkerManager(mapView)
        addMarkers()
      }
      addOnMapLongClickListener(this@InfoWindowActivity)
    }
  }

  private fun addMarkers() {
    markerManager.addMarker(
      Marker(
        title = "Intersection",
        snippet = "H St NW with 15th St NW",
        position = Point.fromLngLat(-77.03364419, 38.9002073),
        icon = icon,
      )
    )
    markerManager.addMarker(
      Marker(
        title = "The Ellipse",
        icon = icon,
        position = Point.fromLngLat(-77.03654, 38.89393)
      )
    )
    val marker = markerManager.addMarker(
      Marker(
        title = "White House",
        snippet = """
          The official residence and principal workplace of the President of the United States,
          located at 1600 Pennsylvania Avenue NW in Washington, D.C. It has been the residence of every
          U.S. president since John Adams in 1800.
        """.trimIndent(),
        icon = icon,
        position = Point.fromLngLat(-77.03655168667463, 38.897705003219784)
      )
    )
    // open InfoWindow at startup
    markerManager.selectMarker(marker)
  }

  override fun onMapLongClick(point: Point): Boolean {
    customMarker?.let {
      markerManager.removeMarker(it)
    }
    customMarker = markerManager.addMarker(
      Marker(
        position = point,
        icon = icon,
        title = "Custom marker",
        snippet = "${DecimalFormat("#.#####").format(point.latitude())}, ${DecimalFormat("#.#####").format(point.longitude())}"
      )
    )
    return true
  }

  override fun onDestroy() {
    mapView.mapboxMap.removeOnMapLongClickListener(this)
    markerManager.destroy()
    super.onDestroy()
  }
}
```