title: Image as pushpin on maps - Windows phone 8
body: <p>im trying to add a image to a windows phone 8 map, to serve as a pushpin</p>
  
  <p>i have the following code on my XAML</p>
  
  <pre><code>&lt;phone:PhoneApplicationPage
  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"
  xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
  x:Class="Cartuxa.Contactos"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Portrait" Orientation="Portrait"
  mc:Ignorable="d"
  shell:SystemTray.IsVisible="True"&gt;
  
  &lt;!--LayoutRoot is the root grid where all page content is placed--&gt;
  &lt;Grid x:Name="LayoutRoot"&gt;
      &lt;Grid.Background&gt;
          &lt;ImageBrush ImageSource="/Assets/Images/bkContacts@2x.png"/&gt;
      &lt;/Grid.Background&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="Auto"/&gt;
          &lt;RowDefinition Height="*"/&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;!--TitlePanel contains the name of the application and page title--&gt;
      &lt;StackPanel Grid.Row="0" Margin="12,17,0,28"/&gt;
  
      &lt;Grid x:Name="ContentPanel" Grid.RowSpan="2" Margin="0,-6,0,6"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="127*"/&gt;
              &lt;ColumnDefinition Width="329*"/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Image HorizontalAlignment="Left" Margin="18.75,57.5,0,0" VerticalAlignment="Top" Source="/Assets/Images/logo@2x.png" Stretch="Fill" Grid.ColumnSpan="2" Width="221" Height="72"/&gt;
          &lt;TextBlock HorizontalAlignment="Left" Margin="30,152,0,0" TextWrapping="Wrap" Text="Contactos" VerticalAlignment="Top" Foreground="#FFCD3333" FontFamily="Helvetica" FontSize="36" Grid.ColumnSpan="2" Width="174"/&gt;
          &lt;Button HorizontalAlignment="Right" Margin="0,201,-13,0" VerticalAlignment="Top" Width="255" Background="White" Height="66" BorderThickness="0" Grid.Column="1" BorderBrush="#FFFF0909"&gt;
              &lt;Grid Grid.ColumnSpan="2"&gt;
                  &lt;Image Name="POI_Left" Source="/Assets/Images/POI_Gray@2x.png" RenderTransformOrigin="0.4,0.274" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-180,0,0,0" Stretch="None"/&gt;
  
                  &lt;TextBlock HorizontalAlignment="Left"
                 Margin="13,6,-22,0"
                 TextWrapping="Wrap"
                 Text="Paços dos Condes de Basto"
                 VerticalAlignment="Top"
                 FontFamily="Helvetica"
                 Foreground="Black"
                 FontSize="14" Width="182"/&gt;
              &lt;/Grid&gt;
          &lt;/Button&gt;
          &lt;maps:Map Name="contactosMaps" HorizontalAlignment="Left" Margin="0,271,0,0" VerticalAlignment="Top" RenderTransformOrigin="-1.737,-0.175" Grid.ColumnSpan="2" Height="290" Width="480"/&gt;
          &lt;Button  Name="Contactos_Btn1"
                   Click="Contactos_Btn1_Click"
                   HorizontalAlignment="Right"
                   Margin="-17,201,242,0"
                   VerticalAlignment="Top"
                   Width="255"
                   Background="White"
                   Height="65"
                   BorderThickness="0"
                   Grid.ColumnSpan="2"&gt;
              &lt;Grid Name="pushRed" Grid.ColumnSpan="2"&gt;
                  &lt;Image x:Name="POI_Right" Source="/Assets/Images/POI_Red@2x.png" RenderTransformOrigin="0.4,0.274" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-190,0,0,0" Stretch="None"/&gt;
                  &lt;TextBlock HorizontalAlignment="Left" Margin="14,6,-14,0" TextWrapping="Wrap" Text="Fundação Eugénio De Almeida" VerticalAlignment="Top" FontFamily="Helvetica" Foreground="Black" FontSize="14"/&gt;
              &lt;/Grid&gt;
          &lt;/Button&gt;
          &lt;TextBlock HorizontalAlignment="Left" Margin="26,606,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22"&gt;
              &lt;Run FontFamily="Helvetica" Text="Fundação Eugénio de Almeida"/&gt;
              &lt;LineBreak/&gt;
              &lt;Run/&gt;
          &lt;/TextBlock&gt;
          &lt;TextBlock HorizontalAlignment="Left" Margin="30,655,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="402" Height="85" FontFamily="Helvetica"&gt;
              &lt;Run Text="Páteo de São Miguel "/&gt;
              &lt;LineBreak/&gt;
              &lt;Run Text="Apartado 2001, 7001-901 Évora "/&gt;
              &lt;LineBreak/&gt;
              &lt;Run Text="Portugal"/&gt;
              &lt;LineBreak/&gt;
              &lt;Run/&gt;
          &lt;/TextBlock&gt;
          &lt;TextBlock HorizontalAlignment="Left" Margin="30,745,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22" Text="Tel. (+351) 266 748 300 "/&gt;
          &lt;TextBlock HorizontalAlignment="Left" Margin="30,773,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22"&gt;
              &lt;Run FontFamily="Helvetica" Text="Fax. (+ 351) 266 705 149"/&gt;
              &lt;Run FontFamily="Helvetica"/&gt;
              &lt;Run/&gt;
          &lt;/TextBlock&gt;
  
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>and my .cs code is the following</p>
  
  <pre><code>public partial class Contactos : PhoneApplicationPage
  {
      public Contactos()
      {
          InitializeComponent();
          Loaded +=Contactos_Loaded;
  
      }
  
      private void Contactos_Loaded(object sender, RoutedEventArgs e)
      {
          UpdateMap();
      }
  
      private void UpdateMap()
      {
  
          MapOverlay pin = new MapOverlay();
          pin.Content = pushRed;
          pin.GeoCoordinate = new GeoCoordinate(38.57325D, -7.90546);
          pin.PositionOrigin = new Point(0, 0.5);
  
          MapLayer pinLayer = new MapLayer();
          pinLayer.Add(pin);
          contactosMaps.Layers.Add(pinLayer);
          contactosMaps.SetView(new GeoCoordinate(38.57325D, -7.90546), 14D);
      }
  
      private void Contactos_Btn1_Click(object sender, RoutedEventArgs e)
      {
  
      }
  }
  </code></pre>
  
  <p>when i try to run my project, it loads the map but a few moments later i get this exception</p>
  
  <p>"Additional information: Value does not fall within the expected range."</p>
  
  <p>when i do the "contactosMaps.Layers.Add(pinLayer);"</p>
  
  <p>can't i have that Grid with the image as a pushpin?</p>