Using Bing Maps

Using Bing maps inside your app might be very important and amazing feature that rates up your app in the store so, let’s know how to add Bing Maps to your Windows Store App.

First of all you will need to install “Bing Maps for windows Store C#” from the following URL:
http://visualstudiogallery.msdn.microsoft.com/224eb93a-ebc4-46ba-9be7-90ee777ad9e1

Then, Go to this website and register to get a Bing Maps  Key (You will need it inside your App each time you use bing maps)
http://www.microsoft.com/maps/create-a-bing-maps-key.aspx

Select Basic Key, then click on “Get the Basic Key” (as shown)
b6

Then, follow the steps to register,


and when you register successfully, Navigate to this URL:
https://www.bingmapsportal.com/application/index/1290911?status=NoStatus
Create a new Key
b7

Now, Open Visual Studio and follow these steps:

  1. Select BUILD > Configuration Manager.
  2. Choose x86 as shown.
    b1
  3. Then, Close.

Now, you have to reference the Bing Maps SDK:

  1. In Visual Studio, select PROJECT > Add Reference
  2. Expand Windows, and then select Extensions. 
  3. Select Bing Maps for C#, C++, or Visual Basic, and then click OK. (as shown)
    b2
  4. Then go to the Package.appmanifest, in Capabilities select Location (as shown)
    b3

Now, We will Insert a map into the app….

  1. Open MainPage.xaml in your project.
  2. Add the following namespace declaration in the Page tag.
    b4
  3. Insert the following XAML inside the <Grid> tags, and replace the placeholder INSERT_YOUR_BING_MAPS_KEY with your Bing Maps Key.
    b5

Now, we’ve already added the bing maps to the app Run and you will find the worldwide map.

Now let’s Add A Pushpin to the Map:

  1. In the MainPage.xaml, Add the following code:
    b8
    and by the way you can change the Longitude and Latitude as you like, i just have specified it to my town “Kafr Ash Shaykh, Egypt” but, you can search for the Longitude and Latitude you want and add them to the Xaml code. 🙂
  2. In MainPage.xaml.cs, Add the following Code:
    b9

Now, Run the App and Click on the Pushpin. 🙂

Now, we have finished our tutorial.
and here’s the link of the Code Sample:
http://1drv.ms/1ku8Rn5

Soon there will be an Arabic recorded video for this tutorial.
And if you need any help or support, don’t hesitate to contact me 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s