Maui Map custom popup on click

Question

Is there a way to customise the popup displayed when clicking on a Pin in MAUI? I'm trying to drop a series of Pins and when the user interacts with them, I want a popup / overlay to be displayed near the pin. A bit like whats it doing now, but with far richer content

Model:

public partial class MapViewModel : ObservableObject
{
[ObservableProperty]
[NotifyPropertyChangedFor(nameof(IsNotBusy))]
bool isBusy;

public bool IsNotBusy => !isBusy;

[ObservableProperty]
public List<Pin> pins;

public MapViewModel()
{
    pins = new List<Pin>()
    {
        new Pin{ Label="A", Address = "123 John Street", Location = new Location{ Latitude = 51, Longitude = 0.1}},
        new Pin{ Label="B", Address = "124 John Street", Location = new Location{ Latitude = 51.1, Longitude = 0.1}},
        new Pin{ Label="C", Address = "125 John Street", Location = new Location{ Latitude = 51.2, Longitude = 0.1}},
        new Pin{ Label="D", Address = "126 John Street", Location = new Location{ Latitude = 51.3, Longitude = 0.1}},
        new Pin{ Label="E", Address = "127 John Street", Location = new Location{ Latitude = 51.4, Longitude = 0.1}},
        new Pin{ Label="F", Address = "128 John Street", Location = new Location{ Latitude = 51.5, Longitude = 0.1}},
        new Pin{ Label="G", Address = "129 John Street", Location = new Location{ Latitude = 51.5, Longitude = 0.1}},
    };
}

[RelayCommand]
Task OnDoStuff()
{
    return Shell.Current.GoToAsync("//map");
}

Map.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
             xmlns:viewmodels="clr-namespace:MauiNativeMap.ViewModels"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MauiNativeMap.Pages.Map"
             Title="Map">
    <maps:Map MapType="Street" x:Name="MyMap" ItemsSource="{ Binding pins}">
    
    </maps:Map>
</ContentPage>

Code behind:

public partial class Map : ContentPage
{
    MapViewModel vm => BindingContext as MapViewModel;


    public Map(MapViewModel vm)
    {

        InitializeComponent();
        BindingContext = vm = new MapViewModel();
       
        vm.Pins.ForEach(p =>
        {
            MyMap.Pins.Add(p);
            p.MarkerClicked += async (s, args) =>
            {
                //I want to show custom content here?
                //await DisplayAlert("You clicked the pin", $"Pin was {p.Label}", "Cool");
            };
        });
    }

    protected override async void OnAppearing()
    {
        base.OnAppearing();

        await Permissions.RequestAsync<Permissions.LocationWhenInUse>();

        // Initialise the vm here - pull data from places etc
        MyMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Location { Latitude = 51, Longitude = 0.2 }, Distance.FromMiles(20)));
    }

I want to show custom content, maybe an image? When a user clicks on a pin on the map

Answer 1

DisplayAlert is a simple pop up which is used to display a prompt. To show rich content, you could try using CommunityToolkit Popup or designing your own custom control.

You may also want to use Maui handler to customize your map pins for each platform. Also here is the article which you may refer to Customize map pins in .NET MAUI and its sample code for Android or iOS. That may help you show an image when clicking on a map pin.

Hope it helps!