Creating mobile map infoboxes with Bing Maps and JQuery Mobile
This is the first in our new series on mobile mapping and are based on a talk I gave recently at the Bing Maps user group about some tips and techniques for creating maps specifically for mobile devices.
If you want to skip the overview and get straight into the code click here.
Fitting everything in
One of the first challenges you encounter when developing for mobile devices is how to fit all your information into such a small amount of space. If we look at the default Bing Maps infobox you can see it fits nicely on the ipad, but not so nicely on the iphone:
Giving users what they expect
Even if we could find a way to fit our information into such a small space on the iphone using the default infobox would not give users a great experience, and certainly not one they are used to getting from native applications on their mobile.
A better approach to this is to see how we can mimic other user interface concepts that users are already familiar with and use these to display the information that is associated with our pushpins.
The approach we are going to demonstrate in the rest of this tutorial is to create a typical mobile dialog for our pushpin using the Jquery Mobile library:
As you can see this is a pretty basic page and so far it does nothing. Now we need to add a few bits of markup so that Jquery Mobile helps us setup a basic mobile ready page, including automatic ajax page loading. We start by adding the following meta tag to the head:
Now we need to add some html in the body that will tell Jquery Mobile that we have a mobile page (each html file can contain multiple pages in Jquery Mobile), add the basic map div ready for us to load a Bing map into:
Jquery Mobile is very much about convention over configuration so the html 5 style “data-role” and the “ui-mobile-viewport” class on the body tag are used by Jquery Mobile to work its magic and apply its ‘mobile-esq’ css styling.
The only thing left to do is to create the “infoboxcontent.html” page itself, this again uses Jquery Mobile to provide the styling:
Clicking the cancel button closes the dialog and takes us back to the map without reloading the page, all by the magic of Jquery Mobile.
Hopefully this tutorial has shown you a really quick and easy way to produce infoboxes for mobile devices with very little code mostly thanks to Jquery Mobile. Over the coming weeks we will share a few other mobile mapping tutorials so let us know what issues you would like to see covered.
You can view a live demo and view the code at http://bit.ly/jexeja