# Add InfoWindow on MapView

![documentation image](https://static.nextbillion.io/docs-next/docs/navigation/android/add-Infowindow-on-mapview.jpg)

This example shows how to display InfoWindow on MapView by using Map View API. Follow the below steps to add InfoWindow:

1.  Create a custom view for the InfoWindow:

    ```java
    View infoWindowView = LayoutInflater.from(this).inflate(R.layout.layout_custom_info_window, navigationView, false);
    ```

2.  Create an InfoWindow and display it on the MapView:

    ```java
    InfoWindow infoWindow = navigationView.addInfoWindow(infoWindowView,new LatLng(17.49361551715865,78.39382912963629),0,0);
    ```


By following these steps, you can create a custom view for the InfoWindow and then add and display the InfoWindow on the MapView at a specific position with optional offset values for customization.

For all code examples, refer to [Navigation Code Examples](https://github.com/nextbillion-ai/nb-navigation-android-demo)

**activity_custom_add_view_annotation.xml**

```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".activity.CustomAddViewAnnotationActivity">

   <ai.nextbillion.navigation.ui.NavigationView
       android:id="@+id/navigation_view_fragment"
       android:layout_width="0dp"
       android:layout_height="0dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:navigationDarkTheme="@style/NavigationViewDark"
       app:navigationLightTheme="@style/NavigationViewLight" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

**layout_custom_info_window.xml**

```xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@color/teal_700"
   android:padding="16dp"
   android:layout_gravity="center">

   <TextView
       android:id="@+id/tv_custom_txt"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/custom_view_title"/>

   <Button
       android:id="@+id/custom_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/custom_view_button"
       android:layout_below="@+id/tv_custom_txt"/>

</RelativeLayout>
```

### CustomAddViewAnnotationActivity

```java
public class CustomAddViewAnnotationActivity extends AppCompatActivity implements OnNavigationReadyCallback {

   private static final double DEFAULT_CAMERA_ZOOM = 14;
   private NavigationView navigationView;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_custom_add_view_annotation);

       navigationView = findViewById(R.id.navigation_view_fragment);
       navigationView.onCreate(savedInstanceState);
       navigationView.initialize(this);

   }

   @Override
   public void onStart() {
       super.onStart();
       navigationView.onStart();
   }

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

   @Override
   public void onSaveInstanceState(@NonNull Bundle outState) {
       navigationView.onSaveInstanceState(outState);
       super.onSaveInstanceState(outState);
   }

   @Override
   protected void onRestoreInstanceState(@NonNull Bundle savedInstanceState) {
       super.onRestoreInstanceState(savedInstanceState);
       if (savedInstanceState != null) {
           navigationView.onRestoreInstanceState(savedInstanceState);
       }
   }

   @Override
   public void onPause() {
       super.onPause();
       navigationView.onPause();
   }

   @Override
   public void onStop() {
       super.onStop();
       navigationView.onStop();
   }

   @Override
   public void onLowMemory() {
       super.onLowMemory();
       navigationView.onLowMemory();
   }

   @Override
   public void onDestroy() {
       super.onDestroy();
       navigationView.onDestroy();
   }

   @Override
   public void onNavigationReady(boolean isRunning) {
       View infoWindowView = LayoutInflater.from(this).inflate(R.layout.layout_custom_info_window,navigationView,false);
       infoWindowView.findViewById(R.id.custom_button).setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               Toast.makeText(CustomAddViewAnnotationActivity.this, "click customize view button", Toast.LENGTH_SHORT).show();
           }
       });
       // add InfoWindow on MapView
       InfoWindow infoWindow = navigationView.addInfoWindow(infoWindowView,new LatLng(17.49361551715865,78.39382912963629),0,0);
       // set InfoWindow click event
       infoWindow.setOnInfoWindowClickListener(new InfoWindow.OnInfoWindowClickListener() {
           @Override
           public void onInfoWindowClick() {
               super.onInfoWindowClick();
               Toast.makeText(CustomAddViewAnnotationActivity.this, "on InfoWindow click", Toast.LENGTH_SHORT).show();
           }

           @Override
           public void onInfoWindowLongClick() {
               super.onInfoWindowLongClick();
               Toast.makeText(CustomAddViewAnnotationActivity.this, "on InfoWindow long click", Toast.LENGTH_SHORT).show();
           }
       });
       // close InfoWindow
       //infoWindow.close();
       CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLngZoom(new LatLng(17.49361551715865,78.39382912963629), DEFAULT_CAMERA_ZOOM);
       NavigationCameraUpdate navigationCameraUpdate = new NavigationCameraUpdate(cameraUpdate);
       navigationCameraUpdate.setMode(CameraUpdateMode.OVERRIDE);
       navigationView.retrieveNavNextbillionMap().retrieveCamera().update(navigationCameraUpdate, 1000);
   }
}
```

### Code summary

The example code shows how to add a custom info window to a map. The info window contains a button that, when clicked, displays a toast message. The info window also has a click listener that displays a toast message when the info window is clicked. To add an info window to a map, you need to do the following:

1.  Create a **View** object that will be used to display the info window.

2.  Call the **addInfoWindow()** method of the **MapView** object, passing in the **View** object and the location of the info window.

3.  Set a click listener for the info window.


The following code shows how to add an info window to a map:

```java
// Create a View object that will be used to display the info window.
View infoWindowView = LayoutInflater.from(this).inflate(R.layout.layout_custom_info_window, navigationView, false);

// Call the addInfoWindow() method of the MapView object, passing in the View object and the location of the info window.
InfoWindow infoWindow = navigationView.addInfoWindow(infoWindowView, new LatLng(17.49361551715865, 78.39382912963629), 0, 0);

// Set a click listener for the info window.
infoWindow.setOnInfoWindowClickListener(new InfoWindow.OnInfoWindowClickListener() {
    @Override
    public void onInfoWindowClick() {
        Toast.makeText(CustomAddViewAnnotationActivity.this, "on InfoWindow click", Toast.LENGTH_SHORT).show();
    }
});
```

The **onInfoWindowClick()** method will be called when the info window is clicked. This method can be used to perform any action that you want when the info window is clicked.

In the example code, the **onInfoWindowClick()** method displays a toast message when the info window is clicked.