Setting Up Pushpins on Windows Phone 8 Bing Maps (XAML C#)

Question

I'm trying to do a simple example application to build upon later for Windows Phone 8. I want to create a Bing map on my MainPage.xaml, centered at point (37.227700, -80422037), and have pushpins already populated on the map (not ones that the user adds, just markers for specific locations that I prepopulate based on some dynamic data which I have hardcoded for the moment). When I run my code, it goes to the page and loads the map up, but no pins are shown. Furthermore, the map is not zoomed in at all despite the fact that I set the ZoomLevel property in the xaml. I'm new to this coding paradigm so there must be something I'm missing. Here is what I have in the xaml and c# files:

MainPage.xaml.cs (only the constructor is shown, but I have no other methods for simplicity) (you can see commented out sections where I've tried multiple approaches, none of which have worked)

public MainPage()
    {
        InitializeComponent();
        Map myMap = new Map();
        MapLayer layer0 = new MapLayer();

        Pushpin pushpin0 = new Pushpin();
        //Pushpin pushpin0 = (Pushpin)this.FindName("pushpin0");
        //Pushpin pushpin0 = MapExtensions.GetChildren(myMap).OfType<Pushpin>().First(p => p.Name == "pushpin0");
        //if (pushpin0 == null) { pushpin0 = new Pushpin(); }
        pushpin0.GeoCoordinate = new GeoCoordinate(37.228510, -80.422860);
        MapOverlay overlay0 = new MapOverlay();
        overlay0.Content = pushpin0;
        overlay0.GeoCoordinate = new GeoCoordinate(37.228510, -80.422860);
        layer0.Add(overlay0);

        Pushpin pushpin1 = new Pushpin();
        pushpin1.GeoCoordinate = new GeoCoordinate(37.226399, -80.425271);
        MapOverlay overlay1 = new MapOverlay();
        overlay1.Content = pushpin1;
        layer0.Add(overlay1); 
        Pushpin pushpin2 = new Pushpin();
        pushpin2.GeoCoordinate = new GeoCoordinate(37.228900, -80.427450);
        MapOverlay overlay2 = new MapOverlay();
        overlay2.Content = pushpin2;
        layer0.Add(overlay2);

        ContentPanel.Children.Add(myMap);
    }

MainPage.xaml

<phone:PhoneApplicationPage
x:Class="SimpleApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True"
xmlns:Controls="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Maps.Toolkit;assembly=Microsoft.Phone.Controls.Toolkit">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="Simple Map Application with Pushpins" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
        <TextBlock Text="Pushpins" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Controls:Map x:Name="myMap" ZoomLevel="17" Center="37.227700, -80.422037" CartographicMode="Road">
            <toolkit:MapExtensions.Children>
                <toolkit:Pushpin x:Name="pushpin0" Content="My Position"/>
                <toolkit:Pushpin x:Name="pushpin1" Content="My Position"/>
                <toolkit:Pushpin x:Name="pushpin2" Content="My Position"/>
            </toolkit:MapExtensions.Children>
        </Controls:Map>
    </Grid>  

</Grid>

</phone:PhoneApplicationPage>

There are actually more pins to be added, but I'm assuming if I get just a few to work, adding more similarly will be trivial.

Answer 1

The biggest issue you have is that you've created a second Map control and displayed that over the first.

The one you've created doesn't have a ZoomLevel and Center set.

You've also not added the layer with the pins in to the map.

The quickest way for you to see what's going on will be to change your constructor to the following:

public MainPage()
{
    InitializeComponent();
    //Map myMap = new Map(); // You shouldn't do this as you already have a map on the page
    MapLayer layer0 = new MapLayer();

    Pushpin pushpin0 = new Pushpin();
    //Pushpin pushpin0 = (Pushpin)this.FindName("pushpin0");
    //Pushpin pushpin0 = MapExtensions.GetChildren(myMap).OfType<Pushpin>().First(p => p.Name == "pushpin0");
    //if (pushpin0 == null) { pushpin0 = new Pushpin(); }
    pushpin0.GeoCoordinate = new GeoCoordinate(37.228510, -80.422860);
    MapOverlay overlay0 = new MapOverlay();
    overlay0.Content = pushpin0;
    overlay0.GeoCoordinate = new GeoCoordinate(37.228510, -80.422860);
    layer0.Add(overlay0);

    Pushpin pushpin1 = new Pushpin();
    pushpin1.GeoCoordinate = new GeoCoordinate(37.226399, -80.425271);
    MapOverlay overlay1 = new MapOverlay();
    overlay1.Content = pushpin1;
    layer0.Add(overlay1);
    Pushpin pushpin2 = new Pushpin();
    pushpin2.GeoCoordinate = new GeoCoordinate(37.228900, -80.427450);
    MapOverlay overlay2 = new MapOverlay();
    overlay2.Content = pushpin2;
    layer0.Add(overlay2);

    // Add the layer with the pins in to the map
    myMap.Layers.Add(layer0);
    //ContentPanel.Children.Add(myMap);
}

You can then remove the pins you've defined in XAML.