In this article we are going to see how to display maps in your Windows Phone application development. With Windows Phone 8 we have a new Maps API to develop map based application and also while using the Location Services. The Windows Phone 8 Maps API is different from the BING Maps API that was available in Windows Phone 7.5 SDK. So starting Windows phone 8 application development for any Map development requirement its recommended to use the Maps API instead of Bing maps as it is depreciated. Let us see the steps on how to achieve this task in our Windows Phone application development. Open Visual Studio 2012 IDE and create a new Windows Phone project with a valid project name as shown in the screen below.     [more]

Clicking on OK will create the project and the solution with the list of default files and folders that are required to run the application. It will take some time to create these files based on your system configuration, so once everything is ready we can see the Visual Studio IDE with the project as shown in the screen below.

Add we can add a map directly in the XAML page with the help of the MAP Control that is available in the tool box, This control will add the maps and on running the application will manage to open the maps in the default view.

XAML Code:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="F5debug How to Series" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="New Maps" 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">

            <maps:Map HorizontalAlignment="Left" Margin="24,24,0,0" VerticalAlignment="Top" Height="573" Width="422"/>

        </Grid>

Build and execute the application by pressing f5 from the keyboard or the execute button in the IDE and we can see the maps loaded its default view in the application as shown in the screen below.

So to customize further, let us navigate to a specific location in the maps. To do that we need to use the GeoCoordinate class to input the Lat and Long parameters and assign it to the maps as shown in the code below.

C# Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using F5debugHowto69.Resources;
using Microsoft.Phone.Maps.Controls;

namespace F5debugHowto69
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();           
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            mymaps.Center = new System.Device.Location.GeoCoordinate(12.9833, 77.5833);
        }      
    }
}

Now we are done with the code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screen below.