Add InfoWindow on MapView

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:

    1View infoWindowView = LayoutInflater.from(this).inflate(R.layout.layout_custom_info_window, navigationView, false);
  2. Create an InfoWindow and display it on the MapView:

    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

activity_custom_add_view_annotation.xml

1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3   xmlns:app="http://schemas.android.com/apk/res-auto"
4   xmlns:tools="http://schemas.android.com/tools"
5   android:layout_width="match_parent"
6   android:layout_height="match_parent"
7   tools:context=".activity.CustomAddViewAnnotationActivity">
8
9   <ai.nextbillion.navigation.ui.NavigationView
10       android:id="@+id/navigation_view_fragment"
11       android:layout_width="0dp"
12       android:layout_height="0dp"
13       app:layout_constraintBottom_toBottomOf="parent"
14       app:layout_constraintEnd_toEndOf="parent"
15       app:layout_constraintStart_toStartOf="parent"
16       app:layout_constraintTop_toTopOf="parent"
17       app:navigationDarkTheme="@style/NavigationViewDark"
18       app:navigationLightTheme="@style/NavigationViewLight" />
19
20</androidx.constraintlayout.widget.ConstraintLayout>

layout_custom_info_window.xml

1<?xml version="1.0" encoding="utf-8"?>
2<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3   android:layout_width="wrap_content"
4   android:layout_height="wrap_content"
5   android:background="@color/teal_700"
6   android:padding="16dp"
7   android:layout_gravity="center">
8
9   <TextView
10       android:id="@+id/tv_custom_txt"
11       android:layout_width="wrap_content"
12       android:layout_height="wrap_content"
13       android:text="@string/custom_view_title"/>
14
15   <Button
16       android:id="@+id/custom_button"
17       android:layout_width="wrap_content"
18       android:layout_height="wrap_content"
19       android:text="@string/custom_view_button"
20       android:layout_below="@+id/tv_custom_txt"/>
21
22</RelativeLayout>

CustomAddViewAnnotationActivity

1public class CustomAddViewAnnotationActivity extends AppCompatActivity implements OnNavigationReadyCallback {
2
3   private static final double DEFAULT_CAMERA_ZOOM = 14;
4   private NavigationView navigationView;
5
6   @Override
7   protected void onCreate(Bundle savedInstanceState) {
8       super.onCreate(savedInstanceState);
9       setContentView(R.layout.activity_custom_add_view_annotation);
10
11       navigationView = findViewById(R.id.navigation_view_fragment);
12       navigationView.onCreate(savedInstanceState);
13       navigationView.initialize(this);
14
15   }
16
17   @Override
18   public void onStart() {
19       super.onStart();
20       navigationView.onStart();
21   }
22
23   @Override
24   public void onResume() {
25       super.onResume();
26       navigationView.onResume();
27   }
28
29   @Override
30   public void onSaveInstanceState(@NonNull Bundle outState) {
31       navigationView.onSaveInstanceState(outState);
32       super.onSaveInstanceState(outState);
33   }
34
35   @Override
36   protected void onRestoreInstanceState(@NonNull Bundle savedInstanceState) {
37       super.onRestoreInstanceState(savedInstanceState);
38       if (savedInstanceState != null) {
39           navigationView.onRestoreInstanceState(savedInstanceState);
40       }
41   }
42
43   @Override
44   public void onPause() {
45       super.onPause();
46       navigationView.onPause();
47   }
48
49   @Override
50   public void onStop() {
51       super.onStop();
52       navigationView.onStop();
53   }
54
55   @Override
56   public void onLowMemory() {
57       super.onLowMemory();
58       navigationView.onLowMemory();
59   }
60
61   @Override
62   public void onDestroy() {
63       super.onDestroy();
64       navigationView.onDestroy();
65   }
66
67   @Override
68   public void onNavigationReady(boolean isRunning) {
69       View infoWindowView = LayoutInflater.from(this).inflate(R.layout.layout_custom_info_window,navigationView,false);
70       infoWindowView.findViewById(R.id.custom_button).setOnClickListener(new View.OnClickListener() {
71           @Override
72           public void onClick(View v) {
73               Toast.makeText(CustomAddViewAnnotationActivity.this, "click customize view button", Toast.LENGTH_SHORT).show();
74           }
75       });
76       // add InfoWindow on MapView
77       InfoWindow infoWindow = navigationView.addInfoWindow(infoWindowView,new LatLng(17.49361551715865,78.39382912963629),0,0);
78       // set InfoWindow click event
79       infoWindow.setOnInfoWindowClickListener(new InfoWindow.OnInfoWindowClickListener() {
80           @Override
81           public void onInfoWindowClick() {
82               super.onInfoWindowClick();
83               Toast.makeText(CustomAddViewAnnotationActivity.this, "on InfoWindow click", Toast.LENGTH_SHORT).show();
84           }
85
86           @Override
87           public void onInfoWindowLongClick() {
88               super.onInfoWindowLongClick();
89               Toast.makeText(CustomAddViewAnnotationActivity.this, "on InfoWindow long click", Toast.LENGTH_SHORT).show();
90           }
91       });
92       // close InfoWindow
93       //infoWindow.close();
94       CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLngZoom(new LatLng(17.49361551715865,78.39382912963629), DEFAULT_CAMERA_ZOOM);
95       NavigationCameraUpdate navigationCameraUpdate = new NavigationCameraUpdate(cameraUpdate);
96       navigationCameraUpdate.setMode(CameraUpdateMode.OVERRIDE);
97       navigationView.retrieveNavNextbillionMap().retrieveCamera().update(navigationCameraUpdate, 1000);
98   }
99}

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:

1// Create a View object that will be used to display the info window.
2View infoWindowView = LayoutInflater.from(this).inflate(R.layout.layout_custom_info_window, navigationView, false);
3
4// Call the addInfoWindow() method of the MapView object, passing in the View object and the location of the info window.
5InfoWindow infoWindow = navigationView.addInfoWindow(infoWindowView, new LatLng(17.49361551715865, 78.39382912963629), 0, 0);
6
7// Set a click listener for the info window.
8infoWindow.setOnInfoWindowClickListener(new InfoWindow.OnInfoWindowClickListener() {
9    @Override
10    public void onInfoWindowClick() {
11        Toast.makeText(CustomAddViewAnnotationActivity.this, "on InfoWindow click", Toast.LENGTH_SHORT).show();
12    }
13});

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.

DIDN'T FIND WHAT YOU LOOKING FOR?