Xamarin.Forms.Maps how to have a label next to / above pin just like Google Maps?

Question

I wanted to know if there was a way to show a label above or next to a pin in Xamarin.Forms.Maps when you zoom in and the place's name shows next to the pin like this:

Google Maps

iOS

Thank you so much !

Answer 1

We can do this with custom renderer on each platform.

Here is an example for iOS solution,just add a subview and adjust its position in GetViewForAnnotation method .

[assembly:ExportRenderer(typeof(CustomMap),typeof(CustomMapRenderer))]
namespace My_Forms_Test3.iOS
{
    public class CustomMapRenderer:MapRenderer
    {
        UIView customPinView;
        List<CustomPin> customPins;
        protected override void OnElementChanged(ElementChangedEventArgs<View> e)
        {
            base.OnElementChanged(e);
            if (e.OldElement != null)
            {
                var nativeMap = Control as MKMapView;
                nativeMap.GetViewForAnnotation = null;
                nativeMap.CalloutAccessoryControlTapped -= OnCallourAccessoryControlTapped;
                nativeMap.DidSelectAnnotationView -= OnDidSelect;
                nativeMap.DidDeselectAnnotationView -= OnDidDeSelect;
            }
            if (e.NewElement != null)
            {
                var formsMap = (CustomMap)e.NewElement;
                var nativeMap = Control as MKMapView;
                customPins = formsMap.CustomPins;
                nativeMap.GetViewForAnnotation = GetViewForAnnotation;
                nativeMap.CalloutAccessoryControlTapped += OnCallourAccessoryControlTapped;
                nativeMap.DidSelectAnnotationView += OnDidSelect;
                nativeMap.DidDeselectAnnotationView += OnDidDeSelect;

            }

        }

        private void OnDidDeSelect(object sender, MKAnnotationViewEventArgs e)
        {
            if (!e.View.Selected)
            {
                customPinView.RemoveFromSuperview();
                customPinView.Dispose();
                customPinView = null;

            }
           

        }

        private void OnDidSelect(object sender, MKAnnotationViewEventArgs e)
        {

            throw new NotImplementedException();
        }

        private void OnCallourAccessoryControlTapped(object sender, MKMapViewAccessoryTappedEventArgs e)
        {
            throw new NotImplementedException();
        }

        protected override MKAnnotationView GetViewForAnnotation(MKMapView mapView, IMKAnnotation annotation)
        {
         
            MKAnnotationView annotationView = null;
        
            if (annotation is MKUserLocation)
                return null;
            var customPin = GetCustomPin(annotation as MKPointAnnotation);
            if (customPin == null)
            {
                throw new Exception("not found");
            }
            annotationView = mapView.DequeueReusableAnnotation(customPin.Name);
            if (annotationView == null)
            {
                annotationView = new CustomMKAnnotationView(annotation, customPin.Name);
                annotationView.Image = UIImage.FromFile("pin.png");
       
                annotationView.CalloutOffset = new CGPoint(0, 0);
                annotationView.LeftCalloutAccessoryView = new UIImageView(UIImage.FromFile("monkey.png"));
                annotationView.RightCalloutAccessoryView = UIButton.FromType(UIButtonType.DetailDisclosure);
              
                ((CustomMKAnnotationView)annotationView).Name = customPin.Name;
                customPinView = new UIView();
                var Label = new UILabel();
                Label.Text = "Samsung";
                Label.Frame=new CGRect(annotationView.GetFrame().X+35,annotationView.GetFrame().Y,100,50);
                var Label2 = new UILabel();
                Label2.Text = "20:20";
                Label2.Frame = new CGRect(annotationView.GetFrame().X + 35, annotationView.GetFrame().Y+20, 100, 50);
                customPinView.Frame= new CGRect(annotationView.GetFrame().X+40, annotationView.GetFrame().Y-20, 100, 50);
                customPinView.AddSubview(Label);
                customPinView.AddSubview(Label2);
                Label.BaselineAdjustment = UIBaselineAdjustment.AlignBaselines;
                customPinView.BackgroundColor = UIColor.White;
                customPinView.Layer.CornerRadius = 5;
                customPinView.Alpha = (nfloat)0.8;
                customPinView.Layer.MasksToBounds = true;
                annotationView.AddSubview(customPinView);
            }
            annotationView.CanShowCallout = true;
         
            return annotationView;

        }

        CustomPin GetCustomPin(MKPointAnnotation annotation)
        {
            var position = new Position(annotation.Coordinate.Latitude, annotation.Coordinate.Longitude);
            foreach (var pin in customPins)
            {
                if (pin.Position == position)
                { return pin; }
            }
            return null;

        }}

Refer to https://stackoverflow.com/a/69265658/8187800 .