Binding Location to .net MAUI MAP

Question

I want to show A map,

Coordinates is getting on page load.

Map code:

<maps:Map x:Name="map" WidthRequest="296" HeightRequest="192" Margin="0,24,0,0" 
              MapType="Street" IsZoomEnabled="False" IsScrollEnabled="False"
              ItemsSource="{Binding SelectedBikeSensorData}">
        <maps:Map.ItemTemplate>
            <DataTemplate>
                <maps:Pin Label="Fiets Locatie"
                          Address="{Binding SelectedBikeSensorData.LatestAdress}"
                          Type="Place"
                          Location="{Binding SelectedBikeSensorData.Locatie}"/>
            </DataTemplate>
        </maps:Map.ItemTemplate>
    </maps:Map>

MVVM Commando

    [RelayCommand]
    async void GetBikeInformation()
    {
        var data = await _userService.GetBikeLocationAsync(SelectedFiets);
        if (data != null)
        {
            SelectedBikeSensorData = new MapData
            {
                TrackerId = data.serial,
                Locatie = new Location(data.lastLat, data.lastLng),
                Lat = data.lastLat,
                Long = data.lastLng,
                LatestAdress = data.lastAddress
            };
        }

SelectedBikeSensorData is a type MapData:

 public class MapData
{
    public string TrackerId { get; set; }
    public double Lat { get; set; }
    public double Long { get; set; }
    public Location Locatie { get; set; }
    public string LatestAdress { get; set; }
}

MAPVIEW ANDROID: https://ibb.co/R2Jjx5S

Someone that maybe knows what the problem?

Thanks In Advance!

UPDATE:

New XAML Code:

<maps:Map x:Name="map" WidthRequest="296" HeightRequest="192" Margin="0,24,0,0" 
              MapType="Hybrid" IsZoomEnabled="True" IsScrollEnabled="True"
              ItemsSource="{Binding Positions}">
        <maps:Map.ItemTemplate>
            <DataTemplate>
                <maps:Pin Label="Fiets Locatie"
                      Address="{Binding LatestAdress}"
                      Type="Place"
                      Location="{Binding Locatie}"/>
            </DataTemplate>
        </maps:Map.ItemTemplate>

MVVM Commando:

[RelayCommand]
    async void GetBikeInformation()
    {
        var data = await _userService.GetBikeLocationAsync(SelectedFiets);
        if (data != null)
        {
            _positions = new ObservableCollection<MapData>();
            _positions.Add(new MapData
            {
                Long = data.lastLng,
                Lat = data.lastLat,
                LatestAdress = data.lastAddress,
                Locatie = new Location(data.lastLat,data.lastLng),
                TrackerId = data.serial,
            });

            SelectedBikeSensorData = new MapData
            {
                LatestAdress = data.lastAddress
            };

            
        }
    }

Add this to my viewmodel:

ObservableCollection<MapData> _positions;

public IEnumerable<MapData> Positions => _positions;

In mine viewmodel constructor I added this line of code:

_positions = new ObservableCollection<MapData>();

Binding the viewmodel to my view:

 public BikeInformationPage(BikeDetailsViewModel bikeDetailsViewModel)
{
    InitializeComponent();
    this.BindingContext = bikeDetailsViewModel;

}

Data in Positions:

Data in Positions => Location:

Answer 1

Found the problem:

I created this in my ViewModel:

ObservableCollection<MapData> _positions;

public IEnumerable<MapData> Positions => _positions;

I did this on the answer of @Jessie Zhang -MSFT

Because I use the community toolkit.MVVM package I din't get the positions in my view.

To test this I created a Collection view to the test this:

<CollectionView Margin="0,16,0,0"
        ItemsSource="{Binding Positions}"
        SelectionMode="None">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="model:MapData">
                <VerticalStackLayout WidthRequest="296" BackgroundColor="White" HeightRequest="250" Margin="0,12,0,12" HorizontalOptions="Center" >
                    <Frame>
                        <VerticalStackLayout>
                            <Label Text="{Binding LatestAdress}"/>
                            <Label Text="{Binding Lat}"/>
                            <Label Text="{Binding Long}"/>
                            <Label Text="{Binding Locatie}"/>
                        </VerticalStackLayout>
                    </Frame>
                </VerticalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

In my viewmodel I deleted:

ObservableCollection<MapData> _positions;

public IEnumerable<MapData> Positions => _positions;

I add then:

[ObservableProperty]
ObservableCollection<MapData> positions;

Now I am getting data in my view:

Answer 2

Just as Jason said, the ItemsSource should be an IEnumerable<T> which specifies the collection of IEnumerable pin items to be displayed. But in your code, you bound a single MapData object to it.

For this, you can refer to the official document Display a pin collection.

You can refer to the following code:

<ContentPage ...
             xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps">    
    <Grid>
        ...
        <maps:Map x:Name="map"
                  ItemsSource="{Binding Positions}">
            <maps:Map.ItemTemplate>
                <DataTemplate>
                    <maps:Pin Location="{Binding Location}"
                              Address="{Binding Address}"
                              Label="{Binding Description}" />
                </DataTemplate>    
            </maps:Map.ItemTemplate>
        </maps:Map>
        ...
    </Grid>
</ContentPage>

And there is an official sample about this, you can check it .NET MAUI - Map.

Please pay attention to PinItemsSourcePage.xaml.cs, PinItemsSourcePage.xaml and PinItemsSourcePageViewModel.cs.