The Bing team just recently released the Bing Get Me There App for iOS following the apps original release for the Windows Phone. Bing Get Me There is a London (UK) travel app that gets people from A to B with true door-to-door directions using Bing maps and live tube updates as well as Bus, Docklands Light Rail (DLR) and Overground data, to ensure that people get the best route. Here are a couple screen shots of the application.
Now, the intention of this blog post isn’t meant to serve as an announcement for this application - rather it’s to show how Bing Maps can be used in iOS. You might think, well, that’s easy. They must be using the Bing Maps iOS control. And that’s a reasonable assumption, but you would be incorrect. This is actually built using the Bing Maps V7 AJAX control. That’s right - the same map control used for creating web applications is being used to create an iOS application. This map control is built on top of HTML5 and as a result, has excellent performance on mobile devices that support HTML5. In fact, it performs so well that it is as good if not better than the built-in maps on iOS devices. To make things even more interesting, this map control is being used inside a native iOS application so it can be made available to users through the marketplace.
How to create native mobile application using HTML5
You may ask: how can this be done? Well, there is this excellent open source framework called Apache Cordova which allows you to wrap HTML5 based applications with native code which can be used on mobile devices. There are wrappers for several different mobile platforms which allow you to create a single HTML5 application and deploy it to not only iOS but also to Android, Windows Phone, Blackberry, and a number of other platforms as well. You can even deploy your application to the web, although you will likely want to change the layout and styles. This is pretty significant as it drastically reduces development time while also reducing development costs. The Apache Cordova has been adopted by a project called PhoneGap which has a lot of documentation and useful resources to get you started. PhoneGap was actually used to create the Bing Get Me There app. In addition, these frameworks also expose functionalities like the GPS and Camera through to your HTML5 code.
If you decide to develop an application using this approach, you will quickly realize that having all the right software and hardware needed to compile your code for the different mobile platforms is pretty important. For help with this there is a pretty cool solution called PhoneGap Build which compiles the applications for you in the cloud.
Since we are on the topic of using the Bing Maps V7 AJAX control for creating native applications it is also worth mentioning that this map control is the basis for the HTML5 version of the Bing Maps control in Windows 8. This means you could reuse a large portion of the code you create for your mobile application to create a new Windows UI style Bing Maps application for Windows 8.
How to look and feel like a mobile app
Now, how do I get my HTML5 application to look and feel like a mobile application? jQuery is a very common tool used on website for making JavaScript development faster and easier. There is also jQuery UI tool which can be used to add different types of animations and controls such as sliders. For mobile development there is another version of jQuery called jQuery Mobile. jQuery Mobile has all the JavaScript and CSS styles you need to make your HTML5 application look and feel like a mobile application. jQuery Mobile can make all your buttons and transition look identical to the ones that are in native applications
Get building!!!
If you want to create a single Bing Maps application to target multiple mobile platforms, this is the way to go. One of the best things about taking this approach is that you get access to all the features that are available in the Bing Maps V7 AJAX control such as Venue Maps and support for complex shapes. So what are you waiting for, get building!!!
By Ricky Brundritt, EMEA Bing Maps Technology Solution Professional