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:

Create a custom view for the InfoWindow:

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

Create an InfoWindow and display it on the MapView:

1
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

1
public 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:

Create a View object that will be used to display the info window.
Call the addInfoWindow() method of the MapView object, passing in the View object and the location of the info window.
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.
2
View 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.
5
InfoWindow infoWindow = navigationView.addInfoWindow(infoWindowView, new LatLng(17.49361551715865, 78.39382912963629), 0, 0);
6

7
// Set a click listener for the info window.
8
infoWindow.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.