Bing Maps on IPhone with Phone Gap/Apache Cordova

posted in: Uncategorized | 0


We’ve done a bunch of Bing Maps development before and we’ve done some work with Windows Phone, but we have a client who wants and IPhone application to show some spatial data as most of their internal users have either got an IPhone or IPad, closely followed by Android devices. They’re happy with Bing Maps that we’ve used with them before so are fine with sticking to what’s familiar to them. Only problem is I’m not an IPhone developer…

I did a bit of research and have had recommendations from a number of people that Phone Gap is quite good. So I’m going to try and build a good app for them using it and hopefully learn a few things along the way.

To start, I needed a Mac (which I’m borrowing to start with), with OSX Lion, XCode 4 and the other pre-requites that are set out in the really useful Getting Started with iOS guide for Phone Gap. So I’ve got all these and worked out how to install them on a Mac – you know, things like where’s the file explorer and how do i right click with the trackpad. Yes, all those things you want to do but don’t yet know how to do on this device.

I follow the instructions and helpful videos and get a hello world example running on the emulator (happy dance) and then it’s time for something more complex….lets put a map control on the page.

Simple..I grab the code snippet of a basic map from the Interactive SDK and run my app. All I get is a white screen Sad smile. I open the html file up in safari on the mac to check if i’ve failed cut and paste school but it works..hmmm. There must be a url list somewhere that I need to unblock or similar. So after a quick search on the internet I discover my assumption is correct.

  • I navigate to the Supporting Files folder under my solution
  • Open the Cordova.plist file.
  • Add a new item to the External Hosts section – first I try * just to be sure and it works .. yay.
  • All I really need to set it to is: * and it’s all happy.


As you can see in the first screenshot I’m using the no credentials example first. So now I should be fine to continue building out my map application.

To test my application on a device I need an apple developer subscription. It looked really easy but I couldn’t activate my account after I’d signed up and paid. So a tip for newbies like me, if you sign up, make sure you use a credit card with a name that matches your name. I made the mistake of using John’s credit card and now I’m going to have to go through a verification process which involves faxing a notarised copy of my passport to apple (sign…if only they flagged it when I entered the details on the site I could have used my own instead).

If any of you have used Phone Gap before with Bing Maps would love to hear about your favourite plugins, source code structure for easiest re-use between device code bases, how you handled internet dropouts etc. and any other tips and tricks.