• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

custom InfoWindow

This example shows how to Add a Marker with a Custom Info Window

  • Add a Custom view Marker with CustomMarkerOptions

  • Custom the info widow of the marker using mMap.setInfoWindowAdapter

Custom InfoWindow

For all code examples, refer to Android Maps SDK Code Examples

activity_animate_markers.xml view source

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=".MainActivity">
8
9 <ai.nextbillion.maps.core.MapView
10 android:id="@+id/map_view"
11 android:layout_width="match_parent"
12 android:layout_height="match_parent"
13 app:nbmap_uiAttribution="false"
14 app:nbmap_cameraTargetLat="53.550813508267716"
15 app:nbmap_cameraTargetLng="9.992248999933745"
16 app:nbmap_cameraZoom="15" />
17
18 <ImageView

CustomInfoWindowActivity view source

1package ai.nextbillion;
2
3import android.graphics.Bitmap;
4import android.graphics.Color;
5import android.os.Bundle;
6import android.os.Parcel;
7import android.os.Parcelable;
8import android.view.LayoutInflater;
9import android.view.View;
10import android.widget.ImageView;
11import android.widget.TextView;
12
13import ai.nextbillion.maps.annotations.BaseMarkerOptions;
14import ai.nextbillion.maps.annotations.Icon;
15import ai.nextbillion.maps.annotations.IconFactory;
16import ai.nextbillion.maps.annotations.Marker;
17import ai.nextbillion.maps.core.MapView;
18import ai.nextbillion.maps.core.NextbillionMap;

The given code is an Android activity that demonstrates how to initialize a MapView and add a marker with a custom info window.

Initializing the MapView:

  • The MapView is instantiated and initialized in the onCreate() method using findViewById().

  • The map is asynchronously loaded using getMapAsync() and the initialization of the map is done in the callback.

Adding a Marker with a Custom Info Window:

  • The addMarker method is responsible for adding a marker to the map.

  • First, a custom icon for the marker is generated using the generateTextIcon method.

  • Then, an instance of the Icon is created from the generated bitmap icon.

  • Finally, the mMap object (NextbillionMap) adds a marker with the custom icon and specified position.

Customizing the Info Window:

  • The customiseInfoWindow method is used to customize the info window appearance.

  • It sets an info window adapter for the map using mMap.setInfoWindowAdapter.

  • In the adapter's getInfoWindow method, a custom info window view is inflated and returned if the marker is an instance of CustomMarker.

  • Otherwise, a default text view with the marker's title is returned.

The code also includes various lifecycle methods (onStart, onResume, onPause, onStop, onSaveInstanceState, onDestroy, onLowMemory) that should be implemented when using the MapView to properly manage its lifecycle and handle configuration changes.

The code includes additional classes (CustomMarker, CustomMarkerOptions) for creating custom markers with custom properties, such as info window color. These classes extend the base marker classes provided by the Nextbillion Maps SDK.

Have Questions ?