[Huawei Developers] Sherlock F:
More information like this, you can visit HUAWEI Developer Forum​

Original link: https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201345264040690134&fid=0101187876626530001

Overview

This article covers how to add custom marker, custom information window and custom layout as Marker to Maps.

1. How to add Custom Marker to Maps.

2. How to add Custom Info Window to Marker.

3. How to add Custom Layout as A Marker.

1. How to add Custom Marker to Maps.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/250/698/2640091000002250698.20200903133706.49442980096120756024000728445806:50510922064351:2800:471811F07B9AD23CF313E753709B1B2DA0E3262B7CA227FF3B01DF6975DFEDE2.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/250/698/2640091000002250698.20200903133706.49442980096120756024000728445806:50510922064351:2800:471811F07B9AD23CF313E753709B1B2DA0E3262B7CA227FF3B01DF6975DFEDE2.png[/IMG]

Use below method to add Custom Marker.

private void addCustomMarker(LatLng latLng) {
if (customMarker != null) {
customMarker .remove();
}

customMarker = huaweiMap.addMarker(new MarkerOptions()
.position(latLng)
.icon(BitmapDescriptorFactory.fromBitmap(getCustomBitmap(R.drawable.custom_marker_image)))
.title("CUSTOM_MARKER"));
}

BitmapDescriptorFactory.fromBitmap(getCustomBitmap(R.drawable.custom_marker_image))

In the above we are giving bitmap object to the BitmapDescriptorFactory.fromBitmap() method.

Use below method to convert drawable image resource to Bitmap Image.

private Bitmap getCustomBitmap(int imageResource) {
int height = (int) getResources().getDimension(R.dimen.dimen_40);
int width = (int) getResources().getDimension(R.dimen.dimen_40);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), imageResource);
return Bitmap.createScaledBitmap(bitmap, width, height, false);
}

Find the output in below image.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/250/698/2640091000002250698.20200903133824.68513187482011069171195603160850:50510922064351:2800:69824A1C8AD0434ECF09FEE2F56852278716060B748D25BDE8F326A63AF97220.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/250/698/2640091000002250698.20200903133824.68513187482011069171195603160850:50510922064351:2800:69824A1C8AD0434ECF09FEE2F56852278716060B748D25BDE8F326A63AF97220.png[/IMG]

2. How to add Custom Info Window to Marker.

To add custom info window, first we need to create required design in xml based on our requirements below is the xml code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:orientation="vertical">

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000"
android:padding="5dp">

<ImageView
android:id="@+id/img_place"
android:layout_width="@dimen/dimen_50"
android:visibility="gone"
android:layout_height="@dimen/dimen_50"
android:src="@drawable/cinema_holder" />

<TextView
android:id="@+id/txt_place_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="@id/img_place"
android:text="Hotel Charminar"
android:textColor="#fff"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>

<View
android:layout_width="2dp"
android:layout_height="@dimen/dimen_30"
android:layout_gravity="center"
android:background="#000" />
</LinearLayout>

After that create Java class and implement HuaweiMap.InfoWindowAdapter, it will override getInfoContents and getInfoWindow methods.

In getInfoContents method we will get Marker object based on marker title we can inflate different layouts for Info window. See the below code

public class CustomInfoAdapter implements HuaweiMap.InfoWindowAdapter {
Context context;

public CustomInfoAdapter(Context context) {
this.context = context;
}

@Override
public View getInfoContents(Marker marker) {
View view = null;
if (marker.getTitle().equals("PLACES_MARKER")) {
view = LayoutInflater.from(context).inflate(R.layout.inflate_custom_places, null);
TextView txtPlaceName = view.findViewById(R.id.txt_place_name);
String placeName = (String) marker.getTag();
txtPlaceName.setText(placeName);
return view;
} else if (marker.getTitle().equals("MY_MARKER")) {
view = LayoutInflater.from(context).inflate(R.layout.layout_custom_window, null);
TextView txtName = view.findViewById(R.id.txt_name);
txtName.setText("You are here");
return view;
} else if (marker.getTitle().equals("CUSTOM_MARKER")) {
view = LayoutInflater.from(context).inflate(R.layout.custom_info_window_selected, null);
TextView txtPlaceName = view.findViewById(R.id.txt_place_name);
String placeName = (String) marker.getTag();
txtPlaceName.setText(placeName);
return view;
}
return null;
}

@Override
public View getInfoWindow(Marker marker) {
return null;
}
}

