pin info on map

Question

So, I have my app working with maps for Android and Widows

As you can see on windows a can always see the info of my pin, label and address

On Android is different

I can see my pin, and when I click, I can enable the pin info window

I made this work with mvvm, so I had to make my custom pin

    public class CustomPin : Pin {

        public static readonly BindableProperty MarkerClickedCommandProperty =
            BindableProperty.Create(
                nameof(MarkerClickedCommand),
                typeof(ICommand),
                typeof(CustomPin),
                null);

        public ICommand? MarkerClickedCommand {
            get => (ICommand)GetValue(MarkerClickedCommandProperty);
            set => SetValue(MarkerClickedCommandProperty, value);
        }

        public CustomPin() {

            MarkerClicked += CoutomPin_MarkerClicked;
        }

        private void CoutomPin_MarkerClicked(object? sender, PinClickedEventArgs e) {

            if (MarkerClickedCommand?.CanExecute(this) == true) {
                MarkerClickedCommand?.Execute(this);
            }

            e.HideInfoWindow = true;
        }
    }
}

Create a class with a Command

  public class PinModel {

      public string? Label { get; set; }

      public string? Address { get; set; }

      public Location? Location { get; set; }

      public ICommand? MarkerClickedCommand { get; set; }

  }

A service to pass a command

public class TurbinesService {

    public static ObservableCollection<PinModel> GetPins(ICommand pinSelectedComman) {
        return
        [
            new PinModel{
            Label = "Charge station",
            Address = "Av. de las Américas, Guayaquil 090513, Ecuador",
            Location = new Location(-2.151993, -79.886109),
            MarkerClickedCommand = pinSelectedComman
            }
        ];
    }
}

and the view Model to handle everything

        public ObservableCollection<PinModel>? Pins { get; set; }

        public ICommand? OnPinMarkerClickedCommand { get; }

        public MainPageViewModel() {

            OnPinMarkerClickedCommand = new Command<Pin>(OnPinMarkerClicked);

            Pins = TurbinesService.GetPins(OnPinMarkerClickedCommand);
        }

        [RelayCommand]
        private void MapLoaded(Microsoft.Maui.Controls.Maps.Map map) {



        }

        void OnPinMarkerClicked(Pin pin) {
            if (pin != null) {
                // Handle the pin click event
                Shell.Current.GoToAsync($"{nameof(TurbineDetailPage)}", new Dictionary<string, object> {
                    { "SelectedPin", pin }
                });
            };
        }
    }
}

Note, I created a MapLoaded command, to try and show the info Window

XAML

    <!--<ContentPage.Behaviors>
        <mct:EventToCommandBehavior Command="{Binding DisappearingCommand}"
                                    EventName="Disappearing" />
    </ContentPage.Behaviors>-->

    <maps:Map ItemsSource="{Binding Pins}" x:Name="TirbinesMap">
        <maps:Map.Behaviors>
            <mct:EventToCommandBehavior EventName="Loaded"
                                        Command="{Binding MapLoadedCommand}" 
                                        CommandParameter="{x:Reference TirbinesMap}" />
        </maps:Map.Behaviors>
        <maps:Map.ItemTemplate>
            <DataTemplate x:DataType="model:PinModel">
                <conntrols:CustomPin
                    Address="{Binding Address}"
                    Label="{Binding Label}"
                    Location="{Binding Location}"
                    MarkerClickedCommand="{Binding MarkerClickedCommand}" />
            </DataTemplate>
        </maps:Map.ItemTemplate>
    </maps:Map>


</ContentPage>

I am using

Windows 11

Visuaal Studio 2022

Net 8

Android, Windows

Answer 1

Hello,

want the InfoWindow to appear at all times,

You can call the CoutomPin_MarkerClicked method directly in CustomPin's constructor, then set the e.HideInfoWindow = false; the InfoWindow will appear. However, you can make only one infowindow of pin appear. This is google map's limitation.

Only one info window is displayed at a time.

 public CustomPin() {

            MarkerClicked += CoutomPin_MarkerClicked;
            CoutomPin_MarkerClicked(null, new PinClickedEventArgs());
        }

void CoutomPin_MarkerClicked(object? sender, PinClickedEventArgs e)
{
    e.HideInfoWindow = false;
}

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.