Secret Communications X012Y: Using the Bing Map API in the Mobile Map Example

It’s secret, how to get started using an the Bing Map API? in your Mobile App

Soooo, you go to the samples, you bought the Windows Phone and now you want to use the Bing Map API, you get through the process of signing up for the Bing Map API (you only get five to start with by the way). Now you go to use the example code for the Map API. Oh-oh, there is a little bar with tiny font (fortunately I have good eyes for an old guy) that says the app is invalid. Oh crud, I need to add my API, where do I put the 64 character API? (I always think of the opening scene from Swordfish, with the gun to the head and the programmer has to crack the password, he does that, BUT, now MR. HACKER, crack the API!)

Code sample for Bing Maps Sample (this is the one I am using, links verified Nov. 5, 2010):

https://go.microsoft.com/fwlink/?LinkID=200734

Get your Bing Maps API by creating a Developer Account:

https://msdn.microsoft.com/en-us/library/ff428642.aspx

Then you go to find out how to use the Bing Maps Key in your App:

https://msdn.microsoft.com/en-us/library/ee681900.aspx

But this example is for a Windows based application. Great. No wait, that is ok. Here is how you use it in your mobile app:

Find the MainPage.XAML file in the solution explorer

Locate the part of the code that looks like the following:

<my:Map Height="462" HorizontalAlignment="Left" Margin="6,6,0,0" Name="map1" VerticalAlignment="Top" Width="444" />

<Button Content="Zoom In" Height="72" HorizontalAlignment="Left" Margin="6,535,0,0" Name="buttonZoomIn" VerticalAlignment="Top" Width="207" Click="buttonZoomIn_Click" />

<Button Content="Road Mode" Height="72" HorizontalAlignment="Left" Margin="6,474,0,0" Name="buttonRoad" VerticalAlignment="Top" Width="207" Click="buttonRoad_Click" />

<Button Content="Zoom Out" Height="72" HorizontalAlignment="Left" Margin="243,535,0,0" Name="buttonZoomOut" VerticalAlignment="Top" Width="207" Click="buttonZoomOut_Click" />

<Button Content="Aerial Mode" Height="72" HorizontalAlignment="Left" Margin="243,474,0,0" Name="buttonAerial" VerticalAlignment="Top" Width="207" Click="buttonAerial_Click" />

</Grid>

Change the line starting with <my:Map Height

by adding the: CredentialsProvider="Put the 64 character Bing Map API Here" and make the Grid look like:

<my:Map Height="462" HorizontalAlignment="Left" Margin="6,6,0,0" Name="map1" VerticalAlignment="Top" Width="444" CredentialsProvider="Put the 64 character Bing Map API Here" />