That's it everything done now just set CustomInfoAdapter class object to huaweiMap.setInfoWindowAdapter() method onMapReady callback. See the below code

@Override
public void onMapReady(HuaweiMap map) {
huaweiMap = map;
huaweiMap.setInfoWindowAdapter(new CustomInfoAdapter(this));
huaweiMap.setOnMarkerClickListener(new HuaweiMap.OnMarkerClickListener() {
@Override
public boolean onMarkerClick(Marker marker) {
marker.showInfoWindow();
return true;
}
});
}

Find the output in below image.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/250/698/2640091000002250698.20200903133910.36011770109136051926307930681072:50510922064351:2800:E0A4316D3E1AC6D5511C3B3993942178A60D11F588B244ECC03405ABC62C866F.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/250/698/2640091000002250698.20200903133910.36011770109136051926307930681072:50510922064351:2800:E0A4316D3E1AC6D5511C3B3993942178A60D11F588B244ECC03405ABC62C866F.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/250/698/2640091000002250698.20200903133929.19913604976492419048098239997667:50510922064351:2800:09A74BCFB89EB0FA763D7BC7A386308F67CC167A1F472B725A7D99B34FA344AF.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/250/698/2640091000002250698.20200903133929.19913604976492419048098239997667:50510922064351:2800:09A74BCFB89EB0FA763D7BC7A386308F67CC167A1F472B725A7D99B34FA344AF.png[/IMG]

3. How to add Custom Layout as A Marker.

To add custom layout as Marker, create required design in xml based on our requirements below is the xml code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
android:id="@+id/img_marker"
android:layout_width="@dimen/dimen_40"
android:layout_height="@dimen/dimen_40"
android:scaleType="fitXY"
android:src="@drawable/custom_marker" />

<TextView
android:id="@+id/txt_place_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/img_marker"
android:layout_marginStart="@dimen/dimen_50"
android:layout_marginTop="-10dp"
android:text="Renigunta Railway Station"
android:textColor="@color/red"
android:textSize="14sp"
android:textStyle="bold" />
</RelativeLayout>

After creating xml inflate layout and set required data as below.

private void addLayoutAsMarker(Coordinate location,String placeName) {
if (location == null) {
return;
}
if (selectedMarker != null)
selectedMarker.remove();
View view = LayoutInflater.from(this).inflate(R.layout.inflate_content_marker, null, false);
TextView txtPlaceName = view.findViewById(R.id.txt_place_name);
txtPlaceName.setText(placeName);
LatLng latLng = new LatLng(location.getLat(), location.getLng());
selectedMarker = huaweiMap.addMarker(new MarkerOptions().position(latLng).icon(BitmapDescriptorFactory.fromBitmap(loadBitmapFromView(view))));
huaweiMap.setInfoWindowAdapter(new CustomInfoAdapter(this));
selectedMarker.setTitle("CUSTOM_MARKER");
selectedMarker.setTag(placeName);
}

Here before setting bitmap to BitmapDescriptorFactory.fromBitmap() method. We need to convert inflated view as Bitmap, see the below code

public Bitmap loadBitmapFromView(View view) {
if (view.getMeasuredHeight() <= 0) {
view.measure(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
Bitmap bitmap = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
view.draw(canvas);
return bitmap;
}
return null;
}

Setting Custom Marker: Convert drawable to Bitmap

Setting Custom Layout as Marker: Convert view to Bitmap

Find the output in below image.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/250/698/2640091000002250698.20200903141124.01479578967919287393078420040715:50510922064351:2800:BE23ABD52A977AC8A01753351B7A8628BC0F5DE1E8BD53CC27843B6390AC41BE.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/250/698/2640091000002250698.20200903141124.01479578967919287393078420040715:50510922064351:2800:BE23ABD52A977AC8A01753351B7A8628BC0F5DE1E8BD53CC27843B6390AC41BE.png[/IMG]

In the above xml layout added one ImageView and TextView as example, so we can add more based on your requirements.

Conclusion:

In this article added custom markers and custom info windows, Use this as reference make rich Map user interface

Reference link:

https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/android-sdk-drawing-on-map-0000001050158671