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:
1View infoWindowView = LayoutInflater.from(this).inflate(R.layout.layout_custom_info_window, navigationView, false);
-
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:
-
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.
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.