Xamarin.Forms. How to add views on top of map, but right on the defined lat/lng position? - xamarin.forms

Question

Currently i am developing a taxi app. But got to the point where i need to put some views on top of the map that will move when i move me map. I am wondering how it is possible to do it using Xamarin.Forms.GoogleMaps package. The inbuilt "Icon = BitmapDescriptorFactory.FromView()" won't work for me because i need a view that consists of two or more clickable parts + i don't want the views to overlap. Adding a picture of what i need to achieve. Any help would be appreciated
Here is the pic

Answer 1

Are you using Xamarin.Forms.Maps? https://www.nuget.org/packages/Xamarin.Forms.Maps/
This component makes it easier to work as you need.
In xaml file you need add this code:
>
<ContentView Content="{Binding Map}"/>
And in your viewModel add this code:
>
Map = new Map(MapSpan.FromCenterAndRadius(new Position(location.Latitude, location.Longitude), Distance.FromKilometers(1)));
To add pins, add this:
>
var pin = new Pin
{
Type = PinType.Place,
Address = String.Empty,
Label = item.Name,
Position = new Position(item.Geometry.Location.Lat, item.Geometry.Location.Lng),
};
pin.InfoWindowClicked += async (s, args) => { await PinClicked((Pin)s); };
Map.Pins.Add(pin);

Answer 2

Welcome to SO !
You can create a custom renderer for the Map control, which displays a native map with a customized pin and a customized view of the pin data on each platform.
Refer to this document :https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/map-pin#creating-the-custom-map
Android :
Custom the MapPlusInfo.xml in android native can achieve that:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_vertical"
android:background="#android:color/white"
android:layout_marginRight="20dp">
<TextView
android:id="#+id/InfoWindowTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="InfoWindowTitle"
android:textColor="#android:color/black"
android:textStyle="bold" />
<TextView
android:id="#+id/InfoWindowSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="InfoWindowSubtitle"
android:textColor="#android:color/black" />
</LinearLayout>
<ImageButton
android:id="#+id/InfoWindowButton"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/plus" />
</LinearLayout>
The renderer code in Android :
public class CustomMapRenderer : MapRenderer, GoogleMap.IInfoWindowAdapter
{
List<CustomPin> customPins;
public CustomMapRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Map> e)
{
base.OnElementChanged(e);
if (e.OldElement != null)
{
NativeMap.InfoWindowClick -= OnInfoWindowClick;
}
if (e.NewElement != null)
{
var formsMap = (CustomMap)e.NewElement;
customPins = formsMap.CustomPins;
}
}
protected override void OnMapReady(GoogleMap map)
{
base.OnMapReady(map);
NativeMap.InfoWindowClick += OnInfoWindowClick;
NativeMap.SetInfoWindowAdapter(this);
}
protected override MarkerOptions CreateMarker(Pin pin)
{
var marker = new MarkerOptions();
marker.SetPosition(new LatLng(pin.Position.Latitude, pin.Position.Longitude));
marker.SetTitle(pin.Label);
marker.SetSnippet(pin.Address);
marker.SetIcon(BitmapDescriptorFactory.FromResource(Resource.Drawable.pin));
return marker;
}
void OnInfoWindowClick(object sender, GoogleMap.InfoWindowClickEventArgs e)
{
var customPin = GetCustomPin(e.Marker);
if (customPin == null)
{
throw new Exception("Custom pin not found");
}
if (!string.IsNullOrWhiteSpace(customPin.Url))
{
var url = Android.Net.Uri.Parse(customPin.Url);
var intent = new Intent(Intent.ActionView, url);
intent.AddFlags(ActivityFlags.NewTask);
Android.App.Application.Context.StartActivity(intent);
}
}
public Android.Views.View GetInfoContents(Marker marker)
{
return null;
}
public Android.Views.View GetInfoWindow(Marker marker)
{
var inflater = Android.App.Application.Context.GetSystemService(Context.LayoutInflaterService) as Android.Views.LayoutInflater;
if (inflater != null)
{
Android.Views.View view;
var customPin = GetCustomPin(marker);
if (customPin == null)
{
throw new Exception("Custom pin not found");
}
if (customPin.Name.Equals("Xamarin"))
{
view = inflater.Inflate(Resource.Layout.MapPlusInfo, null);
var infoSubtitle = view.FindViewById<TextView>(Resource.Id.InfoWindowSubtitle);
if (infoSubtitle != null)
{
infoSubtitle.Text = marker.Snippet;
}
return view;
}
else
{
//view = inflater.Inflate(Resource.Layout.XamarinMapInfoWindow, null);
}
}
return null;
}
CustomPin GetCustomPin(Marker annotation)
{
var position = new Position(annotation.Position.Latitude, annotation.Position.Longitude);
foreach (var pin in customPins)
{
if (pin.Position == position)
{
return pin;
}
}
return null;
}
}
The effect :