Add Multiple Pins to Map in MVVM pattern

Hello,

I am having issues trying to understand how to add Pins to a map in MVVM pattern. (I can have multiple maps in the view).

Here's my ViewModel Code.

<flv:FlowListView SeparatorVisibility="Default" HasUnevenRows="True" FlowItemTappedCommand="{Binding ItemTappedCommand}" FlowLastTappedItem="{Binding LastTappedItem}" FlowColumnMinWidth="600" FlowItemsSource="{Binding DashboardWidgets}" >
    <flv:FlowListView.FlowColumnTemplate>
                <StackLayout BackgroundColor="White" Margin="1">
                    <!--Map Widgets -->
                    <StackLayout BackgroundColor="{Binding bgcolor}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" IsVisible="False" >
                        <StackLayout.Triggers>
                            <DataTrigger TargetType="StackLayout" Binding="{Binding resultsettype}" Value="map">
                                <Setter Property="IsVisible" Value="True"/>
                            </DataTrigger>
                        </StackLayout.Triggers>
                        <StackLayout Orientation="Vertical"  Padding="4" HeightRequest="400" WidthRequest="600">
                            <maps:Map x:Name="MyMap" IsShowingUser="true" MapType="Hybrid" />
                        </StackLayout>
                    </StackLayout>
                    <!--Image Widgets -->
                    <StackLayout BackgroundColor="{Binding bgcolor}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" HeightRequest="200" WidthRequest="600" Padding="4" IsVisible="False">
                        <StackLayout.Triggers>
                            <DataTrigger TargetType="StackLayout" Binding="{Binding resultsettype}" Value="image">
                                <Setter Property="IsVisible" Value="True"/>
                            </DataTrigger>
                        </StackLayout.Triggers>
                        <StackLayout Padding="1" HeightRequest="200" WidthRequest="600">
                            <Image Source="{Binding contentvalue, Converter={StaticResource LocalBase64ToImageConverter}}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
                        </StackLayout>
                    </StackLayout>
    </flv:FlowListView.FlowColumnTemplate>

I have an Observable collection of DashboardWidgets which can hold a map, image, integer or a list.
If it's a map, I will get all the pins in VM and somehow bind them to the map. Since I am using mvvm pattern, I shouldnot access the Map in my VM and moreover I have no clue how to do it either.

So I far have tried Extending the Map to make pins bindable but to no success.

    public class ExtendedMap : Map
        {
        public static readonly BindableProperty PinsProperty = BindableProperty.Create(nameof(MultiPins), typeof(IList<Pin>), typeof(ExtendedMap), new List<Pin>());
        public List<Pin> MultiPins
            {
            get {
                                var val = (List<Pin>)GetValue(PinsProperty);
                                return new List<Pin>();
                                }
                        set => SetValue(PinsProperty, value);
                        }                
                    }      

I tried creating a contentview binding it's content to property inside vm but no luck.

XAML:
Tried both. None worked.

<contentview content={binding widgetResult } />
<contentview content={binding mapresult} />

VM:
VM implements IPropertyChanged.

var map = new Map(MapSpan.FromCenterAndRadius(new Position(37, -122), Distance.FromMiles(0.3)))
                {
                IsShowingUser = true,
                HeightRequest = 100,
                WidthRequest = 960,
                VerticalOptions = LayoutOptions.FillAndExpand
                };
        (await GetMapPins(widget.filter)).ForEach(f => map.Pins.Add(f));
        widget.widgetResult = new ContentView
                {
                    Content = map
                 };
        widget.mapresult = map;